diff --git a/dist/index.asset.php b/dist/index.asset.php index bb02681..25f8cfd 100644 --- a/dist/index.asset.php +++ b/dist/index.asset.php @@ -1 +1 @@ - array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-dom', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-server-side-render', 'wp-url'), 'version' => '27efa55df920e54bd9f2'); + array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-dom', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-server-side-render', 'wp-url'), 'version' => 'a95f545c27eab2ab7e77'); diff --git a/dist/index.js b/dist/index.js index 40e7a86..467dc38 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,2 +1,2 @@ /*! For license information please see index.js.LICENSE.txt */ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["@humanmade/block-editor-components"]=t():e["@humanmade/block-editor-components"]=t()}(self,(()=>(()=>{var e={184:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t{"use strict";var o=n(414);function r(){}function l(){}l.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,l,a){if(a!==o){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:l,resetWarningCache:r};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var l=t[o]={exports:{}};return e[o](l,l.exports,n),l.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{"use strict";n.r(o),n.d(o,{ConditionalComponent:()=>r,FetchAllTermSelectControl:()=>p,FileControls:()=>f,GenericServerSideEdit:()=>y,ImageControl:()=>T,InnerBlockSlider:()=>A,LinkToolbar:()=>L,PlainTextWithLimit:()=>j,PostPickerButton:()=>J,PostPickerModal:()=>Q,PostPickerToolbarButton:()=>Y,PostTitleControl:()=>D,PostTypeCheck:()=>$,RichTextWithLimit:()=>z,TermSelector:()=>H,createOptionFromPost:()=>de,createOptionFromTerm:()=>me,createOptionsFromPosts:()=>pe,createOptionsFromPostsWithHierarchy:()=>be,createOptionsFromTerms:()=>fe,createOptionsFromTermsWithHierarchy:()=>ge,findBlockByName:()=>le,findInvalidBlock:()=>ae,findInvalidBlocks:()=>ie,findValidBlock:()=>ce,findValidBlocks:()=>se,getImageDataForSize:()=>h,useActiveBlockStyle:()=>X,useBlockStyles:()=>Z,useDisallowedBlocks:()=>ee,useMeta:()=>te,useRenderAppenderWithBlockLimit:()=>ne,useSelectBlock:()=>oe,useSetAttribute:()=>re,withActiveVariation:()=>ke});const e=window.wp.element,t=window.React;function r(t){const{children:n=null,ComponentFalse:o=(()=>null),ComponentTrue:r=(()=>n),predicate:l,...a}=t,i=l(a)?r:o;return(0,e.createElement)(i,{...a})}const l=window.wp.apiFetch;var a=n.n(l);const i=window.wp.components,c=window.wp.data,s=window.wp.i18n,u=window.wp.url,d={label:"",value:""},m={disabled:!0,label:(0,s.__)("No items found!","block-editor-components"),value:""};const p=function(n){const{defaultOption:o=d,fallbackOption:r=m,taxonomy:l,...p}=n,[b,f]=(0,t.useState)(),[g,k]=(0,t.useState)(),y=(0,c.useSelect)((e=>e("core").getTaxonomy(l)?.rest_base),[l]);return(0,t.useEffect)((()=>{y&&(async()=>{try{const e=await a()({path:(0,u.addQueryArgs)(`/wp/v2/${y}`,{_fields:"id,name",context:"view",per_page:-1})});if(!e?.length)return void k(r?[r]:[]);k([...o?[o]:[],...fe(e)])}catch(t){var e;f(null!==(e=t.message)&&void 0!==e?e:(0,s.__)("Unknown error.","block-editor-components"))}})()}),[y,o,r]),b?(0,e.createElement)(i.Notice,{isDismissible:!1,status:"error"},(0,e.createElement)("p",null,b)):g?(0,e.createElement)(i.SelectControl,{...p,options:g}):(0,e.createElement)(i.Spinner,null)},b=window.wp.blockEditor;function f(t){const{value:n,onChange:o,...r}=t;return(0,e.createElement)(b.MediaUploadCheck,null,(0,e.createElement)(b.MediaUpload,{title:(0,s.__)("Select or Upload File","block-editor-components"),...r,multiple:!1,render:({open:t})=>(0,e.createElement)(i.ToolbarGroup,null,(0,e.createElement)(i.ToolbarButton,{icon:"admin-links",label:n?(0,s.__)("Edit file","block-editor-components"):(0,s.__)("Select file","block-editor-components"),onClick:t}),n&&(0,e.createElement)(i.ToolbarButton,{icon:"editor-unlink",label:(0,s.__)("Deselect file","block-editor-components"),onClick:()=>o(null)})),value:n,onSelect:o}))}const g=window.wp.serverSideRender;var k=n.n(g);const y=function({attributes:t,context:n,name:o}){return(0,e.createElement)("div",{...(0,b.useBlockProps)()},(0,e.createElement)(i.Disabled,null,(0,e.createElement)(k(),{attributes:t,block:o,EmptyResponsePlaceholder:()=>(0,e.createElement)("div",{className:`wp-block-${o.replace("/","-")}`},o," ",(0,s.__)("Block rendered as empty.")),urlQueryArgs:"object"==typeof n&&Object.hasOwn(n,"postId")?{post_id:n.postId}:{}})))};function h(e,t){var n;const o=null!==(n=e?.sizes)&&void 0!==n?n:e?.media_details?.sizes,r=o?.[t];return r?{src:r.url||r.source_url,width:r.width,height:r.height}:null}const v=["image"],E=(0,s.__)("Select Image","block-editor-components"),S=(0,s.__)("Select Image","block-editor-components"),_=(0,s.__)("Remove image","block-editor-components"),w=(0,s.__)("Replace Image","block-editor-components");function T(t){const{buttonText:n=E,className:o,help:r,id:l,label:a,modalTitle:s=S,removeButtonText:u=_,replaceButtonText:d=w,size:m,value:p,onChange:f}=t,g=(0,c.useSelect)((e=>{const t=e("core").getMedia(p,{context:"view"});return t?t.alt_text:""}),[p]),k=(0,c.useSelect)((e=>{const t=e("core").getMedia(p,{context:"view"});if(t){if(m){const e=h(t,m);if(e)return e.src}return t.source_url}}),[m,p]);return(0,e.createElement)(i.BaseControl,{className:o,help:r,id:l,label:a},(0,e.createElement)(b.MediaUploadCheck,null,(0,e.createElement)(b.MediaUpload,{allowedTypes:v,render:({open:t})=>(0,e.createElement)("div",null,p?k?(0,e.createElement)(i.Button,{isLink:!0,onClick:t},(0,e.createElement)("img",{alt:g,src:k})):(0,e.createElement)(i.Spinner,null):null,(0,e.createElement)(i.Button,{isSecondary:!0,onClick:t},p?d:n)),title:s,onSelect:f})),(0,e.createElement)("br",null),p?(0,e.createElement)(i.Button,{isDestructive:!0,isLink:!0,onClick:()=>f(null)},u):null)}var C=n(697),B=n.n(C);const x=window.wp.blocks;function P({className:n,allowedBlocks:o,template:r,currentItemIndex:l,parentBlockId:a,renderAppender:i,captureToolbars:c}){const s=(0,t.useRef)(),u=(0,b.useInnerBlocksProps)({id:`inner-block-display-single-${a}`,className:n},{__experimentalCaptureToolbars:c,allowedBlocks:o,orientation:"horizontal",renderAppender:i,template:r,templateLock:!1});return(0,t.useEffect)((()=>{s.current&&(s.current.innerHTML=`#inner-block-display-single-${a} > *:not(:nth-child(${l+1}) ) { display: none; }`)}),[l,s,a]),(0,e.createElement)(e.Fragment,null,(0,e.createElement)("style",{ref:s}),(0,e.createElement)("div",{...u}))}P.defaultProps={currentItemIndex:0,renderAppender:!1,captureToolbars:!0},P.propTypes={parentBlockId:B().string.isRequired,allowedBlocks:B().arrayOf(B().string).isRequired,template:B().array,className:B().string,currentItemIndex:B().number,renderAppender:B().oneOfType([B().bool,B().element])};const I=P;var R=n(184),O=n.n(R);function N({totalPages:t,currentPage:n,setCurrentPage:o,prevEnabled:r,nextEnabled:l,addSlide:a=(()=>{}),addSlideEnabled:c=!1}){return(0,e.createElement)("div",{className:"inner-block-slider__navigation"},(0,e.createElement)(i.IconButton,{disabled:!r,icon:"arrow-left-alt2",isSecondary:!0,isSmall:!0,onClick:()=>{r&&o(n-1)}}),[...Array(t).keys()].map((t=>(0,e.createElement)(i.Button,{key:t+1,"aria-label":`Slide ${t+1}`,className:O()("components-button","is-not-small",{"is-primary":n===t+1,"is-secondary":n!==t+1}),type:"button",onClick:()=>{o(t+1)}},t+1))),(0,e.createElement)(i.IconButton,{disabled:!l,icon:"arrow-right-alt2",isSecondary:!0,isSmall:!0,onClick:()=>{l&&o(n+1)}}),(0,e.createElement)(i.IconButton,{disabled:!c,icon:"plus-alt2",isSecondary:!0,isSmall:!0,onClick:()=>a()}))}N.propTypes={totalPages:B().number.isRequired,currentPage:B().number.isRequired,setCurrentPage:B().func.isRequired,prevEnabled:B().bool.isRequired,nextEnabled:B().bool.isRequired,addSlide:B().func,addSlideEnabled:B().bool};const M=N,F=({parentBlockId:n,allowedBlock:o,template:r,slideLimit:l})=>{const a=r||[[o]],i=(0,c.useSelect)((e=>e("core/block-editor").getBlock(n).innerBlocks)),[s,u]=(0,t.useState)(0),d=(0,t.useRef)(i.length),{insertBlock:m}=(0,c.useDispatch)("core/block-editor");return(0,t.useEffect)((()=>{(i.length>d.current||i.lengthi.length)&&u(i.length-1),d.current=i.length}),[i.length,s,d]),(0,e.createElement)("div",{className:"inner-block-slider"},(0,e.createElement)(I,{allowedBlocks:[o],className:"slides",currentItemIndex:s,parentBlockId:n,template:a}),(0,e.createElement)(M,{addSlide:()=>{const e=(0,x.createBlock)(o);m(e,void 0,n)},addSlideEnabled:i.length1,setCurrentPage:e=>u(e-1),totalPages:i.length}))};F.defaultProps={slideLimit:10,template:null},F.propTypes={parentBlockId:B().string.isRequired,allowedBlock:B().string.isRequired,template:B().array};const A=F;function L(n){const{onChange:o,opensInNewTab:r,url:l}=n,[a,c]=(0,t.useState)(!1),u=(0,t.useMemo)((()=>[{icon:"admin-links",title:(0,s.__)("Link","block-editor-components"),isActive:l?.length>0,onClick:()=>c(!a)}]),[c,a,l]),d=(0,t.useMemo)((()=>({url:l,opensInNewTab:r})),[r,l]);return(0,e.createElement)(e.Fragment,null,(0,e.createElement)(i.ToolbarGroup,{controls:u}),a&&(0,e.createElement)(i.Popover,null,(0,e.createElement)(b.__experimentalLinkControl,{forceIsEditingLink:a,opensInNewTab:r,value:d,onChange:o})))}function j(n){const{className:o,limit:r=0,onChange:l,...a}=n,[i,c]=(0,t.useState)(r&&n.value?.length>r);return(0,e.createElement)(b.PlainText,{className:`${o} limit-text ${i?"invalid":""}`.trim(),onChange:e=>{r&&e.length>r?i||c(!0):(i&&c(!1),l(e))},...a})}const q=/[\r\n]+/g;function D(n){const{editPost:o}=(0,c.useDispatch)("core/editor"),r=(0,c.useSelect)((e=>e("core/editor").getEditedPostAttribute("title")),[]),l=(0,t.useCallback)((e=>o({title:e.replace(q," ")})),[o]);return(0,e.createElement)(b.RichText,{...n,allowedFormats:[],value:r,onChange:l})}function $(e){var t;const{postType:n}=e;return(0,c.useSelect)((e=>e("core/editor").getCurrentPostType()),[])===n?e.children:null!==(t=e.fallback)&&void 0!==t?t:null}const W=window.wp.dom,U=e=>{const t=document.createRange();t.selectNodeContents(e),t.collapse(!1);const n=window.getSelection();n.removeAllRanges(),n.addRange(t)};function z(n){const{className:o,limit:r=0,onChange:l,...a}=n,i=(0,t.useRef)(),[c,s]=(0,t.useState)(r&&n.value?.length>r),[u,d]=(0,t.useState)(!1);return(0,e.createElement)(b.RichText,{ref:i,className:`${o} limit-text ${c?"invalid":""}`.trim(),onChange:e=>{if(r&&(0,W.__unstableStripHTML)(e).length>r)return d(!1),i.current.innerHTML=n.value,U(i.current),void(c||s(!0));u&&c&&s(!1),d(!0),l(e)},...a})}const H=function(t){const{taxonomy:n,value:o=[],onChange:r}=t,l=(0,c.useSelect)((e=>e("core").getTaxonomy(n)),[n]),{taxonomyTermsById:a,taxonomyTermsByTitle:u}=(0,c.useSelect)((e=>{var t;const o=null!==(t=e("core").getEntityRecords("taxonomy",n,{per_page:100}))&&void 0!==t?t:[],r=function(e){return e?e.reduce(((e,t)=>(e[t.id]=t.name,e)),{}):[]}(o),l=function(e){return e?e.reduce(((e,t)=>(e[t.name]=t.id,e)),{}):[]}(o);return{taxonomyTermsById:r,taxonomyTermsByTitle:l}}),[n]),d=o.map((e=>a[e])).filter(Boolean);return(0,e.createElement)(i.FormTokenField,{label:(0,s.sprintf)((0,s.__)("Filter by %s","block-editor-components"),l?l.labels.singular_name:""),suggestions:Object.values(a),value:d,onChange:e=>{r(e.map((e=>u[e])))}})};function V(t){const{postType:n,queryArgs:o,onChange:r,values:l=[],isSortable:a=!1}=t,u=(0,c.useSelect)((e=>{var t;return null!==(t=e("core").getEntityRecords("postType",n,o))&&void 0!==t?t:[]}),[n,o]),d=(0,c.useSelect)((e=>e("core/data").isResolving("core","getEntityRecords",["postType",n,o])));return(0,e.createElement)("div",{style:{marginTop:-24,paddingTop:24,paddingLeft:4,marginLeft:-4}},d&&(0,e.createElement)(i.Spinner,null)||u.length<1&&(0,e.createElement)(i.Notice,{isDismissible:!1},(0,s.__)("No results found","block-editor-components"))||u.map((t=>(0,e.createElement)("div",{style:{display:"grid",gridTemplateColumns:"1fr auto",marginRight:-2,paddingRight:2}},(0,e.createElement)(i.CheckboxControl,{key:t.id,checked:l.includes(t.id),label:t.title?.rendered||(0,s.__)("(No title)","block-editor-components"),onChange:e=>{r(e?[...l,t.id]:l.filter((e=>e!==t.id)))}}),a&&(0,e.createElement)(i.ButtonGroup,null,(0,e.createElement)(i.Button,{icon:"arrow-up-alt2",iconSize:12,isSmall:!0,label:(0,s.__)("Move up","block-editor-components"),variant:"secondary",onClick:()=>(e=>{const t=l.indexOf(e);-1!==t&&0!==t&&r([...l.slice(0,t-1),l[t],l[t-1],...l.slice(t+1)])})(t.id)}),(0,e.createElement)(i.Button,{icon:"arrow-down-alt2",iconSize:12,isSmall:!0,label:(0,s.__)("Move down","block-editor-components"),variant:"secondary",onClick:()=>(e=>{const t=l.indexOf(e);-1!==t&&t!==l.length-1&&r([...l.slice(0,t),l[t+1],l[t],...l.slice(t+2)])})(t.id)}))))))}function G(n){const{postType:o,onChange:r,values:l,taxonomies:a}=n,[u,d]=(0,e.useState)(""),m=(0,c.useSelect)((e=>a.map((t=>e("core").getTaxonomy(t)))),[a]),[p,b]=(0,e.useState)([]),f=(0,t.useCallback)(((e,t)=>{const n=m.find((t=>t&&t.slug===e));n&&b({...p,[`${n.rest_base}`]:t})}),[p,m]);(0,t.useEffect)((()=>{m.forEach((e=>{e&&!p[e.rest_base]&&f(e.rest_base,[])}))}),[m,f,p]);const g={search:u||void 0,per_page:30,...p};return(0,e.createElement)(i.Flex,{align:"flex-start",style:{gap:24}},(0,e.createElement)(i.FlexItem,{style:{width:"35%"}},(0,e.createElement)(i.SearchControl,{label:(0,s.__)("Search Posts","block-editor-components"),style:{marginBottom:24},value:u,onChange:e=>d(e)}),a.map((t=>{const n=m.find((e=>e&&e.slug===t));return n?(0,e.createElement)(H,{taxonomy:t,value:p[n.rest_base],onChange:e=>f(t,e)}):null}))),(0,e.createElement)(i.FlexItem,{style:{width:"65%"}},(0,e.createElement)(V,{postType:o,queryArgs:g,values:l,onChange:r})))}function Q(t){const{title:n,postType:o="post",taxonomies:r=[],values:l=[],onChange:a,setModalOpen:c}=t;return(0,e.createElement)(i.Modal,{style:{width:"800px",maxWidth:"100%"},title:n,onRequestClose:()=>c(!1)},(0,e.createElement)("div",{style:{marginTop:-16}},(0,e.createElement)(i.TabPanel,{tabs:[{name:"browse",title:(0,s.__)("Browse Posts","block-editor-components"),content:()=>(0,e.createElement)(e.Fragment,null,"Foo")},{name:"selection",title:(0,s.__)("Current Selection","block-editor-components")}]},(t=>(0,e.createElement)("div",{style:{marginTop:"calc( var(--wp-admin-border-width-focus) * -1 )",borderStyle:"none",borderTop:"var( --wp-admin-border-width-focus ) solid #ddd",paddingTop:24}},"browse"===t.name&&(0,e.createElement)(G,{postType:o,taxonomies:r,values:l,onChange:a}),"selection"===t.name&&(0,e.createElement)(V,{isSortable:!0,postType:o,queryArgs:{include:l,orderby:"include",per_page:l.length},values:l,onChange:a}))))))}function Y(t){const{title:n=(0,s.__)("Select posts","block-editor-components"),icon:o="edit"}=t,[r,l]=(0,e.useState)(!1);return(0,e.createElement)(e.Fragment,null,(0,e.createElement)(i.ToolbarButton,{icon:o,label:n,onClick:()=>l(!0)},n),r&&(0,e.createElement)(Q,{...t,setModalOpen:l,title:n}))}function J(t){const{title:n=(0,s.__)("Select posts","block-editor-components")}=t,[o,r]=(0,e.useState)(!1);return(0,e.createElement)(e.Fragment,null,(0,e.createElement)(i.Button,{variant:"primary",onClick:()=>r(!0)},n),o&&(0,e.createElement)(Q,{...t,setModalOpen:r,title:n}))}const K=/^is-style-/;function X(e){const{blockName:n,className:o}=(0,c.useSelect)((t=>{var n,o;const r=t("core/block-editor").getBlock(e);return{blockName:null!==(n=r?.name)&&void 0!==n?n:"",className:null!==(o=r?.attributes?.className)&&void 0!==o?o:""}}),[e]),{blockStyles:r,defaultStyle:l}=Z(n),a=(0,t.useMemo)((()=>r.map((({name:e})=>e))),[r]),i=(0,t.useMemo)((()=>function(e=""){return e.trim().replace(/\s+/," ").split(" ").map((e=>K.test(e)?e.replace(K,""):"")).filter(Boolean)}(o)),[o]);return(0,t.useMemo)((()=>{var e;return null!==(e=i.find((e=>a.includes(e))))&&void 0!==e?e:l}),[a,i,l])}function Z(e){const n=(0,c.useSelect)((t=>t("core/blocks").getBlockStyles(e)),[e]);return(0,t.useMemo)((()=>{var e;return{blockStyles:n,defaultStyle:null!==(e=n.find((({isDefault:e})=>e))?.name)&&void 0!==e?e:""}}),[n])}function ee(e){return(0,t.useMemo)((()=>{const t=(0,x.getBlockTypes)();return t?.length?t.filter((({name:t,parent:n})=>!n&&!e.includes(t))).map((({name:e})=>e)):[]}),[e])}function te(e,n){var o;const{editPost:r}=(0,c.useDispatch)("core/editor"),l=(0,c.useSelect)((e=>e("core/editor").getEditedPostAttribute("meta"))),a=(0,t.useCallback)((t=>r({meta:{[e]:t}})),[r,e]);return[null!==(o=l?.[e])&&void 0!==o?o:n,a]}function ne(e,t,n){return(0,c.useSelect)((o=>{const{innerBlocks:r}=o("core/block-editor").getBlock(e);return r?.length{const n=document.getElementById(`block-${t}`);n&&(e(t),setTimeout((()=>n.scrollIntoView({behavior:"smooth"})),200))}),[e])}function re(e,n,o){return(0,t.useCallback)(((t=o)=>n({[e]:t})),[e,o,n])}function le(e){const{getBlocks:t}=(0,c.select)("core/block-editor");return t().find((({name:t})=>t===e))}function ae(e,t){return e.find((e=>!t(e)))}function ie(e,t){return e.filter((e=>!t(e)))}function ce(e,t){return e.find((e=>t(e)))}function se(e,t){return e.filter((e=>t(e)))}const ue=window.wp.htmlEntities;function de(e,t=""){const{id:n,title:o}=e;return{label:t+(0,ue.decodeEntities)(o.rendered||(0,s.sprintf)((0,s.__)("#%d (no title)","block-editor-components"),n)),value:n}}function me(e,t=""){const{id:n,name:o}=e;return{label:t+(0,ue.decodeEntities)(o||(0,s.sprintf)((0,s.__)("#%d (no name)","block-editor-components"),n)),value:n}}function pe(e){return e.map((e=>de(e)))}function be(e,t="\u2014 ",n=0){return e.map((({children:e=[],...o})=>[de(o,t.repeat(n)),...be(e,t,n+1)])).flat()}function fe(e){return e.map((e=>me(e)))}function ge(e,t="\u2014 ",n=0){return e.map((({children:e=[],...o})=>[me(o,t.repeat(n)),...ge(e,t,n+1)])).flat()}function ke(e,...t){if(e.variations?.length){const n=function(e){return(t,n)=>e.every((e=>t[e]===n[e]))}(t);e.variations=e.variations.map((e=>(e.isActive=n,e)))}return e}})(),o})())); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["@humanmade/block-editor-components"]=t():e["@humanmade/block-editor-components"]=t()}(self,(()=>(()=>{var e={184:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t{"use strict";var o=n(414);function r(){}function l(){}l.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,l,a){if(a!==o){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:l,resetWarningCache:r};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var l=t[o]={exports:{}};return e[o](l,l.exports,n),l.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{"use strict";n.r(o),n.d(o,{ConditionalComponent:()=>r,FetchAllTermSelectControl:()=>p,FileControls:()=>b,GenericServerSideEdit:()=>y,ImageControl:()=>T,InnerBlockSlider:()=>q,LinkToolbar:()=>j,PlainTextWithLimit:()=>D,PostPickerButton:()=>X,PostPickerModal:()=>J,PostPickerToolbarButton:()=>K,PostTitleControl:()=>W,PostTypeCheck:()=>U,RichTextWithLimit:()=>V,TermSelector:()=>G,createOptionFromPost:()=>pe,createOptionFromTerm:()=>fe,createOptionsFromPosts:()=>be,createOptionsFromPostsWithHierarchy:()=>ge,createOptionsFromTerms:()=>ke,createOptionsFromTermsWithHierarchy:()=>ye,findBlockByName:()=>ie,findInvalidBlock:()=>ce,findInvalidBlocks:()=>se,findValidBlock:()=>ue,findValidBlocks:()=>de,getImageDataForSize:()=>h,useActiveBlockStyle:()=>ee,useBlockStyles:()=>te,useDisallowedBlocks:()=>ne,useMeta:()=>oe,useRenderAppenderWithBlockLimit:()=>re,useSelectBlock:()=>le,useSetAttribute:()=>ae,withActiveVariation:()=>he});const e=window.wp.element,t=window.React;function r(t){const{children:n=null,ComponentFalse:o=(()=>null),ComponentTrue:r=(()=>n),predicate:l,...a}=t,i=l(a)?r:o;return(0,e.createElement)(i,{...a})}const l=window.wp.apiFetch;var a=n.n(l);const i=window.wp.components,c=window.wp.data,s=window.wp.i18n,u=window.wp.url,d={label:"",value:""},m={disabled:!0,label:(0,s.__)("No items found!","block-editor-components"),value:""};const p=function(n){const{defaultOption:o=d,fallbackOption:r=m,taxonomy:l,...p}=n,[f,b]=(0,t.useState)(),[g,k]=(0,t.useState)(),y=(0,c.useSelect)((e=>e("core").getTaxonomy(l)?.rest_base),[l]);return(0,t.useEffect)((()=>{y&&(async()=>{try{const e=await a()({path:(0,u.addQueryArgs)(`/wp/v2/${y}`,{_fields:"id,name",context:"view",per_page:-1})});if(!e?.length)return void k(r?[r]:[]);k([...o?[o]:[],...ke(e)])}catch(t){var e;b(null!==(e=t.message)&&void 0!==e?e:(0,s.__)("Unknown error.","block-editor-components"))}})()}),[y,o,r]),f?(0,e.createElement)(i.Notice,{isDismissible:!1,status:"error"},(0,e.createElement)("p",null,f)):g?(0,e.createElement)(i.SelectControl,{...p,options:g}):(0,e.createElement)(i.Spinner,null)},f=window.wp.blockEditor;function b(t){const{value:n,onChange:o,...r}=t;return(0,e.createElement)(f.MediaUploadCheck,null,(0,e.createElement)(f.MediaUpload,{title:(0,s.__)("Select or Upload File","block-editor-components"),...r,multiple:!1,render:({open:t})=>(0,e.createElement)(i.ToolbarGroup,null,(0,e.createElement)(i.ToolbarButton,{icon:"admin-links",label:n?(0,s.__)("Edit file","block-editor-components"):(0,s.__)("Select file","block-editor-components"),onClick:t}),n&&(0,e.createElement)(i.ToolbarButton,{icon:"editor-unlink",label:(0,s.__)("Deselect file","block-editor-components"),onClick:()=>o(null)})),value:n,onSelect:o}))}const g=window.wp.serverSideRender;var k=n.n(g);const y=function({attributes:t,context:n,name:o}){return(0,e.createElement)("div",{...(0,f.useBlockProps)()},(0,e.createElement)(i.Disabled,null,(0,e.createElement)(k(),{attributes:t,block:o,EmptyResponsePlaceholder:()=>(0,e.createElement)("div",{className:`wp-block-${o.replace("/","-")}`},o," ",(0,s.__)("Block rendered as empty.")),urlQueryArgs:"object"==typeof n&&Object.hasOwn(n,"postId")?{post_id:n.postId}:{}})))};function h(e,t){var n;const o=null!==(n=e?.sizes)&&void 0!==n?n:e?.media_details?.sizes,r=o?.[t];return r?{src:r.url||r.source_url,width:r.width,height:r.height}:null}const v=["image"],E=(0,s.__)("Select Image","block-editor-components"),S=(0,s.__)("Select Image","block-editor-components"),_=(0,s.__)("Remove image","block-editor-components"),w=(0,s.__)("Replace Image","block-editor-components");function T(t){const{buttonText:n=E,className:o,help:r,id:l,label:a,modalTitle:s=S,removeButtonText:u=_,replaceButtonText:d=w,size:m,value:p,onChange:b}=t,g=(0,c.useSelect)((e=>{const t=e("core").getMedia(p,{context:"view"});return t?t.alt_text:""}),[p]),k=(0,c.useSelect)((e=>{const t=e("core").getMedia(p,{context:"view"});if(t){if(m){const e=h(t,m);if(e)return e.src}return t.source_url}}),[m,p]);return(0,e.createElement)(i.BaseControl,{className:o,help:r,id:l,label:a},(0,e.createElement)(f.MediaUploadCheck,null,(0,e.createElement)(f.MediaUpload,{allowedTypes:v,render:({open:t})=>(0,e.createElement)("div",null,p?k?(0,e.createElement)(i.Button,{isLink:!0,onClick:t},(0,e.createElement)("img",{alt:g,src:k})):(0,e.createElement)(i.Spinner,null):null,(0,e.createElement)(i.Button,{isSecondary:!0,onClick:t},p?d:n)),title:s,onSelect:b})),(0,e.createElement)("br",null),p?(0,e.createElement)(i.Button,{isDestructive:!0,isLink:!0,onClick:()=>b(null)},u):null)}var C=n(697),x=n.n(C);const B=window.wp.blocks;function I({className:n,allowedBlocks:o,template:r,currentItemIndex:l,parentBlockId:a,renderAppender:i,captureToolbars:c}){const s=(0,t.useRef)(),u=(0,f.useInnerBlocksProps)({id:`inner-block-display-single-${a}`,className:n},{__experimentalCaptureToolbars:c,allowedBlocks:o,orientation:"horizontal",renderAppender:i,template:r,templateLock:!1});return(0,t.useEffect)((()=>{s.current&&(s.current.innerHTML=`#inner-block-display-single-${a} > *:not(:nth-child(${l+1}) ) { display: none; }`)}),[l,s,a]),(0,e.createElement)(e.Fragment,null,(0,e.createElement)("style",{ref:s}),(0,e.createElement)("div",{...u}))}I.defaultProps={currentItemIndex:0,renderAppender:!1,captureToolbars:!0},I.propTypes={parentBlockId:x().string.isRequired,allowedBlocks:x().arrayOf(x().string).isRequired,template:x().array,className:x().string,currentItemIndex:x().number,renderAppender:x().oneOfType([x().bool,x().element])};const P=I;var R=n(184),O=n.n(R);function N({totalPages:t,currentPage:n,setCurrentPage:o,prevEnabled:r,nextEnabled:l,addSlide:a=(()=>{}),addSlideEnabled:c=!1}){return(0,e.createElement)("div",{className:"inner-block-slider__navigation"},(0,e.createElement)(i.IconButton,{disabled:!r,icon:"arrow-left-alt2",isSecondary:!0,isSmall:!0,onClick:()=>{r&&o(n-1)}}),[...Array(t).keys()].map((t=>(0,e.createElement)(i.Button,{key:t+1,"aria-label":`Slide ${t+1}`,className:O()("components-button","is-not-small",{"is-primary":n===t+1,"is-secondary":n!==t+1}),type:"button",onClick:()=>{o(t+1)}},t+1))),(0,e.createElement)(i.IconButton,{disabled:!l,icon:"arrow-right-alt2",isSecondary:!0,isSmall:!0,onClick:()=>{l&&o(n+1)}}),(0,e.createElement)(i.IconButton,{disabled:!c,icon:"plus-alt2",isSecondary:!0,isSmall:!0,onClick:()=>a()}))}N.propTypes={totalPages:x().number.isRequired,currentPage:x().number.isRequired,setCurrentPage:x().func.isRequired,prevEnabled:x().bool.isRequired,nextEnabled:x().bool.isRequired,addSlide:x().func,addSlideEnabled:x().bool};const M=N,F=({parentBlockId:n,allowedBlock:o,template:r,slideLimit:l,currentItemIndex:a,setCurrentItemIndex:i,showNavigation:s})=>{const u=r||[[o]],d=(0,c.useSelect)((e=>e("core/block-editor").getBlock(n).innerBlocks)),m=(0,t.useRef)(d.length),{insertBlock:p}=(0,c.useDispatch)("core/block-editor");return(0,t.useEffect)((()=>{if(d.length>m.current){const e=d.length-1;i(e)}else if(d.lengthd.length){const e=d.length-1;i(e)}m.current=d.length}),[d.length,a,m,i]),(0,e.createElement)("div",{className:"inner-block-slider"},(0,e.createElement)(P,{allowedBlocks:[o],className:"slides",currentItemIndex:a,parentBlockId:n,template:u}),s&&(0,e.createElement)(M,{addSlide:()=>{const e=(0,B.createBlock)(o);p(e,void 0,n)},addSlideEnabled:d.length1,setCurrentPage:e=>i(e-1),totalPages:d.length}))};F.defaultProps={slideLimit:10,template:null,showNavigation:!0},F.propTypes={parentBlockId:x().string.isRequired,allowedBlock:x().string.isRequired,template:x().array,showNavigation:x().bool,currentItemIndex:x().number.isRequired,setCurrentItemIndex:x().func.isRequired};const A=F,L=n=>{const[o,r]=(0,t.useState)(0);return(0,e.createElement)(A,{...n,currentItemIndex:o,setCurrentItemIndex:r})};L.Controlled=A;const q=L;function j(n){const{onChange:o,opensInNewTab:r,url:l}=n,[a,c]=(0,t.useState)(!1),u=(0,t.useMemo)((()=>[{icon:"admin-links",title:(0,s.__)("Link","block-editor-components"),isActive:l?.length>0,onClick:()=>c(!a)}]),[c,a,l]),d=(0,t.useMemo)((()=>({url:l,opensInNewTab:r})),[r,l]);return(0,e.createElement)(e.Fragment,null,(0,e.createElement)(i.ToolbarGroup,{controls:u}),a&&(0,e.createElement)(i.Popover,null,(0,e.createElement)(f.__experimentalLinkControl,{forceIsEditingLink:a,opensInNewTab:r,value:d,onChange:o})))}function D(n){const{className:o,limit:r=0,onChange:l,...a}=n,[i,c]=(0,t.useState)(r&&n.value?.length>r);return(0,e.createElement)(f.PlainText,{className:`${o} limit-text ${i?"invalid":""}`.trim(),onChange:e=>{r&&e.length>r?i||c(!0):(i&&c(!1),l(e))},...a})}const $=/[\r\n]+/g;function W(n){const{editPost:o}=(0,c.useDispatch)("core/editor"),r=(0,c.useSelect)((e=>e("core/editor").getEditedPostAttribute("title")),[]),l=(0,t.useCallback)((e=>o({title:e.replace($," ")})),[o]);return(0,e.createElement)(f.RichText,{...n,allowedFormats:[],value:r,onChange:l})}function U(e){var t;const{postType:n}=e;return(0,c.useSelect)((e=>e("core/editor").getCurrentPostType()),[])===n?e.children:null!==(t=e.fallback)&&void 0!==t?t:null}const z=window.wp.dom,H=e=>{const t=document.createRange();t.selectNodeContents(e),t.collapse(!1);const n=window.getSelection();n.removeAllRanges(),n.addRange(t)};function V(n){const{className:o,limit:r=0,onChange:l,...a}=n,i=(0,t.useRef)(),[c,s]=(0,t.useState)(r&&n.value?.length>r),[u,d]=(0,t.useState)(!1);return(0,e.createElement)(f.RichText,{ref:i,className:`${o} limit-text ${c?"invalid":""}`.trim(),onChange:e=>{if(r&&(0,z.__unstableStripHTML)(e).length>r)return d(!1),i.current.innerHTML=n.value,H(i.current),void(c||s(!0));u&&c&&s(!1),d(!0),l(e)},...a})}const G=function(t){const{taxonomy:n,value:o=[],onChange:r}=t,l=(0,c.useSelect)((e=>e("core").getTaxonomy(n)),[n]),{taxonomyTermsById:a,taxonomyTermsByTitle:u}=(0,c.useSelect)((e=>{var t;const o=null!==(t=e("core").getEntityRecords("taxonomy",n,{per_page:100}))&&void 0!==t?t:[],r=function(e){return e?e.reduce(((e,t)=>(e[t.id]=t.name,e)),{}):[]}(o),l=function(e){return e?e.reduce(((e,t)=>(e[t.name]=t.id,e)),{}):[]}(o);return{taxonomyTermsById:r,taxonomyTermsByTitle:l}}),[n]),d=o.map((e=>a[e])).filter(Boolean);return(0,e.createElement)(i.FormTokenField,{label:(0,s.sprintf)((0,s.__)("Filter by %s","block-editor-components"),l?l.labels.singular_name:""),suggestions:Object.values(a),value:d,onChange:e=>{r(e.map((e=>u[e])))}})};function Q(t){const{postType:n,queryArgs:o,onChange:r,values:l=[],isSortable:a=!1}=t,u=(0,c.useSelect)((e=>{var t;return null!==(t=e("core").getEntityRecords("postType",n,o))&&void 0!==t?t:[]}),[n,o]),d=(0,c.useSelect)((e=>e("core/data").isResolving("core","getEntityRecords",["postType",n,o])));return(0,e.createElement)("div",{style:{marginTop:-24,paddingTop:24,paddingLeft:4,marginLeft:-4}},d&&(0,e.createElement)(i.Spinner,null)||u.length<1&&(0,e.createElement)(i.Notice,{isDismissible:!1},(0,s.__)("No results found","block-editor-components"))||u.map((t=>(0,e.createElement)("div",{style:{display:"grid",gridTemplateColumns:"1fr auto",marginRight:-2,paddingRight:2}},(0,e.createElement)(i.CheckboxControl,{key:t.id,checked:l.includes(t.id),label:t.title?.rendered||(0,s.__)("(No title)","block-editor-components"),onChange:e=>{r(e?[...l,t.id]:l.filter((e=>e!==t.id)))}}),a&&(0,e.createElement)(i.ButtonGroup,null,(0,e.createElement)(i.Button,{icon:"arrow-up-alt2",iconSize:12,isSmall:!0,label:(0,s.__)("Move up","block-editor-components"),variant:"secondary",onClick:()=>(e=>{const t=l.indexOf(e);-1!==t&&0!==t&&r([...l.slice(0,t-1),l[t],l[t-1],...l.slice(t+1)])})(t.id)}),(0,e.createElement)(i.Button,{icon:"arrow-down-alt2",iconSize:12,isSmall:!0,label:(0,s.__)("Move down","block-editor-components"),variant:"secondary",onClick:()=>(e=>{const t=l.indexOf(e);-1!==t&&t!==l.length-1&&r([...l.slice(0,t),l[t+1],l[t],...l.slice(t+2)])})(t.id)}))))))}function Y(n){const{postType:o,onChange:r,values:l,taxonomies:a}=n,[u,d]=(0,e.useState)(""),m=(0,c.useSelect)((e=>a.map((t=>e("core").getTaxonomy(t)))),[a]),[p,f]=(0,e.useState)([]),b=(0,t.useCallback)(((e,t)=>{const n=m.find((t=>t&&t.slug===e));n&&f({...p,[`${n.rest_base}`]:t})}),[p,m]);(0,t.useEffect)((()=>{m.forEach((e=>{e&&!p[e.rest_base]&&b(e.rest_base,[])}))}),[m,b,p]);const g={search:u||void 0,per_page:30,...p};return(0,e.createElement)(i.Flex,{align:"flex-start",style:{gap:24}},(0,e.createElement)(i.FlexItem,{style:{width:"35%"}},(0,e.createElement)(i.SearchControl,{label:(0,s.__)("Search Posts","block-editor-components"),style:{marginBottom:24},value:u,onChange:e=>d(e)}),a.map((t=>{const n=m.find((e=>e&&e.slug===t));return n?(0,e.createElement)(G,{taxonomy:t,value:p[n.rest_base],onChange:e=>b(t,e)}):null}))),(0,e.createElement)(i.FlexItem,{style:{width:"65%"}},(0,e.createElement)(Q,{postType:o,queryArgs:g,values:l,onChange:r})))}function J(t){const{title:n,postType:o="post",taxonomies:r=[],values:l=[],onChange:a,setModalOpen:c}=t;return(0,e.createElement)(i.Modal,{style:{width:"800px",maxWidth:"100%"},title:n,onRequestClose:()=>c(!1)},(0,e.createElement)("div",{style:{marginTop:-16}},(0,e.createElement)(i.TabPanel,{tabs:[{name:"browse",title:(0,s.__)("Browse Posts","block-editor-components"),content:()=>(0,e.createElement)(e.Fragment,null,"Foo")},{name:"selection",title:(0,s.__)("Current Selection","block-editor-components")}]},(t=>(0,e.createElement)("div",{style:{marginTop:"calc( var(--wp-admin-border-width-focus) * -1 )",borderStyle:"none",borderTop:"var( --wp-admin-border-width-focus ) solid #ddd",paddingTop:24}},"browse"===t.name&&(0,e.createElement)(Y,{postType:o,taxonomies:r,values:l,onChange:a}),"selection"===t.name&&(0,e.createElement)(Q,{isSortable:!0,postType:o,queryArgs:{include:l,orderby:"include",per_page:l.length},values:l,onChange:a}))))))}function K(t){const{title:n=(0,s.__)("Select posts","block-editor-components"),icon:o="edit"}=t,[r,l]=(0,e.useState)(!1);return(0,e.createElement)(e.Fragment,null,(0,e.createElement)(i.ToolbarButton,{icon:o,label:n,onClick:()=>l(!0)},n),r&&(0,e.createElement)(J,{...t,setModalOpen:l,title:n}))}function X(t){const{title:n=(0,s.__)("Select posts","block-editor-components")}=t,[o,r]=(0,e.useState)(!1);return(0,e.createElement)(e.Fragment,null,(0,e.createElement)(i.Button,{variant:"primary",onClick:()=>r(!0)},n),o&&(0,e.createElement)(J,{...t,setModalOpen:r,title:n}))}const Z=/^is-style-/;function ee(e){const{blockName:n,className:o}=(0,c.useSelect)((t=>{var n,o;const r=t("core/block-editor").getBlock(e);return{blockName:null!==(n=r?.name)&&void 0!==n?n:"",className:null!==(o=r?.attributes?.className)&&void 0!==o?o:""}}),[e]),{blockStyles:r,defaultStyle:l}=te(n),a=(0,t.useMemo)((()=>r.map((({name:e})=>e))),[r]),i=(0,t.useMemo)((()=>function(e=""){return e.trim().replace(/\s+/," ").split(" ").map((e=>Z.test(e)?e.replace(Z,""):"")).filter(Boolean)}(o)),[o]);return(0,t.useMemo)((()=>{var e;return null!==(e=i.find((e=>a.includes(e))))&&void 0!==e?e:l}),[a,i,l])}function te(e){const n=(0,c.useSelect)((t=>t("core/blocks").getBlockStyles(e)),[e]);return(0,t.useMemo)((()=>{var e;return{blockStyles:n,defaultStyle:null!==(e=n.find((({isDefault:e})=>e))?.name)&&void 0!==e?e:""}}),[n])}function ne(e){return(0,t.useMemo)((()=>{const t=(0,B.getBlockTypes)();return t?.length?t.filter((({name:t,parent:n})=>!n&&!e.includes(t))).map((({name:e})=>e)):[]}),[e])}function oe(e,n){var o;const{editPost:r}=(0,c.useDispatch)("core/editor"),l=(0,c.useSelect)((e=>e("core/editor").getEditedPostAttribute("meta"))),a=(0,t.useCallback)((t=>r({meta:{[e]:t}})),[r,e]);return[null!==(o=l?.[e])&&void 0!==o?o:n,a]}function re(e,t,n){return(0,c.useSelect)((o=>{const{innerBlocks:r}=o("core/block-editor").getBlock(e);return r?.length{const n=document.getElementById(`block-${t}`);n&&(e(t),setTimeout((()=>n.scrollIntoView({behavior:"smooth"})),200))}),[e])}function ae(e,n,o){return(0,t.useCallback)(((t=o)=>n({[e]:t})),[e,o,n])}function ie(e){const{getBlocks:t}=(0,c.select)("core/block-editor");return t().find((({name:t})=>t===e))}function ce(e,t){return e.find((e=>!t(e)))}function se(e,t){return e.filter((e=>!t(e)))}function ue(e,t){return e.find((e=>t(e)))}function de(e,t){return e.filter((e=>t(e)))}const me=window.wp.htmlEntities;function pe(e,t=""){const{id:n,title:o}=e;return{label:t+(0,me.decodeEntities)(o.rendered||(0,s.sprintf)((0,s.__)("#%d (no title)","block-editor-components"),n)),value:n}}function fe(e,t=""){const{id:n,name:o}=e;return{label:t+(0,me.decodeEntities)(o||(0,s.sprintf)((0,s.__)("#%d (no name)","block-editor-components"),n)),value:n}}function be(e){return e.map((e=>pe(e)))}function ge(e,t="\u2014 ",n=0){return e.map((({children:e=[],...o})=>[pe(o,t.repeat(n)),...ge(e,t,n+1)])).flat()}function ke(e){return e.map((e=>fe(e)))}function ye(e,t="\u2014 ",n=0){return e.map((({children:e=[],...o})=>[fe(o,t.repeat(n)),...ye(e,t,n+1)])).flat()}function he(e,...t){if(e.variations?.length){const n=function(e){return(t,n)=>e.every((e=>t[e]===n[e]))}(t);e.variations=e.variations.map((e=>(e.isActive=n,e)))}return e}})(),o})())); \ No newline at end of file diff --git a/src/components/InnerBlockSlider/README.md b/src/components/InnerBlockSlider/README.md index fdf63bb..623f1fc 100644 --- a/src/components/InnerBlockSlider/README.md +++ b/src/components/InnerBlockSlider/README.md @@ -98,12 +98,31 @@ The above example code creates a slider using the core image block as each slide ## Props -| Name | Type | Default | Description | -| --------------- | -------------- | ------- | --------------------------------------------- | -| `allowedBlock` | `string` | `''` | Block types to be allowed inside the slider | -| `slideLimit` | `integer` | `10` | Maximum number of slides. | -| `parentBlockId` | `string` | `''` | Client ID of parent block. This is required. | +| Name | Type | Default | Description | +| ---------------- | -------------- | ------- | --------------------------------------------- | +| `allowedBlock` | `string` | `''` | Block types to be allowed inside the slider | +| `slideLimit` | `integer` | `10` | Maximum number of slides. | +| `parentBlockId` | `string` | `''` | Client ID of parent block. This is required. | +| `showNavigation` | `bool` | `true` | Whether to show slide navigation/pagination. | +## Examples + +### Managing the state externally. + +If you need to sync the slider component state it with some other external functionality, you may need to manage state in your code. In order to to this, you need to import the InnerBlockSliderStateless rather than the standard container component exposed by the library. + +```js +import InnerBlockSliderStateless from '@humanmade/block-editor-components'; + +const [ currentItemIndex, setCurrentItemIndex ] = useState( 0 ); + + +``` ## Credit diff --git a/src/components/InnerBlockSlider/index.js b/src/components/InnerBlockSlider/index.js index 2e4f9e0..e14af45 100644 --- a/src/components/InnerBlockSlider/index.js +++ b/src/components/InnerBlockSlider/index.js @@ -1,101 +1,29 @@ -import PropTypes from 'prop-types'; -import { useState, useRef, useEffect } from 'react'; +import { useState } from 'react'; -import { createBlock } from '@wordpress/blocks'; -import { useSelect, useDispatch } from '@wordpress/data'; - -import InnerBlocksDisplaySingle from './inner-block-single-display'; -import Navigation from './navigation'; +import InnerBlockSliderControlled from './inner-block-slider-controlled.js'; /** - * InnerBlockSlider component. + * InnerBlockSlider container component. + * + * This container component is recommended for typical usage, as it handles state management. + * However for further info on supported props, refer to the InnerBlockSlider component, as all props are passed through. * - * @param {object} props Component props. - * @param {string} props.parentBlockId Parent block clientId. - * @param {string} props.allowedBlock Allowed block type. - * @param {Array} props.template Initial block template. - * @param {number} props.slideLimit Maximum allowed slides. + * @param {object} props Component props. * @returns {React.ReactNode} Component. */ -const InnerBlockSlider = ( { - parentBlockId, - allowedBlock, - template, - slideLimit, -} ) => { - const innerBlockTemplate = template || [ [ allowedBlock ] ]; - - const slideBlocks = useSelect( - ( select ) => - select( 'core/block-editor' ).getBlock( parentBlockId ).innerBlocks - ); - +const InnerBlockSlider = ( props ) => { const [ currentItemIndex, setCurrentItemIndex ] = useState( 0 ); - // Track state in a ref, to allow us to determine if slides are added or removed. - const slideCount = useRef( slideBlocks.length ); - - const { insertBlock } = useDispatch( 'core/block-editor' ); - - /** - * Function to add a new slide to the group of slides. - */ - const addSlide = () => { - const created = createBlock( allowedBlock ); - insertBlock( created, undefined, parentBlockId ); - }; - - /** - * If a slide is added, switch to the new slide. If one is deleted, make sure we don't - * show a non-existent slide. - */ - useEffect( () => { - if ( slideBlocks.length > slideCount.current ) { - // Slide added - setCurrentItemIndex( slideBlocks.length - 1 ); - } else if ( slideBlocks.length < slideCount.current ) { - // Slide deleted - if ( currentItemIndex + 1 > slideBlocks.length ) { - setCurrentItemIndex( slideBlocks.length - 1 ); - } - } - - // Update ref with new value.. - slideCount.current = slideBlocks.length; - }, [ slideBlocks.length, currentItemIndex, slideCount ] ); - return ( -
- - - 1 } - setCurrentPage={ ( page ) => setCurrentItemIndex( page - 1 ) } - totalPages={ slideBlocks.length } - /> -
+ ); }; -InnerBlockSlider.defaultProps = { - slideLimit: 10, - template: null, -}; - -InnerBlockSlider.propTypes = { - parentBlockId: PropTypes.string.isRequired, - allowedBlock: PropTypes.string.isRequired, - template: PropTypes.array, -}; +// Make controlled component available for use. +InnerBlockSlider.Controlled = InnerBlockSliderControlled; export default InnerBlockSlider; diff --git a/src/components/InnerBlockSlider/inner-block-slider-controlled.js b/src/components/InnerBlockSlider/inner-block-slider-controlled.js new file mode 100644 index 0000000..8b64935 --- /dev/null +++ b/src/components/InnerBlockSlider/inner-block-slider-controlled.js @@ -0,0 +1,109 @@ +import PropTypes from 'prop-types'; +import { useRef, useEffect } from 'react'; + +import { createBlock } from '@wordpress/blocks'; +import { useSelect, useDispatch } from '@wordpress/data'; + +import InnerBlocksDisplaySingle from './inner-block-single-display'; +import Navigation from './navigation'; + +/** + * InnerBlockSlider component. + * + * @param {object} props Component props. + * @param {string} props.parentBlockId Parent block clientId. + * @param {string} props.allowedBlock Allowed block type. + * @param {Array} props.template Initial block template. + * @param {number} props.slideLimit Maximum allowed slides. + * @param {number} props.currentItemIndex Override current index, if managing this externally. + * @param {Function} props.setCurrentItemIndex Override set item Index + * @param {Function} props.showNavigation Override display nav + * @returns {React.ReactNode} Component. + */ +const InnerBlockSliderControlled = ( { + parentBlockId, + allowedBlock, + template, + slideLimit, + currentItemIndex, + setCurrentItemIndex, + showNavigation, +} ) => { + const innerBlockTemplate = template || [ [ allowedBlock ] ]; + + const slideBlocks = useSelect( ( select ) => select( 'core/block-editor' ).getBlock( parentBlockId ).innerBlocks ); + + // Track state in a ref, to allow us to determine if slides are added or removed. + const slideCount = useRef( slideBlocks.length ); + + const { insertBlock } = useDispatch( 'core/block-editor' ); + + /** + * Function to add a new slide to the group of slides. + */ + const addSlide = () => { + const created = createBlock( allowedBlock ); + insertBlock( created, undefined, parentBlockId ); + }; + + /** + * If a slide is added, switch to the new slide. If one is deleted, make sure we don't + * show a non-existent slide. + */ + useEffect( () => { + if ( slideBlocks.length > slideCount.current ) { + // Slide added + const newIndex = slideBlocks.length - 1; + setCurrentItemIndex( newIndex ); + } else if ( slideBlocks.length < slideCount.current ) { + // Slide deleted + if ( currentItemIndex + 1 > slideBlocks.length ) { + const newIndex = slideBlocks.length - 1; + setCurrentItemIndex( newIndex ); + } + } + + // Update ref with new value.. + slideCount.current = slideBlocks.length; + }, [ slideBlocks.length, currentItemIndex, slideCount, setCurrentItemIndex ] ); + + return ( +
+ + + { showNavigation && ( + 1 } + setCurrentPage={ ( page ) => setCurrentItemIndex( page - 1 ) } + totalPages={ slideBlocks.length } + /> ) } +
+ ); +}; + +InnerBlockSliderControlled.defaultProps = { + slideLimit: 10, + template: null, + showNavigation: true, +}; + +InnerBlockSliderControlled.propTypes = { + parentBlockId: PropTypes.string.isRequired, + allowedBlock: PropTypes.string.isRequired, + template: PropTypes.array, + showNavigation: PropTypes.bool, + currentItemIndex: PropTypes.number.isRequired, + setCurrentItemIndex: PropTypes.func.isRequired, +}; + +export default InnerBlockSliderControlled;