Da

✏️ Editing: how-to-block.js

(()=>{"use strict";var t={n:e=>{var s=e&&e.__esModule?()=>e.default:()=>e;return t.d(s,{a:s}),s},d:(e,s)=>{for(var o in s)t.o(s,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:s[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)};const e=window.wp.blockEditor,s=window.wp.blocks,o=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"version":"22.7","name":"yoast/how-to-block","title":"Yoast How-to","description":"Create a How-to guide in an SEO-friendly way. You can only use one How-to block per post.","category":"yoast-structured-data-blocks","icon":"editor-ol","keywords":["How-to","How to","Schema","SEO","Structured Data"],"supports":{"multiple":false},"textdomain":"wordpress-seo","attributes":{"hasDuration":{"type":"boolean"},"days":{"type":"string"},"hours":{"type":"string"},"minutes":{"type":"string"},"description":{"type":"string","source":"html","selector":".schema-how-to-description"},"jsonDescription":{"type":"string"},"steps":{"type":"array"},"additionalListCssClasses":{"type":"string"},"unorderedList":{"type":"boolean"},"durationText":{"type":"string"},"defaultDurationText":{"type":"string"}},"example":{"attributes":{"steps":[{"id":"how-to-step-example-1","name":[],"text":[]},{"id":"how-to-step-example-2","name":[],"text":[]}]}},"editorScript":"yoast-seo-how-to-block","editorStyle":"yoast-seo-structured-data-blocks"}'),i=window.yoast.propTypes;var n=t.n(i);const r=window.wp.i18n,a=window.wp.a11y,h=window.lodash,p=window.wp.element,d=window.ReactJSXRuntime,c=function(t){return class extends p.Component{render(){return(0,d.jsxs)(p.Fragment,{children:[(0,d.jsx)(t,{...this.props})," "]})}}},u=window.wp.isShallowEqual,l=window.wp.components,m=c(e.RichText.Content);class w extends p.Component{constructor(t){super(t),this.onSelectImage=this.onSelectImage.bind(this),this.onInsertStep=this.onInsertStep.bind(this),this.onRemoveStep=this.onRemoveStep.bind(this),this.onMoveStepUp=this.onMoveStepUp.bind(this),this.onMoveStepDown=this.onMoveStepDown.bind(this),this.onFocusText=this.onFocusText.bind(this),this.onFocusTitle=this.onFocusTitle.bind(this),this.onChangeTitle=this.onChangeTitle.bind(this),this.onChangeText=this.onChangeText.bind(this)}onInsertStep(){this.props.insertStep(this.props.index)}onRemoveStep(){this.props.removeStep(this.props.index)}onMoveStepUp(){this.props.isFirst||this.props.onMoveUp(this.props.index)}onMoveStepDown(){this.props.isLast||this.props.onMoveDown(this.props.index)}onFocusTitle(){this.props.onFocus(this.props.index,"name")}onFocusText(){this.props.onFocus(this.props.index,"text")}onChangeTitle(t){const{onChange:e,index:s,step:{text:o,name:i}}=this.props;e(t,o,i,o,s)}onChangeText(t){const{onChange:e,index:s,step:{text:o,name:i}}=this.props;e(i,t,i,o,s)}getMediaUploadButton(t){return(0,d.jsx)(l.Button,{className:"schema-how-to-step-button how-to-step-add-media",icon:"insert",onClick:t.open,children:(0,r.__)("Add image","wordpress-seo")})}getButtons(){const{step:t}=this.props;return(0,d.jsxs)("div",{className:"schema-how-to-step-button-container",children:[!w.getImageSrc(t.text)&&(0,d.jsx)(e.MediaUpload,{onSelect:this.onSelectImage,allowedTypes:["image"],value:t.id,render:this.getMediaUploadButton}),(0,d.jsx)(l.Button,{className:"schema-how-to-step-button",icon:"trash",label:(0,r.__)("Delete step","wordpress-seo"),onClick:this.onRemoveStep}),(0,d.jsx)(l.Button,{className:"schema-how-to-step-button",icon:"insert",label:(0,r.__)("Insert step","wordpress-seo"),onClick:this.onInsertStep})]})}getMover(){return(0,d.jsxs)("div",{className:"schema-how-to-step-mover",children:[(0,d.jsx)(l.Button,{className:"editor-block-mover__control",onClick:this.onMoveStepUp,icon:"arrow-up-alt2",label:(0,r.__)("Move step up","wordpress-seo"),"aria-disabled":this.props.isFirst}),(0,d.jsx)(l.Button,{className:"editor-block-mover__control",onClick:this.onMoveStepDown,icon:"arrow-down-alt2",label:(0,r.__)("Move step down","wordpress-seo"),"aria-disabled":this.props.isLast})]})}onSelectImage(t){const{index:e,step:{name:s,text:o}}=this.props;let i=o.slice();const n=(0,d.jsx)("img",{className:`wp-image-${t.id}`,alt:t.alt,src:t.url,style:"max-width:100%;"});i.push?i.push(n):i=[i,n],this.props.onChange(s,i,s,o,e)}static getImageSrc(t){if(!t||!t.filter)return!1;const e=t.filter((t=>t&&t.type&&"img"===t.type))[0];return!!e&&e.props.src}shouldComponentUpdate(t){return!(0,u.isShallowEqualObjects)(t,this.props)}static Content(t){return(0,d.jsxs)("li",{className:"schema-how-to-step",id:t.id,children:[(0,d.jsx)(m,{tagName:"strong",className:"schema-how-to-step-name",value:t.name},t.id+"-name"),(0,d.jsx)(m,{tagName:"p",className:"schema-how-to-step-text",value:t.text},t.id+"-text")]},t.id)}render(){const{index:t,step:s,isSelected:o,isUnorderedList:i}=this.props,{id:n,name:a,text:h}=s;return(0,d.jsxs)("li",{className:"schema-how-to-step",children:[(0,d.jsx)("span",{className:"schema-how-to-step-number",children:i?"•":t+1+"."}),(0,d.jsx)(e.RichText,{identifier:`${n}-name`,className:"schema-how-to-step-name",tagName:"p",value:a,onChange:this.onChangeTitle,onFocus:this.onFocusTitle,placeholder:(0,r.__)("Enter a step title","wordpress-seo"),allowedFormats:["core/italic","core/strikethrough","core/link","core/annotation"]},`${n}-name`),(0,d.jsx)(e.RichText,{identifier:`${n}-text`,className:"schema-how-to-step-text",tagName:"p",value:h,onChange:this.onChangeText,onFocus:this.onFocusText,placeholder:(0,r.__)("Enter a step description","wordpress-seo")},`${n}-text`),o&&(0,d.jsxs)("div",{className:"schema-how-to-step-controls-container",children:[this.getMover(),this.getButtons()]})]},n)}}function x(t,e=0){return parseInt(t,10)||e}w.propTypes={index:n().number.isRequired,step:n().object.isRequired,onChange:n().func.isRequired,insertStep:n().func.isRequired,removeStep:n().func.isRequired,onFocus:n().func.isRequired,onMoveUp:n().func.isRequired,onMoveDown:n().func.isRequired,isSelected:n().bool.isRequired,isFirst:n().bool.isRequired,isLast:n().bool.isRequired,isUnorderedList:n().bool},w.defaultProps={isUnorderedList:!1};const g=window.React,b=c(e.RichText.Content);class S extends p.Component{constructor(t){super(t),this.state={focus:""},this.changeStep=this.changeStep.bind(this),this.insertStep=this.insertStep.bind(this),this.removeStep=this.removeStep.bind(this),this.swapSteps=this.swapSteps.bind(this),this.setFocus=this.setFocus.bind(this),this.addCSSClasses=this.addCSSClasses.bind(this),this.getListTypeHelp=this.getListTypeHelp.bind(this),this.toggleListType=this.toggleListType.bind(this),this.setDurationText=this.setDurationText.bind(this),this.setFocusToStep=this.setFocusToStep.bind(this),this.moveStepUp=this.moveStepUp.bind(this),this.moveStepDown=this.moveStepDown.bind(this),this.focusDescription=this.focusDescription.bind(this),this.addDuration=this.addDuration.bind(this),this.removeDuration=this.removeDuration.bind(this),this.onChangeDescription=this.onChangeDescription.bind(this),this.onChangeDays=this.onChangeDays.bind(this),this.onChangeHours=this.onChangeHours.bind(this),this.onChangeMinutes=this.onChangeMinutes.bind(this),this.onAddStepButtonClick=this.onAddStepButtonClick.bind(this),this.daysInput=(0,p.createRef)(),this.addDurationButton=(0,p.createRef)();const e=this.getDefaultDurationText();this.setDefaultDurationText(e)}getDefaultDurationText(){const t=(0,h.get)(window,"wp.hooks.applyFilters");let e=(0,r.__)("Time needed:","wordpress-seo");return t&&(e=t("wpseo_duration_text",e)),e}setDurationText(t){this.props.setAttributes({durationText:t})}setDefaultDurationText(t){this.props.setAttributes({defaultDurationText:t})}onAddStepButtonClick(){this.insertStep(null,[],[],!1)}static generateId(t){return`${t}-${(new Date).getTime()}`}changeStep(t,e,s,o,i){const n=this.props.attributes.steps?this.props.attributes.steps.slice():[];if(i>=n.length)return;if(n[i].name!==s||n[i].text!==o)return;n[i]={id:n[i].id,name:t,text:e,jsonName:(0,p.renderToString)(t),jsonText:(0,p.renderToString)(e)};const r=w.getImageSrc(e);r&&(n[i].jsonImageSrc=r),this.props.setAttributes({steps:n})}insertStep(t=null,e=[],s=[],o=!0){const i=this.props.attributes.steps?this.props.attributes.steps.slice():[];null===t&&(t=i.length-1),i.splice(t+1,0,{id:S.generateId("how-to-step"),name:e,text:s,jsonName:"",jsonText:""}),this.props.setAttributes({steps:i}),o?setTimeout(this.setFocus.bind(this,`${t+1}:name`)):(0,a.speak)((0,r.__)("New step added","wordpress-seo"))}swapSteps(t,e){const s=this.props.attributes.steps?this.props.attributes.steps.slice():[],o=s[t];s[t]=s[e],s[e]=o,this.props.setAttributes({steps:s});const[i,n]=this.state.focus.split(":");i===`${t}`&&this.setFocus(`${e}:${n}`),i===`${e}`&&this.setFocus(`${t}:${n}`)}removeStep(t){const e=this.props.attributes.steps?this.props.attributes.steps.slice():[];e.splice(t,1),this.props.setAttributes({steps:e});let s="description";e[t]?s=`${t}:name`:e[t-1]&&(s=t-1+":text"),this.setFocus(s)}setFocus(t){t!==this.state.focus&&this.setState({focus:t})}setFocusToStep(t,e){this.setFocus(`${t}:${e}`)}moveStepUp(t){this.swapSteps(t,t-1)}moveStepDown(t){this.swapSteps(t,t+1)}getSteps(){if(!this.props.attributes.steps)return null;const[t]=this.state.focus.split(":");return this.props.attributes.steps.map(((e,s)=>(0,d.jsx)(w,{step:e,index:s,onChange:this.changeStep,insertStep:this.insertStep,removeStep:this.removeStep,onFocus:this.setFocusToStep,onMoveUp:this.moveStepUp,onMoveDown:this.moveStepDown,isFirst:0===s,isLast:s===this.props.attributes.steps.length-1,isSelected:t===`${s}`,isUnorderedList:this.props.attributes.unorderedList},e.id)))}formatDuration(t,e=null){if(""===t)return"";const s=t.replace(/^[0]+/,"");return""===s?0:null!==e?Math.min(Math.max(0,parseInt(s,10)),e):Math.max(0,parseInt(s,10))}static getStepsContent(t){return t?t.map((t=>(0,g.createElement)(w.Content,{...t,key:t.id}))):null}static Content(t){const{steps:e,hasDuration:s,days:o,hours:i,minutes:n,description:a,unorderedList:h,additionalListCssClasses:p,className:c,durationText:u,defaultDurationText:l}=t,m=["schema-how-to",c].filter((t=>t)).join(" "),w=["schema-how-to-steps",p].filter((t=>t)).join(" "),g=function(t){const e=function({days:t,hours:e,minutes:s}){const o=[];return 0!==t&&o.push((0,r.sprintf)(/* translators: %d expands to the number of days. */
(0,r._n)("%d day","%d days",t,"wordpress-seo"),t)),0!==e&&o.push((0,r.sprintf)(/* translators: %d expands to the number of hours. */
(0,r._n)("%d hour","%d hours",e,"wordpress-seo"),e)),0!==s&&o.push((0,r.sprintf)(/* translators: %d expands to the number of minutes. */
(0,r._n)("%d minute","%d minutes",s,"wordpress-seo"),s)),o}({days:x(t.days),hours:x(t.hours),minutes:x(t.minutes)});return 1===e.length?e[0]:2===e.length?(0,r.sprintf)(/* translators: %1$s and %2$s expand to units of time (e.g. 1 day). */
(0,r.__)("%1$s and %2$s","wordpress-seo"),...e):3===e.length?(0,r.sprintf)(/* translators: %1$s, %2$s and %3$s expand to units of time (e.g. 1 day). */
(0,r.__)("%1$s, %2$s and %3$s","wordpress-seo"),...e):""}({days:o,hours:i,minutes:n});return(0,d.jsxs)("div",{className:m,children:[s&&"string"==typeof g&&g.length>0&&(0,d.jsxs)("p",{className:"schema-how-to-total-time",children:[(0,d.jsxs)("span",{className:"schema-how-to-duration-time-text",children:[u||l," "]}),g+". "]}),(0,d.jsx)(b,{tagName:"p",className:"schema-how-to-description",value:a}),h?(0,d.jsx)("ul",{className:w,children:S.getStepsContent(e)}):(0,d.jsx)("ol",{className:w,children:S.getStepsContent(e)})]})}getAddStepButton(){return(0,d.jsx)(l.Button,{icon:"insert",onClick:this.onAddStepButtonClick,className:"schema-how-to-add-step",children:(0,r.__)("Add step","wordpress-seo")})}addCSSClasses(t){this.props.setAttributes({additionalListCssClasses:t})}toggleListType(t){this.props.setAttributes({unorderedList:t})}getListTypeHelp(t){return t?(0,r.__)("Showing step items as an unordered list","wordpress-seo"):(0,r.__)("Showing step items as an ordered list.","wordpress-seo")}focusDescription(){this.setFocus("description")}onChangeDescription(t){this.props.setAttributes({description:t,jsonDescription:(0,p.renderToString)(t)})}addDuration(){this.props.setAttributes({hasDuration:!0}),setTimeout((()=>this.daysInput.current.focus()))}removeDuration(){this.props.setAttributes({hasDuration:!1}),setTimeout((()=>{this.addDurationButton.current instanceof p.Component||this.addDurationButton.current.focus()}))}onChangeDays(t){const e=this.formatDuration(t.target.value);this.props.setAttributes({days:(0,h.toString)(e)})}onChangeHours(t){const e=this.formatDuration(t.target.value,23);this.props.setAttributes({hours:(0,h.toString)(e)})}onChangeMinutes(t){const e=this.formatDuration(t.target.value,59);this.props.setAttributes({minutes:(0,h.toString)(e)})}getDuration(){const{attributes:t}=this.props;return t.hasDuration?(0,d.jsx)("fieldset",{className:"schema-how-to-duration",children:(0,d.jsxs)("span",{className:"schema-how-to-duration-flex-container",role:"presentation",children:[(0,d.jsx)("legend",{className:"schema-how-to-duration-legend",children:t.durationText||this.getDefaultDurationText()}),(0,d.jsxs)("span",{className:"schema-how-to-duration-time-input",children:[(0,d.jsx)("label",{htmlFor:"schema-how-to-duration-days",className:"screen-reader-text",children:/* translators: Hidden accessibility text. */
(0,r.__)("days","wordpress-seo")}),(0,d.jsx)("input",{id:"schema-how-to-duration-days",className:"schema-how-to-duration-input",type:"number",value:t.days,onChange:this.onChangeDays,placeholder:"DD",ref:this.daysInput}),(0,d.jsx)("label",{htmlFor:"schema-how-to-duration-hours",className:"screen-reader-text",children:(0,r.__)("hours","wordpress-seo")}),(0,d.jsx)("input",{id:"schema-how-to-duration-hours",className:"schema-how-to-duration-input",type:"number",value:t.hours,onChange:this.onChangeHours,placeholder:"HH"}),(0,d.jsx)("span",{"aria-hidden":"true",children:":"}),(0,d.jsx)("label",{htmlFor:"schema-how-to-duration-minutes",className:"screen-reader-text",children:(0,r.__)("minutes","wordpress-seo")}),(0,d.jsx)("input",{id:"schema-how-to-duration-minutes",className:"schema-how-to-duration-input",type:"number",value:t.minutes,onChange:this.onChangeMinutes,placeholder:"MM"}),(0,d.jsx)(l.Button,{className:"schema-how-to-duration-delete-button",icon:"trash",label:(0,r.__)("Delete total time","wordpress-seo"),onClick:this.removeDuration})]})]})}):(0,d.jsx)(l.Button,{onClick:this.addDuration,className:"schema-how-to-duration-button",ref:this.addDurationButton,icon:"insert",children:(0,r.__)("Add total time","wordpress-seo")})}getSidebar(t,s,o){return o===this.getDefaultDurationText()&&(o=""),(0,d.jsx)(e.InspectorControls,{children:(0,d.jsxs)(l.PanelBody,{title:(0,r.__)("Settings","wordpress-seo"),className:"blocks-font-size",children:[(0,d.jsx)(l.TextControl,{label:(0,r.__)("CSS class(es) to apply to the steps","wordpress-seo"),value:s,onChange:this.addCSSClasses,help:(0,r.__)("Optional. This can give you better control over the styling of the steps.","wordpress-seo"),__next40pxDefaultSize:!0,__nextHasNoMarginBottom:!0}),(0,d.jsx)(l.TextControl,{label:(0,r.__)("Describe the duration of the instruction:","wordpress-seo"),value:o,onChange:this.setDurationText,help:(0,r.__)("Optional. Customize how you want to describe the duration of the instruction","wordpress-seo"),placeholder:this.getDefaultDurationText(),__next40pxDefaultSize:!0,__nextHasNoMarginBottom:!0}),(0,d.jsx)(l.ToggleControl,{label:(0,r.__)("Unordered list","wordpress-seo"),checked:t||!1,onChange:this.toggleListType,help:this.getListTypeHelp,__nextHasNoMarginBottom:!0})]})})}render(){const{attributes:t,className:s}=this.props,o=["schema-how-to",s].filter((t=>t)).join(" "),i=["schema-how-to-steps",t.additionalListCssClasses].filter((t=>t)).join(" ");return(0,d.jsxs)("div",{className:o,children:[this.getDuration(),(0,d.jsx)(e.RichText,{identifier:"description",tagName:"p",className:"schema-how-to-description",value:t.description,onChange:this.onChangeDescription,onFocus:this.focusDescription,placeholder:(0,r.__)("Enter a description","wordpress-seo")}),(0,d.jsx)("ul",{className:i,children:this.getSteps()}),(0,d.jsx)("div",{className:"schema-how-to-buttons",children:this.getAddStepButton()}),this.getSidebar(t.unorderedList,t.additionalListCssClasses,t.durationText)]})}}function f(t,e=0){return parseInt(t,10)||e}function C(t){const e=function({days:t,hours:e,minutes:s}){const o=[];return 0!==t&&o.push((0,r.sprintf)(/* translators: %d expands to the number of days. */
(0,r._n)("%d day","%d days",t,"wordpress-seo"),t)),0!==e&&o.push((0,r.sprintf)(/* translators: %d expands to the number of hours. */
(0,r._n)("%d hour","%d hours",e,"wordpress-seo"),e)),0!==s&&o.push((0,r.sprintf)(/* translators: %d expands to the number of minutes. */
(0,r._n)("%d minute","%d minutes",s,"wordpress-seo"),s)),o}({days:f(t.days),hours:f(t.hours),minutes:f(t.minutes)});return 1===e.length?e[0]:2===e.length?(0,r.sprintf)(/* translators: %1$s and %2$s expand to units of time (e.g. 1 day). */
(0,r.__)("%1$s and %2$s","wordpress-seo"),...e):3===e.length?(0,r.sprintf)(/* translators: %1$s, %2$s and %3$s expand to units of time (e.g. 1 day). */
(0,r.__)("%1$s, %2$s and %3$s","wordpress-seo"),...e):""}S.propTypes={attributes:n().object.isRequired,setAttributes:n().func.isRequired,className:n().string},S.defaultProps={className:""};const j=t=>(0,d.jsxs)("li",{className:"schema-how-to-step",children:[(0,d.jsx)("strong",{className:"schema-how-to-step-name",children:t.name},t.id+"-name")," ",(0,d.jsx)("p",{className:"schema-how-to-step-text",children:t.text},t.id+"-text")," "]},t.id);function y(t){let{steps:e}=t.attributes;const{hasDuration:s,days:o,hours:i,minutes:n,description:a,unorderedList:h,additionalListCssClasses:p,className:c}=t.attributes;e=e?e.map((t=>(0,g.createElement)(j,{...t,key:t.id}))):null;const u=["schema-how-to",c].filter((t=>t)).join(" "),l=["schema-how-to-steps",p].filter((t=>t)).join(" "),m=C({days:o,hours:i,minutes:n});return(0,d.jsxs)("div",{className:u,children:[s&&"string"==typeof m&&m.length>0&&(0,d.jsxs)("p",{className:"schema-how-to-total-time",children:[(0,r.__)("Time needed:","wordpress-seo")," ",m+". "]}),(0,d.jsx)("p",{className:"schema-how-to-description",children:a})," ",h?(0,d.jsx)("ul",{className:l,children:e}):(0,d.jsx)("ol",{className:l,children:e})]})}function _(t){return(0,d.jsxs)("li",{className:"schema-how-to-step",children:[(0,d.jsx)("strong",{className:"schema-how-to-step-name",children:t.name},t.id+"-name")," ",(0,d.jsx)("p",{className:"schema-how-to-step-text",children:t.text},t.id+"-text")," "]},t.id)}function v(t){const{steps:e,hasDuration:s,days:o,hours:i,minutes:n,description:r,unorderedList:a,additionalListCssClasses:h,className:p,durationText:c,defaultDurationText:u}=t.attributes,l=["schema-how-to",p].filter((t=>t)).join(" "),m=["schema-how-to-steps",h].filter((t=>t)).join(" "),w=C({days:o,hours:i,minutes:n});let x=[];return e&&(x=e.map((t=>(0,g.createElement)(_,{...t,key:t.id})))),(0,d.jsxs)("div",{className:l,children:[s&&"string"==typeof w&&w.length>0&&(0,d.jsxs)("p",{className:"schema-how-to-total-time",children:[(0,d.jsxs)("span",{className:"schema-how-to-duration-time-text",children:[c||u," "]}),w+". "]}),(0,d.jsx)("p",{className:"schema-how-to-description",children:r})," ",a?(0,d.jsx)("ul",{className:m,children:x}):(0,d.jsx)("ol",{className:m,children:x})]})}y.propTypes={attributes:n().object},v.propTypes={attributes:n().object.isRequired};const D={v8_2:y,v11_4:v};(0,s.registerBlockType)(o,{edit:({attributes:t,setAttributes:s,className:o})=>{const i=(0,e.useBlockProps)();return t.steps&&0!==t.steps.length||(t.steps=[{id:S.generateId("how-to-step"),name:[],text:[]}]),(0,d.jsx)("div",{...i,children:(0,d.jsx)(S,{attributes:t,setAttributes:s,className:o})})},save:({attributes:t})=>{const s=e.useBlockProps.save(t);return(0,d.jsx)(S.Content,{...s})},deprecated:[{attributes:o.attributes,save:D.v11_4},{attributes:o.attributes,save:D.v8_2}]})})();

📁 Sid Gifari File Manager