diff --git a/.eslintrc.js b/.eslintrc.js index 706b7e9..d52869c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,6 +12,7 @@ module.exports = { Backbone: 'readonly', jQuery: 'readonly', wp: 'readonly', + React: true, }, rules: { 'arrow-parens': 'off', diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bb160aa..05c3967 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -52,3 +52,12 @@ To do this, run: ```shell npm run start ``` + +### Releasing a new version + +Note: You will need to have publishing access to the package on npmjs.com in order to release a new version.. + +* Check out main branch and ensure no local changes: `git checkout main && git reset origin/main --hard` +* Bump version: `npm version major|minor|patch`. This updates the version in the package.json, runs build script, commits changes and creates a tag from the commit. +* Push changes: `git push --follow-tags` +* Publish to NPM: `npm publish` diff --git a/dist/index.js b/dist/index.js index 432feb8..ac2b6d3 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 l(){for(var e=[],t=0;t{"use strict";var o=n(414);function l(){}function r(){}r.resetWarningCache=l,e.exports=function(){function e(e,t,n,l,r,i){if(i!==o){var a=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 a.name="Invariant Violation",a}}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:r,resetWarningCache:l};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 l=t[o];if(void 0!==l)return l.exports;var r=t[o]={exports:{}};return e[o](r,r.exports,n),r.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:()=>l,FetchAllTermSelectControl:()=>f,FileControls:()=>b,ImageControl:()=>E,InnerBlockSlider:()=>A,LinkToolbar:()=>M,PlainTextWithLimit:()=>L,PostTitleControl:()=>j,PostTypeCheck:()=>D,RichTextWithLimit:()=>$,createOptionFromPost:()=>ne,createOptionFromTerm:()=>oe,createOptionsFromPosts:()=>le,createOptionsFromPostsWithHierarchy:()=>re,createOptionsFromTerms:()=>ie,createOptionsFromTermsWithHierarchy:()=>ae,findBlockByName:()=>J,findInvalidBlock:()=>K,findInvalidBlocks:()=>X,findValidBlock:()=>Z,findValidBlocks:()=>ee,getImageDataForSize:()=>g,useActiveBlockStyle:()=>W,useBlockStyles:()=>H,useDisallowedBlocks:()=>z,useMeta:()=>V,useRenderAppenderWithBlockLimit:()=>G,useSelectBlock:()=>Q,useSetAttribute:()=>Y,withActiveVariation:()=>se});const e=window.wp.element,t=window.React;function l(t){const{children:n=null,ComponentFalse:o=(()=>null),ComponentTrue:l=(()=>n),predicate:r,...i}=t,a=r(i)?l:o;return(0,e.createElement)(a,i)}function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t{var t;return null===(t=e("core").getTaxonomy(i))||void 0===t?void 0:t.rest_base}),[i]);return(0,t.useEffect)((()=>{h&&(async()=>{try{const e=await a()({path:(0,d.addQueryArgs)(`/wp/v2/${h}`,{_fields:"id,name",context:"view",per_page:-1})});if(null==e||!e.length)return void k(l?[l]:[]);k([...o?[o]:[],...ie(e)])}catch(t){var e;b(null!==(e=t.message)&&void 0!==e?e:(0,u.__)("Unknown error.","block-editor-components"))}})()}),[h,o,l]),v?(0,e.createElement)(c.Notice,{isDismissible:!1,status:"error"},(0,e.createElement)("p",null,v)):g?(0,e.createElement)(c.SelectControl,r({},f,{options:g})):(0,e.createElement)(c.Spinner,null)},v=window.wp.blockEditor;function b(t){const{value:n,onChange:o,...l}=t;return(0,e.createElement)(v.MediaUploadCheck,null,(0,e.createElement)(v.MediaUpload,r({title:(0,u.__)("Select or Upload File","block-editor-components")},l,{multiple:!1,render:t=>{let{open:l}=t;return(0,e.createElement)(c.ToolbarGroup,null,(0,e.createElement)(c.ToolbarButton,{icon:"admin-links",label:n?(0,u.__)("Edit file","block-editor-components"):(0,u.__)("Select file","block-editor-components"),onClick:l}),n&&(0,e.createElement)(c.ToolbarButton,{icon:"editor-unlink",label:(0,u.__)("Deselect file","block-editor-components"),onClick:()=>o(null)}))},value:n,onSelect:o})))}function g(e,t){var n,o;const l=null!==(n=null==e?void 0:e.sizes)&&void 0!==n?n:null==e||null===(o=e.media_details)||void 0===o?void 0:o.sizes,r=null==l?void 0:l[t];return r?{src:r.url||r.source_url,width:r.width,height:r.height}:null}const k=["image"],h=(0,u.__)("Select Image","block-editor-components"),y=(0,u.__)("Select Image","block-editor-components"),S=(0,u.__)("Remove image","block-editor-components"),w=(0,u.__)("Replace Image","block-editor-components");function E(t){const{buttonText:n=h,className:o,help:l,id:r,label:i,modalTitle:a=y,removeButtonText:u=S,replaceButtonText:d=w,size:p,value:m,onChange:f}=t,b=(0,s.useSelect)((e=>{const t=e("core").getMedia(m,{context:"view"});return t?t.alt_text:""}),[m]),E=(0,s.useSelect)((e=>{const t=e("core").getMedia(m,{context:"view"});if(t){if(p){const e=g(t,p);if(e)return e.src}return t.source_url}}),[p,m]);return(0,e.createElement)(c.BaseControl,{className:o,help:l,id:r,label:i},(0,e.createElement)(v.MediaUploadCheck,null,(0,e.createElement)(v.MediaUpload,{allowedTypes:k,render:t=>{let{open:o}=t;return(0,e.createElement)("div",null,m?E?(0,e.createElement)(c.Button,{isLink:!0,onClick:o},(0,e.createElement)("img",{alt:b,src:E})):(0,e.createElement)(c.Spinner,null):null,(0,e.createElement)(c.Button,{isSecondary:!0,onClick:o},m?d:n))},title:a,onSelect:f})),(0,e.createElement)("br",null),m?(0,e.createElement)(c.Button,{isDestructive:!0,isLink:!0,onClick:()=>f(null)},u):null)}var _=n(697),T=n.n(_);const B=window.wp.blocks;function C(n){let{className:o,allowedBlocks:l,template:r,currentItemIndex:i,parentBlockId:a,renderAppender:c,captureToolbars:s}=n;const u=(0,t.useRef)(),d=(0,v.useInnerBlocksProps)({id:`inner-block-display-single-${a}`,className:o},{__experimentalCaptureToolbars:s,allowedBlocks:l,orientation:"horizontal",renderAppender:c,template:r,templateLock:!1});return(0,t.useEffect)((()=>{u.current&&(u.current.innerHTML=`#inner-block-display-single-${a} > *:not(:nth-child(${i+1}) ) { display: none; }`)}),[i,u,a]),(0,e.createElement)(e.Fragment,null,(0,e.createElement)("style",{ref:u}),(0,e.createElement)("div",d))}C.defaultProps={currentItemIndex:0,renderAppender:!1,captureToolbars:!0},C.propTypes={parentBlockId:T().string.isRequired,allowedBlocks:T().arrayOf(T().string).isRequired,template:T().array,className:T().string,currentItemIndex:T().number,renderAppender:T().oneOfType([T().bool,T().element])};const x=C;var P=n(184),I=n.n(P);function O(t){let{totalPages:n,currentPage:o,setCurrentPage:l,prevEnabled:r,nextEnabled:i,addSlide:a=(()=>{}),addSlideEnabled:s=!1}=t;return(0,e.createElement)("div",{className:"inner-block-slider__navigation"},(0,e.createElement)(c.IconButton,{disabled:!r,icon:"arrow-left-alt2",isSecondary:!0,isSmall:!0,onClick:()=>{r&&l(o-1)}}),[...Array(n).keys()].map((t=>(0,e.createElement)(c.Button,{key:t+1,"aria-label":`Slide ${t+1}`,className:I()("components-button","is-not-small",{"is-primary":o===t+1,"is-secondary":o!==t+1}),type:"button",onClick:()=>{l(t+1)}},t+1))),(0,e.createElement)(c.IconButton,{disabled:!i,icon:"arrow-right-alt2",isSecondary:!0,isSmall:!0,onClick:()=>{i&&l(o+1)}}),(0,e.createElement)(c.IconButton,{disabled:!s,icon:"plus-alt2",isSecondary:!0,isSmall:!0,onClick:()=>a()}))}O.propTypes={totalPages:T().number.isRequired,currentPage:T().number.isRequired,setCurrentPage:T().func.isRequired,prevEnabled:T().bool.isRequired,nextEnabled:T().bool.isRequired,addSlide:T().func,addSlideEnabled:T().bool};const R=O,N=n=>{let{parentBlockId:o,allowedBlock:l,template:r,slideLimit:i}=n;const a=r||[[l]],c=(0,s.useSelect)((e=>e("core/block-editor").getBlock(o).innerBlocks)),[u,d]=(0,t.useState)(0),p=(0,t.useRef)(c.length),{insertBlock:m}=(0,s.useDispatch)("core/block-editor");return(0,t.useEffect)((()=>{(c.length>p.current||c.lengthc.length)&&d(c.length-1),p.current=c.length}),[c.length,u,p]),(0,e.createElement)("div",{className:"inner-block-slider"},(0,e.createElement)(x,{allowedBlocks:[l],className:"slides",currentItemIndex:u,parentBlockId:o,template:a}),(0,e.createElement)(R,{addSlide:()=>{const e=(0,B.createBlock)(l);m(e,void 0,o)},addSlideEnabled:c.length1,setCurrentPage:e=>d(e-1),totalPages:c.length}))};N.defaultProps={slideLimit:10,template:null},N.propTypes={parentBlockId:T().string.isRequired,allowedBlock:T().string.isRequired,template:T().array};const A=N;function M(n){const{onChange:o,opensInNewTab:l,url:r}=n,[i,a]=(0,t.useState)(!1),s=(0,t.useMemo)((()=>[{icon:"admin-links",title:(0,u.__)("Link","block-editor-components"),isActive:(null==r?void 0:r.length)>0,onClick:()=>a(!i)}]),[a,i,r]),d=(0,t.useMemo)((()=>({url:r,opensInNewTab:l})),[l,r]);return(0,e.createElement)(e.Fragment,null,(0,e.createElement)(c.ToolbarGroup,{controls:s}),i&&(0,e.createElement)(c.Popover,null,(0,e.createElement)(v.__experimentalLinkControl,{forceIsEditingLink:i,opensInNewTab:l,value:d,onChange:o})))}function L(n){var o;const{className:l,limit:i=0,onChange:a,...c}=n,[s,u]=(0,t.useState)(i&&(null===(o=n.value)||void 0===o?void 0:o.length)>i);return(0,e.createElement)(v.PlainText,r({className:`${l} limit-text ${s?"invalid":""}`.trim(),onChange:e=>{i&&e.length>i?s||u(!0):(s&&u(!1),a(e))}},c))}const F=/[\r\n]+/g;function j(n){const{editPost:o}=(0,s.useDispatch)("core/editor"),l=(0,s.useSelect)((e=>e("core/editor").getEditedPostAttribute("title")),[]),i=(0,t.useCallback)((e=>o({title:e.replace(F," ")})),[o]);return(0,e.createElement)(v.RichText,r({},n,{allowedFormats:[],value:l,onChange:i}))}function D(e){var t;const{postType:n}=e;return(0,s.useSelect)((e=>e("core/editor").getCurrentPostType()),[])===n?e.children:null!==(t=e.fallback)&&void 0!==t?t:null}const q=window.wp.dom;function $(n){var o;const{className:l,limit:i=0,onChange:a,...c}=n,s=(0,t.useRef)(),[u,d]=(0,t.useState)(i&&(null===(o=n.value)||void 0===o?void 0:o.length)>i),[p,m]=(0,t.useState)(!1);return(0,e.createElement)(v.RichText,r({ref:s,className:`${l} limit-text ${u?"invalid":""}`.trim(),onChange:e=>{if(i&&(0,q.__unstableStripHTML)(e).length>i)return m(!1),s.current.innerHTML=n.value,(e=>{const t=document.createRange();t.selectNodeContents(e),t.collapse(!1);const n=window.getSelection();n.removeAllRanges(),n.addRange(t)})(s.current),void(u||d(!0));p&&u&&d(!1),m(!0),a(e)}},c))}const U=/^is-style-/;function W(e){const{blockName:n,className:o}=(0,s.useSelect)((t=>{var n,o,l;const r=t("core/block-editor").getBlock(e);return{blockName:null!==(n=null==r?void 0:r.name)&&void 0!==n?n:"",className:null!==(o=null==r||null===(l=r.attributes)||void 0===l?void 0:l.className)&&void 0!==o?o:""}}),[e]),{blockStyles:l,defaultStyle:r}=H(n),i=(0,t.useMemo)((()=>l.map((e=>{let{name:t}=e;return t}))),[l]),a=(0,t.useMemo)((()=>function(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").trim().replace(/\s+/," ").split(" ").map((e=>U.test(e)?e.replace(U,""):"")).filter(Boolean)}(o)),[o]);return(0,t.useMemo)((()=>{var e;return null!==(e=a.find((e=>i.includes(e))))&&void 0!==e?e:r}),[i,a,r])}function H(e){const n=(0,s.useSelect)((t=>t("core/blocks").getBlockStyles(e)),[e]);return(0,t.useMemo)((()=>{var e,t;return{blockStyles:n,defaultStyle:null!==(e=null===(t=n.find((e=>{let{isDefault:t}=e;return t})))||void 0===t?void 0:t.name)&&void 0!==e?e:""}}),[n])}function z(e){return(0,t.useMemo)((()=>{const t=(0,B.getBlockTypes)();return null!=t&&t.length?t.filter((t=>{let{name:n,parent:o}=t;return!o&&!e.includes(n)})).map((e=>{let{name:t}=e;return t})):[]}),[e])}function V(e,n){var o;const{editPost:l}=(0,s.useDispatch)("core/editor"),r=(0,s.useSelect)((e=>e("core/editor").getEditedPostAttribute("meta"))),i=(0,t.useCallback)((t=>l({meta:{[e]:t}})),[l,e]);return[null!==(o=null==r?void 0:r[e])&&void 0!==o?o:n,i]}function G(e,t,n){return(0,s.useSelect)((o=>{const{innerBlocks:l}=o("core/block-editor").getBlock(e);return(null==l?void 0:l.length){const n=document.getElementById(`block-${t}`);n&&(e(t),setTimeout((()=>n.scrollIntoView({behavior:"smooth"})),200))}),[e])}function Y(e,n,o){return(0,t.useCallback)((function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o;return n({[e]:t})}),[e,o,n])}function J(e){const{getBlocks:t}=(0,s.select)("core/block-editor");return t().find((t=>{let{name:n}=t;return n===e}))}function K(e,t){return e.find((e=>!t(e)))}function X(e,t){return e.filter((e=>!t(e)))}function Z(e,t){return e.find((e=>t(e)))}function ee(e,t){return e.filter((e=>t(e)))}const te=window.wp.htmlEntities;function ne(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";const{id:n,title:o}=e;return{label:t+(0,te.decodeEntities)(o.rendered||(0,u.sprintf)((0,u.__)("#%d (no title)","block-editor-components"),n)),value:n}}function oe(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";const{id:n,name:o}=e;return{label:t+(0,te.decodeEntities)(o||(0,u.sprintf)((0,u.__)("#%d (no name)","block-editor-components"),n)),value:n}}function le(e){return e.map((e=>ne(e)))}function re(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"\u2014 ",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return e.map((e=>{let{children:o=[],...l}=e;return[ne(l,t.repeat(n)),...re(o,t,n+1)]})).flat()}function ie(e){return e.map((e=>oe(e)))}function ae(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"\u2014 ",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return e.map((e=>{let{children:o=[],...l}=e;return[oe(l,t.repeat(n)),...ae(o,t,n+1)]})).flat()}function ce(e){return(t,n)=>e.every((e=>t[e]===n[e]))}function se(e){var t;if(null!==(t=e.variations)&&void 0!==t&&t.length){for(var n=arguments.length,o=new Array(n>1?n-1:0),l=1;l(e.isActive=t,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,i){if(i!==o){var a=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 a.name="Invariant Violation",a}}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:()=>f,FileControls:()=>b,GenericServerSideEdit:()=>h,ImageControl:()=>T,InnerBlockSlider:()=>F,LinkToolbar:()=>L,PlainTextWithLimit:()=>D,PostTitleControl:()=>q,PostTypeCheck:()=>U,RichTextWithLimit:()=>H,createOptionFromPost:()=>le,createOptionFromTerm:()=>ie,createOptionsFromPosts:()=>ae,createOptionsFromPostsWithHierarchy:()=>ce,createOptionsFromTerms:()=>se,createOptionsFromTermsWithHierarchy:()=>ue,findBlockByName:()=>Z,findInvalidBlock:()=>ee,findInvalidBlocks:()=>te,findValidBlock:()=>ne,findValidBlocks:()=>oe,getImageDataForSize:()=>y,useActiveBlockStyle:()=>V,useBlockStyles:()=>G,useDisallowedBlocks:()=>Q,useMeta:()=>Y,useRenderAppenderWithBlockLimit:()=>J,useSelectBlock:()=>K,useSetAttribute:()=>X,withActiveVariation:()=>pe});const e=window.wp.element,t=window.React;function r(t){const{children:n=null,ComponentFalse:o=(()=>null),ComponentTrue:r=(()=>n),predicate:l,...i}=t,a=l(i)?r:o;return(0,e.createElement)(a,i)}function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t{var t;return null===(t=e("core").getTaxonomy(i))||void 0===t?void 0:t.rest_base}),[i]);return(0,t.useEffect)((()=>{h&&(async()=>{try{const e=await a()({path:(0,d.addQueryArgs)(`/wp/v2/${h}`,{_fields:"id,name",context:"view",per_page:-1})});if(null==e||!e.length)return void k(r?[r]:[]);k([...o?[o]:[],...se(e)])}catch(t){var e;b(null!==(e=t.message)&&void 0!==e?e:(0,u.__)("Unknown error.","block-editor-components"))}})()}),[h,o,r]),v?(0,e.createElement)(c.Notice,{isDismissible:!1,status:"error"},(0,e.createElement)("p",null,v)):g?(0,e.createElement)(c.SelectControl,l({},f,{options:g})):(0,e.createElement)(c.Spinner,null)},v=window.wp.blockEditor;function b(t){const{value:n,onChange:o,...r}=t;return(0,e.createElement)(v.MediaUploadCheck,null,(0,e.createElement)(v.MediaUpload,l({title:(0,u.__)("Select or Upload File","block-editor-components")},r,{multiple:!1,render:t=>{let{open:r}=t;return(0,e.createElement)(c.ToolbarGroup,null,(0,e.createElement)(c.ToolbarButton,{icon:"admin-links",label:n?(0,u.__)("Edit file","block-editor-components"):(0,u.__)("Select file","block-editor-components"),onClick:r}),n&&(0,e.createElement)(c.ToolbarButton,{icon:"editor-unlink",label:(0,u.__)("Deselect file","block-editor-components"),onClick:()=>o(null)}))},value:n,onSelect:o})))}const g=window.wp.serverSideRender;var k=n.n(g);const h=function(t){let{attributes:n,context:o,name:r,inspectorControls:l}=t;return(0,e.createElement)(e.Fragment,null,l,(0,e.createElement)("div",(0,v.useBlockProps)(),(0,e.createElement)(c.Disabled,null,(0,e.createElement)(k(),{attributes:n,block:r,EmptyResponsePlaceholder:()=>(0,e.createElement)("div",{className:`wp-block-${r.replace("/","-")}`},r," ",(0,u.__)("Block rendered as empty.")),urlQueryArgs:"object"==typeof o&&Object.hasOwn(o,"postId")?{post_id:o.postId}:{}}))))};function y(e,t){var n,o;const r=null!==(n=null==e?void 0:e.sizes)&&void 0!==n?n:null==e||null===(o=e.media_details)||void 0===o?void 0:o.sizes,l=null==r?void 0:r[t];return l?{src:l.url||l.source_url,width:l.width,height:l.height}:null}const E=["image"],S=(0,u.__)("Select Image","block-editor-components"),w=(0,u.__)("Select Image","block-editor-components"),_=(0,u.__)("Remove image","block-editor-components"),B=(0,u.__)("Replace Image","block-editor-components");function T(t){const{buttonText:n=S,className:o,help:r,id:l,label:i,modalTitle:a=w,removeButtonText:u=_,replaceButtonText:d=B,size:p,value:m,onChange:f}=t,b=(0,s.useSelect)((e=>{const t=e("core").getMedia(m,{context:"view"});return t?t.alt_text:""}),[m]),g=(0,s.useSelect)((e=>{const t=e("core").getMedia(m,{context:"view"});if(t){if(p){const e=y(t,p);if(e)return e.src}return t.source_url}}),[p,m]);return(0,e.createElement)(c.BaseControl,{className:o,help:r,id:l,label:i},(0,e.createElement)(v.MediaUploadCheck,null,(0,e.createElement)(v.MediaUpload,{allowedTypes:E,render:t=>{let{open:o}=t;return(0,e.createElement)("div",null,m?g?(0,e.createElement)(c.Button,{isLink:!0,onClick:o},(0,e.createElement)("img",{alt:b,src:g})):(0,e.createElement)(c.Spinner,null):null,(0,e.createElement)(c.Button,{isSecondary:!0,onClick:o},m?d:n))},title:a,onSelect:f})),(0,e.createElement)("br",null),m?(0,e.createElement)(c.Button,{isDestructive:!0,isLink:!0,onClick:()=>f(null)},u):null)}var C=n(697),x=n.n(C);const P=window.wp.blocks;function I(n){let{className:o,allowedBlocks:r,template:l,currentItemIndex:i,parentBlockId:a,renderAppender:c,captureToolbars:s}=n;const u=(0,t.useRef)(),d=(0,v.useInnerBlocksProps)({id:`inner-block-display-single-${a}`,className:o},{__experimentalCaptureToolbars:s,allowedBlocks:r,orientation:"horizontal",renderAppender:c,template:l,templateLock:!1});return(0,t.useEffect)((()=>{u.current&&(u.current.innerHTML=`#inner-block-display-single-${a} > *:not(:nth-child(${i+1}) ) { display: none; }`)}),[i,u,a]),(0,e.createElement)(e.Fragment,null,(0,e.createElement)("style",{ref:u}),(0,e.createElement)("div",d))}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 O=I;var R=n(184),N=n.n(R);function A(t){let{totalPages:n,currentPage:o,setCurrentPage:r,prevEnabled:l,nextEnabled:i,addSlide:a=(()=>{}),addSlideEnabled:s=!1}=t;return(0,e.createElement)("div",{className:"inner-block-slider__navigation"},(0,e.createElement)(c.IconButton,{disabled:!l,icon:"arrow-left-alt2",isSecondary:!0,isSmall:!0,onClick:()=>{l&&r(o-1)}}),[...Array(n).keys()].map((t=>(0,e.createElement)(c.Button,{key:t+1,"aria-label":`Slide ${t+1}`,className:N()("components-button","is-not-small",{"is-primary":o===t+1,"is-secondary":o!==t+1}),type:"button",onClick:()=>{r(t+1)}},t+1))),(0,e.createElement)(c.IconButton,{disabled:!i,icon:"arrow-right-alt2",isSecondary:!0,isSmall:!0,onClick:()=>{i&&r(o+1)}}),(0,e.createElement)(c.IconButton,{disabled:!s,icon:"plus-alt2",isSecondary:!0,isSmall:!0,onClick:()=>a()}))}A.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=A,j=n=>{let{parentBlockId:o,allowedBlock:r,template:l,slideLimit:i}=n;const a=l||[[r]],c=(0,s.useSelect)((e=>e("core/block-editor").getBlock(o).innerBlocks)),[u,d]=(0,t.useState)(0),p=(0,t.useRef)(c.length),{insertBlock:m}=(0,s.useDispatch)("core/block-editor");return(0,t.useEffect)((()=>{(c.length>p.current||c.lengthc.length)&&d(c.length-1),p.current=c.length}),[c.length,u,p]),(0,e.createElement)("div",{className:"inner-block-slider"},(0,e.createElement)(O,{allowedBlocks:[r],className:"slides",currentItemIndex:u,parentBlockId:o,template:a}),(0,e.createElement)(M,{addSlide:()=>{const e=(0,P.createBlock)(r);m(e,void 0,o)},addSlideEnabled:c.length1,setCurrentPage:e=>d(e-1),totalPages:c.length}))};j.defaultProps={slideLimit:10,template:null},j.propTypes={parentBlockId:x().string.isRequired,allowedBlock:x().string.isRequired,template:x().array};const F=j;function L(n){const{onChange:o,opensInNewTab:r,url:l}=n,[i,a]=(0,t.useState)(!1),s=(0,t.useMemo)((()=>[{icon:"admin-links",title:(0,u.__)("Link","block-editor-components"),isActive:(null==l?void 0:l.length)>0,onClick:()=>a(!i)}]),[a,i,l]),d=(0,t.useMemo)((()=>({url:l,opensInNewTab:r})),[r,l]);return(0,e.createElement)(e.Fragment,null,(0,e.createElement)(c.ToolbarGroup,{controls:s}),i&&(0,e.createElement)(c.Popover,null,(0,e.createElement)(v.__experimentalLinkControl,{forceIsEditingLink:i,opensInNewTab:r,value:d,onChange:o})))}function D(n){var o;const{className:r,limit:i=0,onChange:a,...c}=n,[s,u]=(0,t.useState)(i&&(null===(o=n.value)||void 0===o?void 0:o.length)>i);return(0,e.createElement)(v.PlainText,l({className:`${r} limit-text ${s?"invalid":""}`.trim(),onChange:e=>{i&&e.length>i?s||u(!0):(s&&u(!1),a(e))}},c))}const $=/[\r\n]+/g;function q(n){const{editPost:o}=(0,s.useDispatch)("core/editor"),r=(0,s.useSelect)((e=>e("core/editor").getEditedPostAttribute("title")),[]),i=(0,t.useCallback)((e=>o({title:e.replace($," ")})),[o]);return(0,e.createElement)(v.RichText,l({},n,{allowedFormats:[],value:r,onChange:i}))}function U(e){var t;const{postType:n}=e;return(0,s.useSelect)((e=>e("core/editor").getCurrentPostType()),[])===n?e.children:null!==(t=e.fallback)&&void 0!==t?t:null}const W=window.wp.dom;function H(n){var o;const{className:r,limit:i=0,onChange:a,...c}=n,s=(0,t.useRef)(),[u,d]=(0,t.useState)(i&&(null===(o=n.value)||void 0===o?void 0:o.length)>i),[p,m]=(0,t.useState)(!1);return(0,e.createElement)(v.RichText,l({ref:s,className:`${r} limit-text ${u?"invalid":""}`.trim(),onChange:e=>{if(i&&(0,W.__unstableStripHTML)(e).length>i)return m(!1),s.current.innerHTML=n.value,(e=>{const t=document.createRange();t.selectNodeContents(e),t.collapse(!1);const n=window.getSelection();n.removeAllRanges(),n.addRange(t)})(s.current),void(u||d(!0));p&&u&&d(!1),m(!0),a(e)}},c))}const z=/^is-style-/;function V(e){const{blockName:n,className:o}=(0,s.useSelect)((t=>{var n,o,r;const l=t("core/block-editor").getBlock(e);return{blockName:null!==(n=null==l?void 0:l.name)&&void 0!==n?n:"",className:null!==(o=null==l||null===(r=l.attributes)||void 0===r?void 0:r.className)&&void 0!==o?o:""}}),[e]),{blockStyles:r,defaultStyle:l}=G(n),i=(0,t.useMemo)((()=>r.map((e=>{let{name:t}=e;return t}))),[r]),a=(0,t.useMemo)((()=>function(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").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=a.find((e=>i.includes(e))))&&void 0!==e?e:l}),[i,a,l])}function G(e){const n=(0,s.useSelect)((t=>t("core/blocks").getBlockStyles(e)),[e]);return(0,t.useMemo)((()=>{var e,t;return{blockStyles:n,defaultStyle:null!==(e=null===(t=n.find((e=>{let{isDefault:t}=e;return t})))||void 0===t?void 0:t.name)&&void 0!==e?e:""}}),[n])}function Q(e){return(0,t.useMemo)((()=>{const t=(0,P.getBlockTypes)();return null!=t&&t.length?t.filter((t=>{let{name:n,parent:o}=t;return!o&&!e.includes(n)})).map((e=>{let{name:t}=e;return t})):[]}),[e])}function Y(e,n){var o;const{editPost:r}=(0,s.useDispatch)("core/editor"),l=(0,s.useSelect)((e=>e("core/editor").getEditedPostAttribute("meta"))),i=(0,t.useCallback)((t=>r({meta:{[e]:t}})),[r,e]);return[null!==(o=null==l?void 0:l[e])&&void 0!==o?o:n,i]}function J(e,t,n){return(0,s.useSelect)((o=>{const{innerBlocks:r}=o("core/block-editor").getBlock(e);return(null==r?void 0:r.length){const n=document.getElementById(`block-${t}`);n&&(e(t),setTimeout((()=>n.scrollIntoView({behavior:"smooth"})),200))}),[e])}function X(e,n,o){return(0,t.useCallback)((function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o;return n({[e]:t})}),[e,o,n])}function Z(e){const{getBlocks:t}=(0,s.select)("core/block-editor");return t().find((t=>{let{name:n}=t;return n===e}))}function ee(e,t){return e.find((e=>!t(e)))}function te(e,t){return e.filter((e=>!t(e)))}function ne(e,t){return e.find((e=>t(e)))}function oe(e,t){return e.filter((e=>t(e)))}const re=window.wp.htmlEntities;function le(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";const{id:n,title:o}=e;return{label:t+(0,re.decodeEntities)(o.rendered||(0,u.sprintf)((0,u.__)("#%d (no title)","block-editor-components"),n)),value:n}}function ie(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";const{id:n,name:o}=e;return{label:t+(0,re.decodeEntities)(o||(0,u.sprintf)((0,u.__)("#%d (no name)","block-editor-components"),n)),value:n}}function ae(e){return e.map((e=>le(e)))}function ce(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"\u2014 ",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return e.map((e=>{let{children:o=[],...r}=e;return[le(r,t.repeat(n)),...ce(o,t,n+1)]})).flat()}function se(e){return e.map((e=>ie(e)))}function ue(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"\u2014 ",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return e.map((e=>{let{children:o=[],...r}=e;return[ie(r,t.repeat(n)),...ue(o,t,n+1)]})).flat()}function de(e){return(t,n)=>e.every((e=>t[e]===n[e]))}function pe(e){var t;if(null!==(t=e.variations)&&void 0!==t&&t.length){for(var n=arguments.length,o=new Array(n>1?n-1:0),r=1;r(e.isActive=t,e)))}return e}})(),o})())); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 847edcf..5afaef6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@humanmade/block-editor-components", - "version": "0.3.0", + "version": "0.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@humanmade/block-editor-components", - "version": "0.3.0", + "version": "0.4.0", "license": "GPL-2.0-or-later", "dependencies": { "classnames": "^2.3.2" diff --git a/package.json b/package.json index a40ffb6..395d78d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@humanmade/block-editor-components", - "version": "0.3.0", + "version": "0.4.0", "description": "Reusable components, hooks and helper functions for the WordPress block editor(s).", "keywords": [ "block editor", @@ -20,7 +20,8 @@ "build": "webpack", "start": "webpack watch --mode development", "lint": "eslint .", - "test": "jest" + "test": "jest", + "version": "npm run build && git add -f dist/" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.18.6", diff --git a/src/components/GenericServerSideEdit/README.md b/src/components/GenericServerSideEdit/README.md new file mode 100644 index 0000000..e396f1b --- /dev/null +++ b/src/components/GenericServerSideEdit/README.md @@ -0,0 +1,81 @@ +# GenericServerSideEdit + +The `GenericServerSideEdit` component is a generic block edit component that uses server side rendering to display content. + +## Usage + +For a minimum working setup, all you need to do is import the `GenericServerSideEdit` component and assign it as the `edit` parameter when registering a block: + +```js +import { registerBlockType } from '@wordpress/blocks'; + +import blockMetadata from './block.json'; +import GenericServerSideEdit from '@humanmade/block-editor-components'; + +registerBlockType( blockMetadata, { + edit: GenericServerSideEdit, +} ); + +``` + +Optionally, you can use it inside an edit component with inspector controls via a fragment like this: + +```js +import { Panel, PanelBody } from '@wordpress/components'; +import { InspectorControls } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +import GenericServerSideEdit from '@humanmade/block-editor-components'; + +/** + * Render the editor interface. + * + * @returns {import('react').ReactNode} Rendered editorial UI. + */ +export default function Edit( { attributes, context, setAttributes } ) { + return <> + + + +

{ __( 'Panel Content', 'mytextdomain' ) }

+ + + + + ; +} +``` + +## Props + +These props with the exception of `inspectorControls` are the same props provided to edit components. + +### `name` + +The name of the block being rendered. + +| Type | Required | Default | +|--------------------------------------|--------------------------------------|--------------------------------------| +| `string` | yes | `undefined` | + +### `attributes` + +The block attributes to use + +| Type | Required | Default | +|--------------------------------------|--------------------------------------|--------------------------------------| +| `object` | yes | `null` | + +### `context` + +Necessary for context aware blocks, currently supports the `post_id` context if available. + +| Type | Required | Default | +|--------------------------------------|--------------------------------------|--------------------------------------| +| `object` | no | `null` | diff --git a/src/components/GenericServerSideEdit/index.js b/src/components/GenericServerSideEdit/index.js new file mode 100644 index 0000000..6b159d1 --- /dev/null +++ b/src/components/GenericServerSideEdit/index.js @@ -0,0 +1,47 @@ +import { useBlockProps } from '@wordpress/block-editor'; +import { Disabled } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import ServerSideRender from '@wordpress/server-side-render'; + +/** + * Renders the block edit interface using server side rendering. + * + * @param {object} props Block props + * @param {object} props.attributes block attributes + * @param {object} props.context block context data + * @param {string} props.name name of block + * @returns {React.ReactNode} Rendered editorial UI. + */ +function GenericServerSideEdit( { attributes, context, name } ) { + + /** + * A generic empty response component that uses the standard wp-block-name class + * for when an empty value is returned by the API. + * + * @returns {React.ReactNode} block rendered as empty component. + */ + const emptyResponse = () => { + return ( +
+ { name } { __( 'Block rendered as empty.' ) } +
+ ); + }; + + return ( +
+ + + +
+ ); +} + +export default GenericServerSideEdit; diff --git a/src/components/InnerBlockSlider/index.js b/src/components/InnerBlockSlider/index.js index 888ad7b..2e4f9e0 100644 --- a/src/components/InnerBlockSlider/index.js +++ b/src/components/InnerBlockSlider/index.js @@ -15,7 +15,7 @@ import Navigation from './navigation'; * @param {string} props.allowedBlock Allowed block type. * @param {Array} props.template Initial block template. * @param {number} props.slideLimit Maximum allowed slides. - * @returns {import('react').ReactNode} Component. + * @returns {React.ReactNode} Component. */ const InnerBlockSlider = ( { parentBlockId, diff --git a/src/components/InnerBlockSlider/inner-block-single-display.js b/src/components/InnerBlockSlider/inner-block-single-display.js index 7b8bfd3..f89f8f3 100644 --- a/src/components/InnerBlockSlider/inner-block-single-display.js +++ b/src/components/InnerBlockSlider/inner-block-single-display.js @@ -6,15 +6,15 @@ import { useInnerBlocksProps } from '@wordpress/block-editor'; /** * InnerBlockSlider component. * - * @param {object} props Component props. - * @param {string} props.parentBlockId Parent block clientId. - * @param {string} props.allowedBlocks Allowed block types. See InnerBlocks. - * @param {Array} props.template Initial block template. See InnerBlocks. - * @param {boolean} props.currentItemIndex Current Item - * @param {boolean} props.className Class name. - * @param {boolean|ReactNode} props.renderAppender Appender. - * @param {boolean} props.captureToolbars Passed through to inner block props. - * @returns {import('react').ReactNode} Component. + * @param {object} props Component props. + * @param {string} props.parentBlockId Parent block clientId. + * @param {string} props.allowedBlocks Allowed block types. See InnerBlocks. + * @param {Array} props.template Initial block template. See InnerBlocks. + * @param {boolean} props.currentItemIndex Current Item + * @param {boolean} props.className Class name. + * @param {boolean|React.ReactNode} props.renderAppender Appender. + * @param {boolean} props.captureToolbars Passed through to inner block props. + * @returns {React.ReactNode} Component. */ function InnerBlocksDisplaySingle( { className, diff --git a/src/components/InnerBlockSlider/navigation.js b/src/components/InnerBlockSlider/navigation.js index a5a5d9c..b9f8117 100644 --- a/src/components/InnerBlockSlider/navigation.js +++ b/src/components/InnerBlockSlider/navigation.js @@ -14,7 +14,7 @@ import { Button, IconButton } from '@wordpress/components'; * @param {boolean} props.nextEnabled Is Next button enabled. * @param {Function} props.addSlide Add slide callback. * @param {boolean} props.addSlideEnabled Is add slide button enabled. - * @returns {import('react').ReactNode} Component. + * @returns {React.ReactNode} Component. */ function Navigation( { totalPages, diff --git a/src/index.js b/src/index.js index caf89e0..a8bb58f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ export { default as ConditionalComponent } from './components/ConditionalComponent'; export { default as FetchAllTermSelectControl } from './components/FetchAllTermSelectControl'; export { default as FileControls } from './components/FileControls'; +export { default as GenericServerSideEdit } from './components/GenericServerSideEdit'; export { default as ImageControl } from './components/ImageControl'; export { default as InnerBlockSlider } from './components/InnerBlockSlider'; export { default as LinkToolbar } from './components/LinkToolbar';