From 3ab65d518f2e368e26aa490fba60dd9596b1b11a Mon Sep 17 00:00:00 2001 From: Brett Mason Date: Mon, 30 Sep 2024 15:12:51 +0100 Subject: [PATCH] Implement wrapper for accordion content to allow animation of panel with grid rows --- dist/accordion-item/index.asset.php | 2 +- dist/accordion-item/index.js | 2 +- dist/accordion-item/render.php | 4 +++- pulsar-blocks.php | 2 +- src/accordion-item/edit.js | 6 ++++-- src/accordion-item/render.php | 4 +++- 6 files changed, 13 insertions(+), 7 deletions(-) diff --git a/dist/accordion-item/index.asset.php b/dist/accordion-item/index.asset.php index a35ae4a..c8aa7c9 100644 --- a/dist/accordion-item/index.asset.php +++ b/dist/accordion-item/index.asset.php @@ -1 +1 @@ - array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '9002d527be62535085b0'); + array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '6b9f9337a6f9d4643766'); diff --git a/dist/accordion-item/index.js b/dist/accordion-item/index.js index a5d50ba..33a178f 100644 --- a/dist/accordion-item/index.js +++ b/dist/accordion-item/index.js @@ -1 +1 @@ -(()=>{"use strict";const e=window.wp.blocks,t=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"pulsar/accordion-item","version":"0.1.0","title":"Accordion Item","category":"design","parent":["pulsar/accordion"],"supports":{"inserter":false,"reusable":false,"html":false},"attributes":{"title":{"type":"string","selector":".wp-block-pulsar-accordion__heading"},"id":{"type":"string","default":""}},"usesContext":["level"],"textdomain":"pulsar-blocks","editorScript":"file:./index.js","render":"file:./render.php"}'),l=window.React,n=window.wp.blockEditor,o=(window.wp.url,window.wp.element),r=(window.wp.compose,window.wp.i18n),c=window.wp.components,a=((0,l.createElement)(c.SVG,{xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",fillRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:"2",clipRule:"evenodd",viewBox:"0 0 24 24"},(0,l.createElement)(c.Path,{d:"M18.003 19.399H5.931a.11.11 0 0 0-.11.11v1.537c0 .06.049.11.11.11h12.072a.11.11 0 0 0 .11-.11v-1.537a.11.11 0 0 0-.11-.11ZM5.931 18.082c-.788 0-1.427.639-1.427 1.427v1.537c0 .788.639 1.427 1.427 1.427h12.072c.789 0 1.427-.639 1.427-1.427v-1.537c0-.788-.638-1.427-1.427-1.427H5.931Z"}),(0,l.createElement)(c.Path,{fillRule:"nonzero",d:"M17.837 3.191v11.647H6.19V3.191h11.647Zm0-1.664H6.19c-.915 0-1.663.749-1.663 1.664v11.647c0 .915.748 1.663 1.663 1.663h11.647c.915 0 1.664-.748 1.664-1.663V3.191a1.67 1.67 0 0 0-1.664-1.664Z"}),(0,l.createElement)(c.Path,{fillRule:"nonzero",d:"m13.794 9.014-2.496 3.132-1.78-2.096-2.496 3.124h9.983l-3.211-4.16Z"}),(0,l.createElement)(c.Path,{d:"M7.022 6.519h9.983v.832H7.022zM7.022 4.855h9.983v.832H7.022z"}),(0,l.createElement)(c.Path,{fillRule:"nonzero",d:"M22.476 9.014 19.98 11.51V6.519l2.496 2.495ZM1.524 9.014 4.02 6.519v4.991L1.524 9.014Z"})),(0,l.createElement)(c.SVG,{className:"icon-carousel",width:"26px",height:"18px",viewBox:"0 0 26 18",version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink"},(0,l.createElement)(c.G,{strokeWidth:"1"},(0,l.createElement)(c.G,{transform:"translate(0.000000, -3.000000)"},(0,l.createElement)(c.Path,{d:"M20,5 L20,19 L6,19 L6,5 L20,5 L20,5 Z M20,3 L6,3 C4.9,3 4,3.9 4,5 L4,19 C4,20.1 4.9,21 6,21 L20,21 C21.1,21 22,20.1 22,19 L22,5 C22,3.9 21.1,3 20,3 Z",fillRule:"nonzero"}),(0,l.createElement)(c.Polygon,{fillRule:"nonzero",points:"15.14 12 12.14 15.7645914 10 13.2451362 7 17 19 17"}),(0,l.createElement)(c.Rect,{x:"7",y:"9",width:"12",height:"1"}),(0,l.createElement)(c.Rect,{x:"7",y:"7",width:"12",height:"1"}),(0,l.createElement)(c.Polygon,{transform:"translate(24.500000, 12.000000) rotate(-270.000000) translate(-24.500000, -12.000000) ",points:"24.5 10.5 27.5 13.5 21.5 13.5"}),(0,l.createElement)(c.Polygon,{transform:"translate(1.500000, 12.000000) rotate(-90.000000) translate(-1.500000, -12.000000) ",points:"1.5 10.5 4.5 13.5 -1.5 13.5"})))),(0,l.createElement)(c.SVG,{className:"icon-carousel-slide",width:"26px",height:"18px",viewBox:"0 0 26 18",version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink"},(0,l.createElement)(c.G,{strokeWidth:"1"},(0,l.createElement)(c.G,{transform:"translate(0.000000, -3.000000)"},(0,l.createElement)(c.Path,{d:"M20,5 L20,19 L6,19 L6,5 L20,5 L20,5 Z M20,3 L6,3 C4.9,3 4,3.9 4,5 L4,19 C4,20.1 4.9,21 6,21 L20,21 C21.1,21 22,20.1 22,19 L22,5 C22,3.9 21.1,3 20,3 Z",fillRule:"nonzero"}),(0,l.createElement)(c.Polygon,{fillRule:"nonzero",points:"15.14 12 12.14 15.7645914 10 13.2451362 7 17 19 17"}),(0,l.createElement)(c.Rect,{x:"7",y:"9",width:"12",height:"1"}),(0,l.createElement)(c.Rect,{x:"7",y:"7",width:"12",height:"1"})))),(0,l.createElement)(c.SVG,{fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},(0,l.createElement)(c.Path,{clipRule:"evenodd",d:"m19 7c0-.27614-.2239-.5-.5-.5h-13c-.27614 0-.5.22386-.5.5v4.5c0 .2761.22386.5.5.5h13c.2761 0 .5-.2239.5-.5zm-.125 10h-13.75c-.06904 0-.125.056-.125.125v1.75c0 .069.05596.125.125.125h13.75c.069 0 .125-.056.125-.125v-1.75c0-.069-.056-.125-.125-.125zm-13.75-13.5c-.89746 0-1.625.72754-1.625 1.625v6.75c0 .8975.72754 1.625 1.625 1.625h13.75c.8975 0 1.625-.7275 1.625-1.625v-6.75c0-.89746-.7275-1.625-1.625-1.625zm0 12c-.89746 0-1.625.7275-1.625 1.625v1.75c0 .8975.72754 1.625 1.625 1.625h13.75c.8975 0 1.625-.7275 1.625-1.625v-1.75c0-.8975-.7275-1.625-1.625-1.625z",fill:"currentColor",fillRule:"evenodd"})),(0,l.createElement)(c.SVG,{fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},(0,l.createElement)(c.Path,{d:"m19 9c0-.27614-.2239-.5-.5-.5h-13c-.27614 0-.5.22386-.5.5v7.5c0 .2761.22386.5.5.5h13c.2761 0 .5-.2239.5-.5zm-13.875-3.5c-.89746 0-1.625.72754-1.625 1.625v9.75c0 .8975.72754 1.625 1.625 1.625h13.75c.8975 0 1.625-.7275 1.625-1.625v-9.75c0-.89746-.7275-1.625-1.625-1.625z",fill:"currentColor",fillRule:"evenodd"}))),{name:i}=((0,l.createElement)(c.SVG,{width:"24px",height:"24px",viewBox:"0 0 24 24",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},(0,l.createElement)(c.Path,{d:"M20,12 L4,12 L4,13.5 L20,13.5 L20,12 Z M10,6.5 L4,6.5 L4,8 L10,8 L10,6.5 Z M20,17.5 L4,17.5 L4,19 L20,19 L20,17.5 Z M20,5.62462724 L16.000015,9 L12,5.62462724 L12.9791165,4.5 L16.000015,7.04920972 L19.0208935,4.5 L20,5.62462724 Z"})),t);(0,e.registerBlockType)(i,{...t,icon:a,edit:function({attributes:e,setAttributes:t,clientId:c,context:a}){const{title:i,id:s}=e,{level:m}=a,w="h"+m,d=(0,n.useBlockProps)({className:"wp-block-pulsar-accordion__item"});(0,o.useEffect)((()=>{const e="pulsar-accordion-"+c.slice(2,9).replace("-","");t({id:e})}),[c,s,t]);const h=(0,n.useInnerBlocksProps)({className:"wp-block-pulsar-accordion__panel"},{orientation:"vertical",__experimentalCaptureToolbars:!0,templateInsertUpdatesSelection:!1});return(0,l.createElement)("div",{...d},(0,l.createElement)(w,{className:"wp-block-pulsar-accordion__heading"},(0,l.createElement)("button",{className:"wp-block-pulsar-accordion__trigger"},(0,l.createElement)(n.RichText,{tagName:"span",className:"wp-block-pulsar-accordion__title",allowedFormats:["core/bold","core/italic"],onChange:e=>t({title:e}),value:i,placeholder:(0,r.__)("Add a title…","pulsar-blocks")}),(0,l.createElement)("span",{className:"wp-block-pulsar-accordion__icon"}))),(0,l.createElement)("div",{...h}))},save:()=>(0,l.createElement)(n.InnerBlocks.Content,null)})})(); \ No newline at end of file +(()=>{"use strict";const e=window.wp.blocks,t=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"pulsar/accordion-item","version":"0.1.0","title":"Accordion Item","category":"design","parent":["pulsar/accordion"],"supports":{"inserter":false,"reusable":false,"html":false},"attributes":{"title":{"type":"string","selector":".wp-block-pulsar-accordion__heading"},"id":{"type":"string","default":""}},"usesContext":["level"],"textdomain":"pulsar-blocks","editorScript":"file:./index.js","render":"file:./render.php"}'),l=window.React,n=window.wp.blockEditor,c=(window.wp.url,window.wp.element),r=(window.wp.compose,window.wp.i18n),o=window.wp.components,a=((0,l.createElement)(o.SVG,{xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",fillRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:"2",clipRule:"evenodd",viewBox:"0 0 24 24"},(0,l.createElement)(o.Path,{d:"M18.003 19.399H5.931a.11.11 0 0 0-.11.11v1.537c0 .06.049.11.11.11h12.072a.11.11 0 0 0 .11-.11v-1.537a.11.11 0 0 0-.11-.11ZM5.931 18.082c-.788 0-1.427.639-1.427 1.427v1.537c0 .788.639 1.427 1.427 1.427h12.072c.789 0 1.427-.639 1.427-1.427v-1.537c0-.788-.638-1.427-1.427-1.427H5.931Z"}),(0,l.createElement)(o.Path,{fillRule:"nonzero",d:"M17.837 3.191v11.647H6.19V3.191h11.647Zm0-1.664H6.19c-.915 0-1.663.749-1.663 1.664v11.647c0 .915.748 1.663 1.663 1.663h11.647c.915 0 1.664-.748 1.664-1.663V3.191a1.67 1.67 0 0 0-1.664-1.664Z"}),(0,l.createElement)(o.Path,{fillRule:"nonzero",d:"m13.794 9.014-2.496 3.132-1.78-2.096-2.496 3.124h9.983l-3.211-4.16Z"}),(0,l.createElement)(o.Path,{d:"M7.022 6.519h9.983v.832H7.022zM7.022 4.855h9.983v.832H7.022z"}),(0,l.createElement)(o.Path,{fillRule:"nonzero",d:"M22.476 9.014 19.98 11.51V6.519l2.496 2.495ZM1.524 9.014 4.02 6.519v4.991L1.524 9.014Z"})),(0,l.createElement)(o.SVG,{className:"icon-carousel",width:"26px",height:"18px",viewBox:"0 0 26 18",version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink"},(0,l.createElement)(o.G,{strokeWidth:"1"},(0,l.createElement)(o.G,{transform:"translate(0.000000, -3.000000)"},(0,l.createElement)(o.Path,{d:"M20,5 L20,19 L6,19 L6,5 L20,5 L20,5 Z M20,3 L6,3 C4.9,3 4,3.9 4,5 L4,19 C4,20.1 4.9,21 6,21 L20,21 C21.1,21 22,20.1 22,19 L22,5 C22,3.9 21.1,3 20,3 Z",fillRule:"nonzero"}),(0,l.createElement)(o.Polygon,{fillRule:"nonzero",points:"15.14 12 12.14 15.7645914 10 13.2451362 7 17 19 17"}),(0,l.createElement)(o.Rect,{x:"7",y:"9",width:"12",height:"1"}),(0,l.createElement)(o.Rect,{x:"7",y:"7",width:"12",height:"1"}),(0,l.createElement)(o.Polygon,{transform:"translate(24.500000, 12.000000) rotate(-270.000000) translate(-24.500000, -12.000000) ",points:"24.5 10.5 27.5 13.5 21.5 13.5"}),(0,l.createElement)(o.Polygon,{transform:"translate(1.500000, 12.000000) rotate(-90.000000) translate(-1.500000, -12.000000) ",points:"1.5 10.5 4.5 13.5 -1.5 13.5"})))),(0,l.createElement)(o.SVG,{className:"icon-carousel-slide",width:"26px",height:"18px",viewBox:"0 0 26 18",version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink"},(0,l.createElement)(o.G,{strokeWidth:"1"},(0,l.createElement)(o.G,{transform:"translate(0.000000, -3.000000)"},(0,l.createElement)(o.Path,{d:"M20,5 L20,19 L6,19 L6,5 L20,5 L20,5 Z M20,3 L6,3 C4.9,3 4,3.9 4,5 L4,19 C4,20.1 4.9,21 6,21 L20,21 C21.1,21 22,20.1 22,19 L22,5 C22,3.9 21.1,3 20,3 Z",fillRule:"nonzero"}),(0,l.createElement)(o.Polygon,{fillRule:"nonzero",points:"15.14 12 12.14 15.7645914 10 13.2451362 7 17 19 17"}),(0,l.createElement)(o.Rect,{x:"7",y:"9",width:"12",height:"1"}),(0,l.createElement)(o.Rect,{x:"7",y:"7",width:"12",height:"1"})))),(0,l.createElement)(o.SVG,{fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},(0,l.createElement)(o.Path,{clipRule:"evenodd",d:"m19 7c0-.27614-.2239-.5-.5-.5h-13c-.27614 0-.5.22386-.5.5v4.5c0 .2761.22386.5.5.5h13c.2761 0 .5-.2239.5-.5zm-.125 10h-13.75c-.06904 0-.125.056-.125.125v1.75c0 .069.05596.125.125.125h13.75c.069 0 .125-.056.125-.125v-1.75c0-.069-.056-.125-.125-.125zm-13.75-13.5c-.89746 0-1.625.72754-1.625 1.625v6.75c0 .8975.72754 1.625 1.625 1.625h13.75c.8975 0 1.625-.7275 1.625-1.625v-6.75c0-.89746-.7275-1.625-1.625-1.625zm0 12c-.89746 0-1.625.7275-1.625 1.625v1.75c0 .8975.72754 1.625 1.625 1.625h13.75c.8975 0 1.625-.7275 1.625-1.625v-1.75c0-.8975-.7275-1.625-1.625-1.625z",fill:"currentColor",fillRule:"evenodd"})),(0,l.createElement)(o.SVG,{fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},(0,l.createElement)(o.Path,{d:"m19 9c0-.27614-.2239-.5-.5-.5h-13c-.27614 0-.5.22386-.5.5v7.5c0 .2761.22386.5.5.5h13c.2761 0 .5-.2239.5-.5zm-13.875-3.5c-.89746 0-1.625.72754-1.625 1.625v9.75c0 .8975.72754 1.625 1.625 1.625h13.75c.8975 0 1.625-.7275 1.625-1.625v-9.75c0-.89746-.7275-1.625-1.625-1.625z",fill:"currentColor",fillRule:"evenodd"}))),{name:i}=((0,l.createElement)(o.SVG,{width:"24px",height:"24px",viewBox:"0 0 24 24",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},(0,l.createElement)(o.Path,{d:"M20,12 L4,12 L4,13.5 L20,13.5 L20,12 Z M10,6.5 L4,6.5 L4,8 L10,8 L10,6.5 Z M20,17.5 L4,17.5 L4,19 L20,19 L20,17.5 Z M20,5.62462724 L16.000015,9 L12,5.62462724 L12.9791165,4.5 L16.000015,7.04920972 L19.0208935,4.5 L20,5.62462724 Z"})),t);(0,e.registerBlockType)(i,{...t,icon:a,edit:function({attributes:e,setAttributes:t,clientId:o,context:a}){const{title:i,id:s}=e,{level:m}=a,w="h"+m,d=(0,n.useBlockProps)({className:"wp-block-pulsar-accordion__item"});(0,c.useEffect)((()=>{const e="pulsar-accordion-"+o.slice(2,9).replace("-","");t({id:e})}),[o,s,t]);const p=(0,n.useInnerBlocksProps)({className:"wp-block-pulsar-accordion__panel-inner"},{orientation:"vertical",__experimentalCaptureToolbars:!0,templateInsertUpdatesSelection:!1});return(0,l.createElement)("div",{...d},(0,l.createElement)(w,{className:"wp-block-pulsar-accordion__heading"},(0,l.createElement)("button",{className:"wp-block-pulsar-accordion__trigger"},(0,l.createElement)(n.RichText,{tagName:"span",className:"wp-block-pulsar-accordion__title",allowedFormats:["core/bold","core/italic"],onChange:e=>t({title:e}),value:i,placeholder:(0,r.__)("Add a title…","pulsar-blocks")}),(0,l.createElement)("span",{className:"wp-block-pulsar-accordion__icon"}))),(0,l.createElement)("div",{className:"wp-block-pulsar-accordion__panel"},(0,l.createElement)("div",{...p})))},save:()=>(0,l.createElement)(n.InnerBlocks.Content,null)})})(); \ No newline at end of file diff --git a/dist/accordion-item/render.php b/dist/accordion-item/render.php index 4015fb0..c9e05b6 100644 --- a/dist/accordion-item/render.php +++ b/dist/accordion-item/render.php @@ -40,7 +40,9 @@ class="wp-block-pulsar-accordion__title" aria-labelledby="-title" class="wp-block-pulsar-accordion__panel" > - +
+ +
diff --git a/pulsar-blocks.php b/pulsar-blocks.php index 3c580d0..d5f4a16 100644 --- a/pulsar-blocks.php +++ b/pulsar-blocks.php @@ -4,7 +4,7 @@ * Description: A collection of blocks we use at eighteen73. * Requires at least: 6.3 * Requires PHP: 7.4 - * Version: 0.8.1 + * Version: 0.8.2 * Author: eighteen73 * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html diff --git a/src/accordion-item/edit.js b/src/accordion-item/edit.js index 3ff309c..6155bc4 100644 --- a/src/accordion-item/edit.js +++ b/src/accordion-item/edit.js @@ -41,7 +41,7 @@ export default function Edit({ attributes, setAttributes, clientId, context }) { const innerBlocksProps = useInnerBlocksProps( { - className: 'wp-block-pulsar-accordion__panel', + className: 'wp-block-pulsar-accordion__panel-inner', }, { orientation: 'vertical', @@ -67,7 +67,9 @@ export default function Edit({ attributes, setAttributes, clientId, context }) { -
+
+
+
); } diff --git a/src/accordion-item/render.php b/src/accordion-item/render.php index 4015fb0..c9e05b6 100644 --- a/src/accordion-item/render.php +++ b/src/accordion-item/render.php @@ -40,7 +40,9 @@ class="wp-block-pulsar-accordion__title" aria-labelledby="-title" class="wp-block-pulsar-accordion__panel" > - +
+ +