From cf20bfdf48af111e1cc8d347c31ec0e0668cb23c Mon Sep 17 00:00:00 2001 From: rivanuff Date: Fri, 9 Jan 2026 15:36:24 +0100 Subject: [PATCH] feat: wcag-proof tabs and tabs-item block. deprecated still todo --- build/Blocks/tabs-item/block.json | 2 +- build/Blocks/tabs-item/index.asset.php | 2 +- build/Blocks/tabs-item/index.js | 2 +- build/Blocks/tabs/block.json | 2 +- build/Blocks/tabs/frontend.asset.php | 2 +- build/Blocks/tabs/frontend.js | 2 +- build/Blocks/tabs/index.asset.php | 2 +- build/Blocks/tabs/index.js | 2 +- src/Blocks/tabs-item/block.json | 4 +- src/Blocks/tabs-item/save.js | 40 +++--- src/Blocks/tabs/block.json | 4 +- src/Blocks/tabs/frontend.js | 170 +++++++++++++++++-------- src/Blocks/tabs/save.js | 13 +- 13 files changed, 153 insertions(+), 94 deletions(-) diff --git a/build/Blocks/tabs-item/block.json b/build/Blocks/tabs-item/block.json index cea17bf..50ef8ce 100644 --- a/build/Blocks/tabs-item/block.json +++ b/build/Blocks/tabs-item/block.json @@ -2,7 +2,7 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "yard/tabs-item", - "version": "0.1.1", + "version": "0.2.0", "title": "Tabblad", "category": "yard", "description": "Tabblad item.", diff --git a/build/Blocks/tabs-item/index.asset.php b/build/Blocks/tabs-item/index.asset.php index 59736b5..0878e92 100644 --- a/build/Blocks/tabs-item/index.asset.php +++ b/build/Blocks/tabs-item/index.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => 'c31690ab94c9638acdb3'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => '015973d194c36a3f3979'); diff --git a/build/Blocks/tabs-item/index.js b/build/Blocks/tabs-item/index.js index 2740edb..b8aa666 100644 --- a/build/Blocks/tabs-item/index.js +++ b/build/Blocks/tabs-item/index.js @@ -1 +1 @@ -(()=>{"use strict";var e,t={871:()=>{const e=window.wp.blocks,t=window.wp.blockEditor,n=window.wp.compose,s=window.wp.components,a=window.wp.element,r=window.wp.hooks,o=window.wp.i18n,i=window.wp.data,l=window.wp.editor,c=(window.wp.coreData,()=>{const{clientId:e}=(0,t.useBlockEditContext)(),n=(0,i.useSelect)((n=>n(t.store).getBlockParents(e))).at(-1),s=(0,i.useSelect)((e=>e(t.store).getBlock(n))),r=(0,i.useSelect)((e=>e(t.store).getBlockAttributes(n))),{updateBlockAttributes:o,selectBlock:l}=(0,i.useDispatch)(t.store);return{parentBlock:s,parentAttributes:r,setParentAttributes:(0,a.useCallback)((e=>{o(n,e)}),[o,n]),selectParentBlock:(0,a.useCallback)((()=>{l(n)}),[l,n])}}),d=window.ReactJSXRuntime,u=((0,n.createHigherOrderComponent)((e=>t=>{const{media:n}=t;if(!n)return(0,d.jsx)(e,{...t});const{currentPostType:c}={currentPostType:(0,i.useSelect)((e=>e(l.store).getCurrentPostType()))},[u,p]=(e=>{const t=(0,i.useSelect)((e=>e(l.store).getEditedPostAttribute("meta"))),{editPost:n}=(0,i.useDispatch)(l.store),s=(0,a.useCallback)((t=>n({meta:{[e]:t}})),[n,e]);return[t?.[e],s]})("featured_image_focal_point"),h=(0,r.applyFilters)("yard.featured-image-focal-point-picker-allowed-post-types",[]),b=(0,a.useCallback)(((e={x:.5,y:.5})=>{p(e)}),[p]);return(0,a.useEffect)((()=>{0===u?.length&&b()}),[u,b]),h.includes(c)&&u&&n?.source_url?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(e,{...t}),(0,d.jsx)("div",{style:{marginTop:"1rem"},children:(0,d.jsx)(s.FocalPointPicker,{label:(0,o.__)("Kies een focuspunt voor de uitgelichte afbeelding."),url:n?.source_url,value:u,onChange:b,onDrag:b})})]}):(0,d.jsx)(e,{...t})}),"FeaturedImageFocalPointPicker"),e=>{const{attributes:t}=e,{icon:n,iconAltText:s}=t;return(0,d.jsx)("i",{className:`wp-block-yard-icon-component fa-fw ${n} `,title:s||null,"aria-hidden":"true"})}),p=window.wp.notices,h=({handleRemove:e})=>(0,d.jsx)(s.Button,{variant:"secondary",onClick:e,className:"icon-picker-control-delete-icon-btn",isDestructive:!0,children:"Verwijder icoon"}),b=({searchResults:e,handleIconClick:t})=>(0,d.jsxs)("div",{className:"icon-picker-control-results-container",children:[e?.map(((e,n)=>(0,d.jsx)("div",{className:"icon-picker-control-icon-btn-container",children:(0,d.jsx)(s.Button,{onClick:()=>t(e),children:(0,d.jsx)("i",{className:e})})},n))),!e?.length&&(0,d.jsx)("p",{children:(0,o.__)("Er zijn geen iconen gevonden")})]}),y=({onChange:e,icon:t,displayIconPreview:n=!0,displayAsPopover:l=!0,displayDeleteIcon:c=!1,handleRemove:u})=>{const[y,g]=(0,a.useState)(!1),[m,k]=(0,a.useState)(""),[f,x]=(0,a.useState)([]),[v,w]=(0,a.useState)(),{createNotice:j}=(0,i.useDispatch)(p.store),_=(0,r.applyFilters)("yard.fontawesome-family-styles",[{family:"classic",style:"solid"},{family:"classic",style:"regular"},{family:"classic",style:"light"},{family:"classic",style:"thin"},{family:"classic",style:"brands"},{family:"duotone",style:"solid"},{family:"sharp",style:"solid"},{family:"sharp",style:"regular"},{family:"sharp",style:"light"},{family:"sharp",style:"thin"}]),B=()=>{j("error",(0,o.__)("Momenteel kunnen er geen iconen worden opgehaald, probeer het later nog een keer."),{isDismissible:!0,type:"snackbar",id:"icon-picker-control-error"})},C=t=>{e(t),k((()=>"")),g((()=>!1))};return(0,d.jsxs)(d.Fragment,{children:[n&&t&&(0,d.jsx)("i",{className:t+" icon-picker-control-preview-icon"}),(0,d.jsx)(s.SearchControl,{placeholder:(0,o.__)("Zoek een icoon"),value:m,help:(0,o.__)("Gebruik Engelse termen om een icoon te zoeken."),onChange:e=>{k(e),(async e=>{try{const t=await(async e=>{const t=`{ search(version: "6.x", first: 100, query: "${e}")\n\t\t{\n\t\t\tid\n\t\t\tfamilyStylesByLicense {\n\t\t\t\tfree {\n\t\t\t\t\tfamily\n\t\t\t\t\tstyle\n\t\t\t\t}\n\t\t\t\tpro {\n\t\t\t\t\tfamily\n\t\t\t\t\tstyle\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}`;try{return(await fetch("https://api.fontawesome.com",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({query:t})})).json()}catch(e){throw new Error(e)}})(e);if(!t)return;const n=t?.data?.search.reduce(((e,t)=>(((e,t)=>(e=>{const t=e.familyStylesByLicense.free,n=e.familyStylesByLicense.pro,s=t.concat(n);return s.filter(((e,t)=>s.findIndex((t=>t.family===e.family&&t.style===e.style))===t))})(e).filter((e=>((e,t)=>t.some((t=>t.family===e.family&&t.style===e.style)))(e,t))).map((t=>`fa-${t.family} fa-${t.style} fa-${e.id}`)))(t,_).forEach((t=>{e.push(t)})),e)),[]);if(!n)return;x(n),g(!0)}catch(e){return B()}})(e)},ref:w}),l&&m&&y&&(0,d.jsx)(s.Popover,{anchor:v,title:(0,o.__)("Kies een icoon"),onClose:()=>g(!1),focusOnMount:!1,children:(0,d.jsx)(b,{searchResults:f,handleIconClick:C})}),!l&&m&&(0,d.jsx)(b,{searchResults:f,handleIconClick:C}),c&&t&&(0,d.jsx)(h,{handleRemove:u})]})},g=({icon:e,onChange:t,displayDeleteIcon:n=!1,handleRemove:s})=>(0,d.jsx)(y,{icon:e,onChange:t,displayIconPreview:!0,displayAsPopover:!0,displayDeleteIcon:n,handleRemove:s}),m=({icon:e,onChange:n})=>(0,d.jsx)(t.BlockControls,{children:(0,d.jsx)(s.Dropdown,{contentClassName:"icon-picker-control-popover",renderToggle:({isOpen:e,onToggle:t})=>(0,d.jsx)(s.ToolbarGroup,{children:(0,d.jsx)(s.ToolbarButton,{onClick:t,"aria-expanded":e,children:(0,o.__)("Kies icoon")})}),renderContent:()=>(0,d.jsx)(y,{icon:e,onChange:n,displayIconPreview:!1,displayAsPopover:!1})})}),k=[{attributes:{headingLevel:{type:"string",default:"h3"},headingText:{type:"string",default:""},icon:{type:"string",default:""},iconAltText:{type:"string",default:""},id:{type:"string"}},save:e=>{const{attributes:n}=e,{headingLevel:s,headingText:a,icon:r,id:o}=n,i=s;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(i,{...t.useBlockProps.save({className:"wp-block-yard-tabs-item__heading"}),children:(0,d.jsxs)("button",{id:`tabs-item-button-${o}`,className:"wp-block-yard-tabs-item__button","aria-controls":`tabs-item-panel-${o}`,"aria-selected":"false",children:[r&&(0,d.jsx)(u,{...e}),a]})}),(0,d.jsx)("div",{...t.useBlockProps.save({className:"wp-block-yard-tabs-item__panel"}),id:`tabs-item-panel-${o}`,"aria-hidden":"true","aria-labelledby":`tabs-item-button-${o}`,children:(0,d.jsx)(t.InnerBlocks.Content,{})})]})}}],f=e=>{const{attributes:n,setAttributes:a,enableIcon:r}=e,{icon:i,iconAltText:l}=n,{selectParentBlock:u}=c();return(0,d.jsxs)(t.InspectorControls,{children:[r&&(0,d.jsxs)(s.PanelBody,{title:(0,o.__)("Icoon instellingen","yard-gutenberg"),children:[(0,d.jsx)(g,{icon:i,onChange:e=>{void 0!==e&&a({icon:e})},displayDeleteIcon:!0,handleRemove:()=>a({icon:""})}),(0,d.jsx)(s.TextControl,{label:(0,o.__)("Alternatieve tekst","yard-gutenberg"),value:l,onChange:e=>a({iconAltText:e}),help:(0,o.__)("Voeg een alternatieve tekst toe als een icoon betekenis heeft.","yard-gutenberg")})]}),(0,d.jsxs)(s.PanelBody,{title:(0,o.__)("Toegankelijkheid","yard-gutenberg"),initialOpen:!1,children:[(0,d.jsx)("p",{children:(0,o.__)("Pas de koptekst niveaus aan via het hoofdblok (Tabbladen).","yard-gutenberg")}),(0,d.jsx)(s.Button,{variant:"secondary",onClick:u,children:(0,o.__)("Selecteer hoofdblok (Tabbladen)","yard-gutenberg")})]})]})},x=[["core/paragraph",{placeholder:(0,o.__)("Vul hier de tabblad inhoud in","yard-gutenberg")}]],v={src:(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:(0,d.jsx)("path",{d:"M64 64C46.3 64 32 78.3 32 96V416c0 17.7 14.3 32 32 32H448c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H291.9c-17 0-33.3-6.7-45.3-18.7L210.7 73.4c-6-6-14.1-9.4-22.6-9.4H64zM0 96C0 60.7 28.7 32 64 32H188.1c17 0 33.3 6.7 45.3 18.7l35.9 35.9c6 6 14.1 9.4 22.6 9.4H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"})}),foreground:"#00a49e"},w=JSON.parse('{"UU":"yard/tabs-item"}');(0,e.registerBlockType)(w.UU,{deprecated:k,edit:e=>{const{attributes:n,clientId:s,context:o,setAttributes:l,isSelected:p}=e,{headingText:h,icon:b,id:y}=n,g=(0,r.applyFilters)("yard.tabs-item-enable-icon",!1),[k,v]=(0,a.useState)(!1),{currentBlockHasSelectedInnerBlock:w}=(()=>{const{clientId:e}=(0,t.useBlockEditContext)(),n=(0,i.useSelect)((n=>n(t.store).getBlock(e))),s=(0,a.useMemo)((()=>{var e;return null!==(e=n.innerBlocks)&&void 0!==e?e:[]}),[n.innerBlocks]),r=(0,i.useSelect)((e=>e(t.store).getBlockAttributes(n.clientId))),o=(0,i.useSelect)((e=>e(t.store).hasSelectedInnerBlock(n.clientId,!0))),{updateBlockAttributes:l}=(0,i.useDispatch)(t.store),c=(0,a.useCallback)((e=>{s.forEach((t=>l(t.clientId,e)))}),[s,l]);return{currentBlock:n,currentBlockAttributes:r,currentBlockInnerBlocks:s,currentBlockHasSelectedInnerBlock:o,setAllCurrentBlockInnerBlocksAttributes:c}})(),{parentAttributes:j,setParentAttributes:_}=c(),{getClientIdsWithDescendants:B,getBlockAttributes:C}=(0,i.useSelect)((e=>({getClientIdsWithDescendants:e("core/block-editor").getClientIdsWithDescendants(),getBlockAttributes:e("core/block-editor").getBlockAttributes}))),I=(0,a.useCallback)((()=>{const e=B?.some((e=>{const{id:t}=C(e);return s!==e&&y===t}));return!y||y.length<=0||e?s:y}),[s,y,B,C]);return(0,a.useEffect)((()=>{l({id:I()})}),[l,I]),(0,a.useEffect)((()=>{var e;l({headingLevel:null!==(e=j.headingLevel)&&void 0!==e?e:"h3"})}),[l,j.headingLevel]),(0,a.useEffect)((()=>{v(o["yard/tabs-current-tab"]===y)}),[o,y]),(0,a.useEffect)((()=>{(p||w)&&(_({currentTab:I()}),v(!0))}),[p,w,_,I]),(0,a.useEffect)((()=>{g||l({icon:"",iconAltText:""})}),[l,g]),(0,d.jsxs)(d.Fragment,{children:[g&&(0,d.jsx)(m,{icon:b,onChange:e=>{void 0!==e&&l({icon:e})}}),(0,d.jsx)(f,{...e,enableIcon:g}),(0,d.jsx)("div",{className:"wp-block-yard-tabs-item__heading",children:(0,d.jsxs)("div",{className:"wp-block-yard-tabs-item__button "+(k?"active":""),children:[b&&(0,d.jsx)(u,{...e}),(0,d.jsx)(t.PlainText,{...(0,t.useBlockProps)({className:"wp-block-yard-tabs-item__heading-input"}),onChange:e=>l({headingText:e}),value:h})]})}),(0,d.jsx)("div",{className:"wp-block-yard-tabs-item__panel",style:{display:k?"block":"none"},children:(0,d.jsx)(t.InnerBlocks,{template:x})})]})},icon:v,save:e=>{const{attributes:n}=e,{headingLevel:s,headingText:a,icon:r,id:o}=n,i=s;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(i,{...t.useBlockProps.save({className:"wp-block-yard-tabs-item__heading"}),children:(0,d.jsxs)("button",{id:`tabs-item-button-${o}`,className:"wp-block-yard-tabs-item__button",role:"tab","aria-controls":`tabs-item-panel-${o}`,"aria-selected":"false",children:[r&&(0,d.jsx)(u,{...e}),a]})}),(0,d.jsx)("div",{...t.useBlockProps.save({className:"wp-block-yard-tabs-item__panel"}),id:`tabs-item-panel-${o}`,role:"tabpanel","aria-hidden":"true","aria-labelledby":`tabs-item-button-${o}`,children:(0,d.jsx)(t.InnerBlocks.Content,{})})]})},usesContext:["yard/tabs-current-tab"]})}},n={};function s(e){var a=n[e];if(void 0!==a)return a.exports;var r=n[e]={exports:{}};return t[e](r,r.exports,s),r.exports}s.m=t,e=[],s.O=(t,n,a,r)=>{if(!n){var o=1/0;for(d=0;d=r)&&Object.keys(s.O).every((e=>s.O[e](n[l])))?n.splice(l--,1):(i=!1,r0&&e[d-1][2]>r;d--)e[d]=e[d-1];e[d]=[n,a,r]},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={761:0,525:0};s.O.j=t=>0===e[t];var t=(t,n)=>{var a,r,[o,i,l]=n,c=0;if(o.some((t=>0!==e[t]))){for(a in i)s.o(i,a)&&(s.m[a]=i[a]);if(l)var d=l(s)}for(t&&t(n);cs(871)));a=s.O(a)})(); \ No newline at end of file +(()=>{"use strict";var e,t={871:()=>{const e=window.wp.blocks,t=window.wp.blockEditor,n=window.wp.compose,s=window.wp.components,a=window.wp.element,o=window.wp.hooks,r=window.wp.i18n,i=window.wp.data,l=window.wp.editor,c=(window.wp.coreData,()=>{const{clientId:e}=(0,t.useBlockEditContext)(),n=(0,i.useSelect)((n=>n(t.store).getBlockParents(e))).at(-1),s=(0,i.useSelect)((e=>e(t.store).getBlock(n))),o=(0,i.useSelect)((e=>e(t.store).getBlockAttributes(n))),{updateBlockAttributes:r,selectBlock:l}=(0,i.useDispatch)(t.store);return{parentBlock:s,parentAttributes:o,setParentAttributes:(0,a.useCallback)((e=>{r(n,e)}),[r,n]),selectParentBlock:(0,a.useCallback)((()=>{l(n)}),[l,n])}}),d=window.ReactJSXRuntime,u=((0,n.createHigherOrderComponent)((e=>t=>{const{media:n}=t;if(!n)return(0,d.jsx)(e,{...t});const{currentPostType:c}={currentPostType:(0,i.useSelect)((e=>e(l.store).getCurrentPostType()))},[u,p]=(e=>{const t=(0,i.useSelect)((e=>e(l.store).getEditedPostAttribute("meta"))),{editPost:n}=(0,i.useDispatch)(l.store),s=(0,a.useCallback)((t=>n({meta:{[e]:t}})),[n,e]);return[t?.[e],s]})("featured_image_focal_point"),h=(0,o.applyFilters)("yard.featured-image-focal-point-picker-allowed-post-types",[]),b=(0,a.useCallback)(((e={x:.5,y:.5})=>{p(e)}),[p]);return(0,a.useEffect)((()=>{0===u?.length&&b()}),[u,b]),h.includes(c)&&u&&n?.source_url?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(e,{...t}),(0,d.jsx)("div",{style:{marginTop:"1rem"},children:(0,d.jsx)(s.FocalPointPicker,{label:(0,r.__)("Kies een focuspunt voor de uitgelichte afbeelding."),url:n?.source_url,value:u,onChange:b,onDrag:b})})]}):(0,d.jsx)(e,{...t})}),"FeaturedImageFocalPointPicker"),e=>{const{attributes:t}=e,{icon:n,iconAltText:s}=t;return(0,d.jsx)("i",{className:`wp-block-yard-icon-component fa-fw ${n} `,title:s||null,"aria-hidden":"true"})}),p=window.wp.notices,h=({handleRemove:e})=>(0,d.jsx)(s.Button,{variant:"secondary",onClick:e,className:"icon-picker-control-delete-icon-btn",isDestructive:!0,children:"Verwijder icoon"}),b=({searchResults:e,handleIconClick:t})=>(0,d.jsxs)("div",{className:"icon-picker-control-results-container",children:[e?.map(((e,n)=>(0,d.jsx)("div",{className:"icon-picker-control-icon-btn-container",children:(0,d.jsx)(s.Button,{onClick:()=>t(e),children:(0,d.jsx)("i",{className:e})})},n))),!e?.length&&(0,d.jsx)("p",{children:(0,r.__)("Er zijn geen iconen gevonden")})]}),y=({onChange:e,icon:t,displayIconPreview:n=!0,displayAsPopover:l=!0,displayDeleteIcon:c=!1,handleRemove:u})=>{const[y,g]=(0,a.useState)(!1),[m,k]=(0,a.useState)(""),[f,x]=(0,a.useState)([]),[v,w]=(0,a.useState)(),{createNotice:j}=(0,i.useDispatch)(p.store),_=(0,o.applyFilters)("yard.fontawesome-family-styles",[{family:"classic",style:"solid"},{family:"classic",style:"regular"},{family:"classic",style:"light"},{family:"classic",style:"thin"},{family:"classic",style:"brands"},{family:"duotone",style:"solid"},{family:"sharp",style:"solid"},{family:"sharp",style:"regular"},{family:"sharp",style:"light"},{family:"sharp",style:"thin"}]),B=()=>{j("error",(0,r.__)("Momenteel kunnen er geen iconen worden opgehaald, probeer het later nog een keer."),{isDismissible:!0,type:"snackbar",id:"icon-picker-control-error"})},C=t=>{e(t),k((()=>"")),g((()=>!1))};return(0,d.jsxs)(d.Fragment,{children:[n&&t&&(0,d.jsx)("i",{className:t+" icon-picker-control-preview-icon"}),(0,d.jsx)(s.SearchControl,{placeholder:(0,r.__)("Zoek een icoon"),value:m,help:(0,r.__)("Gebruik Engelse termen om een icoon te zoeken."),onChange:e=>{k(e),(async e=>{try{const t=await(async e=>{const t=`{ search(version: "6.x", first: 100, query: "${e}")\n\t\t{\n\t\t\tid\n\t\t\tfamilyStylesByLicense {\n\t\t\t\tfree {\n\t\t\t\t\tfamily\n\t\t\t\t\tstyle\n\t\t\t\t}\n\t\t\t\tpro {\n\t\t\t\t\tfamily\n\t\t\t\t\tstyle\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}`;try{return(await fetch("https://api.fontawesome.com",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({query:t})})).json()}catch(e){throw new Error(e)}})(e);if(!t)return;const n=t?.data?.search.reduce(((e,t)=>(((e,t)=>(e=>{const t=e.familyStylesByLicense.free,n=e.familyStylesByLicense.pro,s=t.concat(n);return s.filter(((e,t)=>s.findIndex((t=>t.family===e.family&&t.style===e.style))===t))})(e).filter((e=>((e,t)=>t.some((t=>t.family===e.family&&t.style===e.style)))(e,t))).map((t=>`fa-${t.family} fa-${t.style} fa-${e.id}`)))(t,_).forEach((t=>{e.push(t)})),e)),[]);if(!n)return;x(n),g(!0)}catch(e){return B()}})(e)},ref:w}),l&&m&&y&&(0,d.jsx)(s.Popover,{anchor:v,title:(0,r.__)("Kies een icoon"),onClose:()=>g(!1),focusOnMount:!1,children:(0,d.jsx)(b,{searchResults:f,handleIconClick:C})}),!l&&m&&(0,d.jsx)(b,{searchResults:f,handleIconClick:C}),c&&t&&(0,d.jsx)(h,{handleRemove:u})]})},g=({icon:e,onChange:t,displayDeleteIcon:n=!1,handleRemove:s})=>(0,d.jsx)(y,{icon:e,onChange:t,displayIconPreview:!0,displayAsPopover:!0,displayDeleteIcon:n,handleRemove:s}),m=({icon:e,onChange:n})=>(0,d.jsx)(t.BlockControls,{children:(0,d.jsx)(s.Dropdown,{contentClassName:"icon-picker-control-popover",renderToggle:({isOpen:e,onToggle:t})=>(0,d.jsx)(s.ToolbarGroup,{children:(0,d.jsx)(s.ToolbarButton,{onClick:t,"aria-expanded":e,children:(0,r.__)("Kies icoon")})}),renderContent:()=>(0,d.jsx)(y,{icon:e,onChange:n,displayIconPreview:!1,displayAsPopover:!1})})}),k=[{attributes:{headingLevel:{type:"string",default:"h3"},headingText:{type:"string",default:""},icon:{type:"string",default:""},iconAltText:{type:"string",default:""},id:{type:"string"}},save:e=>{const{attributes:n}=e,{headingLevel:s,headingText:a,icon:o,id:r}=n,i=s;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(i,{...t.useBlockProps.save({className:"wp-block-yard-tabs-item__heading"}),children:(0,d.jsxs)("button",{id:`tabs-item-button-${r}`,className:"wp-block-yard-tabs-item__button","aria-controls":`tabs-item-panel-${r}`,"aria-selected":"false",children:[o&&(0,d.jsx)(u,{...e}),a]})}),(0,d.jsx)("div",{...t.useBlockProps.save({className:"wp-block-yard-tabs-item__panel"}),id:`tabs-item-panel-${r}`,"aria-hidden":"true","aria-labelledby":`tabs-item-button-${r}`,children:(0,d.jsx)(t.InnerBlocks.Content,{})})]})}}],f=e=>{const{attributes:n,setAttributes:a,enableIcon:o}=e,{icon:i,iconAltText:l}=n,{selectParentBlock:u}=c();return(0,d.jsxs)(t.InspectorControls,{children:[o&&(0,d.jsxs)(s.PanelBody,{title:(0,r.__)("Icoon instellingen","yard-gutenberg"),children:[(0,d.jsx)(g,{icon:i,onChange:e=>{void 0!==e&&a({icon:e})},displayDeleteIcon:!0,handleRemove:()=>a({icon:""})}),(0,d.jsx)(s.TextControl,{label:(0,r.__)("Alternatieve tekst","yard-gutenberg"),value:l,onChange:e=>a({iconAltText:e}),help:(0,r.__)("Voeg een alternatieve tekst toe als een icoon betekenis heeft.","yard-gutenberg")})]}),(0,d.jsxs)(s.PanelBody,{title:(0,r.__)("Toegankelijkheid","yard-gutenberg"),initialOpen:!1,children:[(0,d.jsx)("p",{children:(0,r.__)("Pas de koptekst niveaus aan via het hoofdblok (Tabbladen).","yard-gutenberg")}),(0,d.jsx)(s.Button,{variant:"secondary",onClick:u,children:(0,r.__)("Selecteer hoofdblok (Tabbladen)","yard-gutenberg")})]})]})},x=[["core/paragraph",{placeholder:(0,r.__)("Vul hier de tabblad inhoud in","yard-gutenberg")}]],v={src:(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:(0,d.jsx)("path",{d:"M64 64C46.3 64 32 78.3 32 96V416c0 17.7 14.3 32 32 32H448c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H291.9c-17 0-33.3-6.7-45.3-18.7L210.7 73.4c-6-6-14.1-9.4-22.6-9.4H64zM0 96C0 60.7 28.7 32 64 32H188.1c17 0 33.3 6.7 45.3 18.7l35.9 35.9c6 6 14.1 9.4 22.6 9.4H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"})}),foreground:"#00a49e"},w=JSON.parse('{"UU":"yard/tabs-item"}');(0,e.registerBlockType)(w.UU,{deprecated:k,edit:e=>{const{attributes:n,clientId:s,context:r,setAttributes:l,isSelected:p}=e,{headingText:h,icon:b,id:y}=n,g=(0,o.applyFilters)("yard.tabs-item-enable-icon",!1),[k,v]=(0,a.useState)(!1),{currentBlockHasSelectedInnerBlock:w}=(()=>{const{clientId:e}=(0,t.useBlockEditContext)(),n=(0,i.useSelect)((n=>n(t.store).getBlock(e))),s=(0,a.useMemo)((()=>{var e;return null!==(e=n.innerBlocks)&&void 0!==e?e:[]}),[n.innerBlocks]),o=(0,i.useSelect)((e=>e(t.store).getBlockAttributes(n.clientId))),r=(0,i.useSelect)((e=>e(t.store).hasSelectedInnerBlock(n.clientId,!0))),{updateBlockAttributes:l}=(0,i.useDispatch)(t.store),c=(0,a.useCallback)((e=>{s.forEach((t=>l(t.clientId,e)))}),[s,l]);return{currentBlock:n,currentBlockAttributes:o,currentBlockInnerBlocks:s,currentBlockHasSelectedInnerBlock:r,setAllCurrentBlockInnerBlocksAttributes:c}})(),{parentAttributes:j,setParentAttributes:_}=c(),{getClientIdsWithDescendants:B,getBlockAttributes:C}=(0,i.useSelect)((e=>({getClientIdsWithDescendants:e("core/block-editor").getClientIdsWithDescendants(),getBlockAttributes:e("core/block-editor").getBlockAttributes}))),I=(0,a.useCallback)((()=>{const e=B?.some((e=>{const{id:t}=C(e);return s!==e&&y===t}));return!y||y.length<=0||e?s:y}),[s,y,B,C]);return(0,a.useEffect)((()=>{l({id:I()})}),[l,I]),(0,a.useEffect)((()=>{var e;l({headingLevel:null!==(e=j.headingLevel)&&void 0!==e?e:"h3"})}),[l,j.headingLevel]),(0,a.useEffect)((()=>{v(r["yard/tabs-current-tab"]===y)}),[r,y]),(0,a.useEffect)((()=>{(p||w)&&(_({currentTab:I()}),v(!0))}),[p,w,_,I]),(0,a.useEffect)((()=>{g||l({icon:"",iconAltText:""})}),[l,g]),(0,d.jsxs)(d.Fragment,{children:[g&&(0,d.jsx)(m,{icon:b,onChange:e=>{void 0!==e&&l({icon:e})}}),(0,d.jsx)(f,{...e,enableIcon:g}),(0,d.jsx)("div",{className:"wp-block-yard-tabs-item__heading",children:(0,d.jsxs)("div",{className:"wp-block-yard-tabs-item__button "+(k?"active":""),children:[b&&(0,d.jsx)(u,{...e}),(0,d.jsx)(t.PlainText,{...(0,t.useBlockProps)({className:"wp-block-yard-tabs-item__heading-input"}),onChange:e=>l({headingText:e}),value:h})]})}),(0,d.jsx)("div",{className:"wp-block-yard-tabs-item__panel",style:{display:k?"block":"none"},children:(0,d.jsx)(t.InnerBlocks,{template:x})})]})},icon:v,save:({attributes:e})=>{const{headingText:n,icon:s,id:a}=e;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("button",{"data-tab-button":!0,id:`tabs-item-button-${a}`,role:"tab",className:"wp-block-yard-tabs-item__button","aria-controls":`tabs-item-panel-${a}`,"aria-selected":"false",children:[s&&(0,d.jsx)(u,{icon:s}),n]}),(0,d.jsx)("div",{"data-tab-panel":!0,id:`tabs-item-panel-${a}`,role:"tabpanel",className:"wp-block-yard-tabs-item","aria-labelledby":`tabs-item-button-${a}`,hidden:!0,children:(0,d.jsx)(t.InnerBlocks.Content,{})})]})},usesContext:["yard/tabs-current-tab"]})}},n={};function s(e){var a=n[e];if(void 0!==a)return a.exports;var o=n[e]={exports:{}};return t[e](o,o.exports,s),o.exports}s.m=t,e=[],s.O=(t,n,a,o)=>{if(!n){var r=1/0;for(d=0;d=o)&&Object.keys(s.O).every((e=>s.O[e](n[l])))?n.splice(l--,1):(i=!1,o0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[n,a,o]},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={761:0,525:0};s.O.j=t=>0===e[t];var t=(t,n)=>{var a,o,[r,i,l]=n,c=0;if(r.some((t=>0!==e[t]))){for(a in i)s.o(i,a)&&(s.m[a]=i[a]);if(l)var d=l(s)}for(t&&t(n);cs(871)));a=s.O(a)})(); \ No newline at end of file diff --git a/build/Blocks/tabs/block.json b/build/Blocks/tabs/block.json index 42c72e9..8c68ef4 100644 --- a/build/Blocks/tabs/block.json +++ b/build/Blocks/tabs/block.json @@ -2,7 +2,7 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "yard/tabs", - "version": "0.1.1", + "version": "0.2.0", "title": "Tabbladen", "category": "yard", "description": "Groepeer gemakkelijk content in verschillende tabbladen.", diff --git a/build/Blocks/tabs/frontend.asset.php b/build/Blocks/tabs/frontend.asset.php index 210459b..3605b43 100644 --- a/build/Blocks/tabs/frontend.asset.php +++ b/build/Blocks/tabs/frontend.asset.php @@ -1 +1 @@ - array(), 'version' => 'accd9871540637703fab'); + array(), 'version' => '99efd052c3eb09c3183e'); diff --git a/build/Blocks/tabs/frontend.js b/build/Blocks/tabs/frontend.js index 84cb19b..ed02357 100644 --- a/build/Blocks/tabs/frontend.js +++ b/build/Blocks/tabs/frontend.js @@ -1 +1 @@ -(()=>{const t=()=>{const t=document.querySelectorAll(".wp-block-yard-tabs");t?.forEach((t=>{const s=t.dataset.defaultTab,o=t.querySelectorAll(".wp-block-yard-tabs-item__button"),l=t.querySelectorAll(".wp-block-yard-tabs-item__panel");e(o,l),r(t,s,o),""!==window.location.hash&&c(t,o,l),o.forEach((r=>{r.addEventListener("click",(()=>{e(o,l),a(t,r)}))}))}))},e=(t,e)=>{t?.forEach((t=>{t.setAttribute("aria-selected","false"),t.classList.remove("active")})),e?.forEach((t=>{t.setAttribute("aria-hidden","true"),t.classList.remove("active")}))},a=(t,e)=>{e?.setAttribute("aria-selected","true"),e?.classList.add("active");const a=t.querySelector(`#${e?.getAttribute("aria-controls")}`);a&&(a.setAttribute("aria-hidden","false"),a.classList.add("active"))},r=(t,e,r)=>{let c;e&&(c=t.querySelector(`#tabs-item-button-${e}`)),a(t,null!=c?c:r[0])},c=(t,r,c)=>{const s=t.querySelector(window.location.hash);if(s){const o=s.querySelector(".wp-block-yard-tabs-item__button");e(r,c),a(t,o)}};t(),window.addEventListener("hashchange",t,!1)})(); \ No newline at end of file +(()=>{const t=()=>{const t=document.querySelectorAll(".wp-block-yard-tabs");t?.forEach((t=>{const o=t.dataset.defaultTab,{tabButtons:i,tabPanels:l}=s(t);e(i,l),r(i,l,o),""!==window.location.hash&&n(i,l),i.forEach((t=>{t.addEventListener("click",(()=>{e(i,l),a(t,i,l)}))})),c(i)}))},e=(t,e)=>{t?.forEach((t=>{t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1"),t.classList.remove("active")})),e?.forEach((t=>{t.setAttribute("aria-hidden","true"),t.classList.remove("active")}))},a=(t,e,a)=>{const r=t.getAttribute("aria-controls"),n=a.find((t=>t.id===r));n&&(t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.classList.add("active"),a.forEach((t=>t.setAttribute("hidden","true"))),n.removeAttribute("hidden"),n.setAttribute("aria-hidden","false"),n.classList.add("active"))},r=(t,e,r)=>{let n=r?t.find((t=>t.id===`tabs-item-button-${r}`)):t[0];n||(n=t[0]),a(n,t,e),n.focus()},n=(t,r)=>{const n=document.querySelector(window.location.hash);if(!n)return;const s=n.querySelector("[data-tab-button]");s&&(e(t,r),a(s,t,r),s.focus())},s=t=>{const e=Array.from(t.querySelectorAll("[data-tab-button]")),a=Array.from(t.querySelectorAll("[data-tab-panel]")),r=t.querySelector('[role="tablist"]'),n=t.querySelector(".wp-block-yard-tabs__panels");return r||(r=document.createElement("div"),r.setAttribute("role","tablist"),t.prepend(r)),n||(n=document.createElement("div"),n.classList.add("wp-block-yard-tabs__panels"),t.appendChild(n)),e.forEach((t=>r.appendChild(t))),a.forEach((t=>n.appendChild(t))),{tabButtons:e,tabPanels:a,tabList:r,panelsContainer:n}},c=t=>{t.forEach(((e,a)=>{e.addEventListener("keydown",(e=>{let r=a;switch(e.key){case"ArrowRight":r=(a+1)%t.length,e.preventDefault();break;case"ArrowLeft":r=(a-1+t.length)%t.length,e.preventDefault();break;case"Home":r=0,e.preventDefault();break;case"End":r=t.length-1,e.preventDefault();break;default:return}t[r].focus(),t[r].click()}))}))};t(),window.addEventListener("hashchange",t,!1)})(); \ No newline at end of file diff --git a/build/Blocks/tabs/index.asset.php b/build/Blocks/tabs/index.asset.php index c704fb8..493454d 100644 --- a/build/Blocks/tabs/index.asset.php +++ b/build/Blocks/tabs/index.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => '3f3f1993678ce24e6bb3'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => 'b35152fb80d5d70982ed'); diff --git a/build/Blocks/tabs/index.js b/build/Blocks/tabs/index.js index c63974b..f64332d 100644 --- a/build/Blocks/tabs/index.js +++ b/build/Blocks/tabs/index.js @@ -1 +1 @@ -(()=>{"use strict";var e,t={78:()=>{const e=window.wp.blocks,t=window.wp.blockEditor,r=window.ReactJSXRuntime,n=[{attributes:{defaultTab:{type:"string",default:""}},save({attributes:e}){const{defaultTab:n}=e;return(0,r.jsx)("div",{...t.useBlockProps.save(),"data-default-tab":n,children:(0,r.jsx)(t.InnerBlocks.Content,{})})}}],l=window.wp.data,a=window.wp.element,o=()=>{const{clientId:e}=(0,t.useBlockEditContext)(),r=(0,l.useSelect)((r=>r(t.store).getBlock(e))),n=(0,a.useMemo)((()=>{var e;return null!==(e=r.innerBlocks)&&void 0!==e?e:[]}),[r.innerBlocks]),o=(0,l.useSelect)((e=>e(t.store).getBlockAttributes(r.clientId))),s=(0,l.useSelect)((e=>e(t.store).hasSelectedInnerBlock(r.clientId,!0))),{updateBlockAttributes:c}=(0,l.useDispatch)(t.store),i=(0,a.useCallback)((e=>{n.forEach((t=>c(t.clientId,e)))}),[n,c]);return{currentBlock:r,currentBlockAttributes:o,currentBlockInnerBlocks:n,currentBlockHasSelectedInnerBlock:s,setAllCurrentBlockInnerBlocksAttributes:i}},s=window.wp.editor,c=(window.wp.coreData,window.wp.components),i=window.wp.i18n,d=e=>{const{attributes:n,setAttributes:l}=e,{defaultTab:a,defaultTabEnabled:s,headingLevel:d}=n,{currentBlockInnerBlocks:u,setAllCurrentBlockInnerBlocksAttributes:b}=o();return(0,r.jsxs)(t.InspectorControls,{children:[(0,r.jsxs)(c.PanelBody,{title:(0,i.__)("Instellingen","yard-gutenberg"),children:[(0,r.jsx)(c.ToggleControl,{label:(0,i.__)("Actief tabblad opgeven","yard-gutenberg"),checked:s,onChange:()=>l({defaultTabEnabled:!s})}),s&&(0,r.jsx)(c.SelectControl,{label:(0,i.__)("Tabblad","yard-gutenberg"),value:a,options:u?.map((e=>({label:e.attributes.headingText,value:e.attributes.id}))),onChange:e=>{l({defaultTab:e})},help:(0,i.__)("Selecteer het tabblad dat standaard geopend moet zijn.","yard-gutenberg")})]}),(0,r.jsx)(c.PanelBody,{title:(0,i.__)("Toegankelijkheid","yard-gutenberg"),children:(0,r.jsx)(c.SelectControl,{label:(0,i.__)("Koptekst","yard-gutenberg"),value:d,options:[{label:"Geen",value:"div"},{label:"H2",value:"h2"},{label:"H3",value:"h3"},{label:"H4",value:"h4"},{label:"H5",value:"h5"},{label:"H6",value:"h6"}],onChange:e=>{l({headingLevel:e}),b({headingLevel:e})},help:(0,i.__)("Selecteer het koptekst niveau voor de titels van de tab items.","yard-gutenberg")})})]})},u=[["yard/tabs-item"]],b=["yard/tabs-item"],g=window.wp.compose,p=window.wp.hooks,k=((0,g.createHigherOrderComponent)((e=>t=>{const{media:n}=t;if(!n)return(0,r.jsx)(e,{...t});const{currentPostType:o}={currentPostType:(0,l.useSelect)((e=>e(s.store).getCurrentPostType()))},[d,u]=(e=>{const t=(0,l.useSelect)((e=>e(s.store).getEditedPostAttribute("meta"))),{editPost:r}=(0,l.useDispatch)(s.store),n=(0,a.useCallback)((t=>r({meta:{[e]:t}})),[r,e]);return[t?.[e],n]})("featured_image_focal_point"),b=(0,p.applyFilters)("yard.featured-image-focal-point-picker-allowed-post-types",[]),g=(0,a.useCallback)(((e={x:.5,y:.5})=>{u(e)}),[u]);return(0,a.useEffect)((()=>{0===d?.length&&g()}),[d,g]),b.includes(o)&&d&&n?.source_url?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e,{...t}),(0,r.jsx)("div",{style:{marginTop:"1rem"},children:(0,r.jsx)(c.FocalPointPicker,{label:(0,i.__)("Kies een focuspunt voor de uitgelichte afbeelding."),url:n?.source_url,value:d,onChange:g,onDrag:g})})]}):(0,r.jsx)(e,{...t})}),"FeaturedImageFocalPointPicker"),window.wp.notices,{src:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 576 512",children:(0,r.jsx)("path",{d:"M512 352H160c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32H277.5c8.5 0 16.6 3.4 22.6 9.4l26.5 26.5c18 18 42.4 28.1 67.9 28.1H512c17.7 0 32 14.3 32 32V320c0 17.7-14.3 32-32 32zM349.3 77.3L322.7 50.7c-12-12-28.3-18.7-45.3-18.7H160c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H394.5c-17 0-33.3-6.7-45.3-18.7zM32 112c0-8.8-7.2-16-16-16s-16 7.2-16 16V352c0 70.7 57.3 128 128 128H464c8.8 0 16-7.2 16-16s-7.2-16-16-16H128c-53 0-96-43-96-96V112z"})}),foreground:"#00a49e"}),h={to:[{type:"block",blocks:["yard/collapse"],transform:(t,r)=>{const n=r?.map((({attributes:t,innerBlocks:r})=>(0,e.createBlock)("yard/collapse-item",{headingLevel:t.headingLevel,headingText:t.headingText,icon:t.icon,iconAltText:t.iconAltText},r)));return(0,e.createBlock)("yard/collapse",{headingLevel:t.headingLevel},n)}}]};(0,e.registerBlockType)("yard/tabs",{deprecated:n,edit:e=>{const{attributes:n,setAttributes:s,clientId:c}=e,{currentTab:i,defaultTab:g,defaultTabEnabled:p}=n,{currentBlockInnerBlocks:k,currentBlockHasSelectedInnerBlock:h}=o(),{currentSelectedBlock:v,getClientIdsOfDescendants:f,getBlockAttributes:B}=(0,l.useSelect)((e=>({currentSelectedBlock:e("core/block-editor").getSelectedBlockClientId(),getClientIdsOfDescendants:e("core/block-editor").getClientIdsOfDescendants(c),getBlockAttributes:e("core/block-editor").getBlockAttributes}))),w=(0,a.useCallback)((e=>f?.some((t=>{const{id:r}=B(t);return e===r}))),[f,B]);return(0,a.useEffect)((()=>{if(!v&&!h)return p&&g?s({currentTab:g}):void(k.length>0&&s({defaultTab:k.at(0)?.attributes.id,currentTab:k.at(0)?.attributes.id}))}),[g,p,v,k,h,s]),(0,a.useEffect)((()=>{const e=w(i),t=w(g);e&&t||s({defaultTab:k.at(0)?.attributes.id,currentTab:k.at(0)?.attributes.id})}),[g,i,w,k,s]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(d,{...e}),(0,r.jsx)("div",{...(0,t.useBlockProps)(),children:(0,r.jsx)(t.InnerBlocks,{allowedBlocks:b,renderAppender:()=>(0,r.jsx)(t.InnerBlocks.ButtonBlockAppender,{}),template:u})})]})},icon:k,save:e=>{const{attributes:n}=e,{defaultTab:l}=n;return(0,r.jsx)("div",{...t.useBlockProps.save(),role:"tablist","data-default-tab":l,children:(0,r.jsx)(t.InnerBlocks.Content,{})})},transforms:h,providesContext:{"yard/tabs-current-tab":"currentTab"}})}},r={};function n(e){var l=r[e];if(void 0!==l)return l.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.m=t,e=[],n.O=(t,r,l,a)=>{if(!r){var o=1/0;for(d=0;d=a)&&Object.keys(n.O).every((e=>n.O[e](r[c])))?r.splice(c--,1):(s=!1,a0&&e[d-1][2]>a;d--)e[d]=e[d-1];e[d]=[r,l,a]},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={41:0,781:0};n.O.j=t=>0===e[t];var t=(t,r)=>{var l,a,[o,s,c]=r,i=0;if(o.some((t=>0!==e[t]))){for(l in s)n.o(s,l)&&(n.m[l]=s[l]);if(c)var d=c(n)}for(t&&t(r);in(78)));l=n.O(l)})(); \ No newline at end of file +(()=>{"use strict";var e,t={78:()=>{const e=window.wp.blocks,t=window.wp.blockEditor,r=window.ReactJSXRuntime,l=[{attributes:{defaultTab:{type:"string",default:""}},save({attributes:e}){const{defaultTab:l}=e;return(0,r.jsx)("div",{...t.useBlockProps.save(),"data-default-tab":l,children:(0,r.jsx)(t.InnerBlocks.Content,{})})}}],n=window.wp.data,a=window.wp.element,o=()=>{const{clientId:e}=(0,t.useBlockEditContext)(),r=(0,n.useSelect)((r=>r(t.store).getBlock(e))),l=(0,a.useMemo)((()=>{var e;return null!==(e=r.innerBlocks)&&void 0!==e?e:[]}),[r.innerBlocks]),o=(0,n.useSelect)((e=>e(t.store).getBlockAttributes(r.clientId))),s=(0,n.useSelect)((e=>e(t.store).hasSelectedInnerBlock(r.clientId,!0))),{updateBlockAttributes:c}=(0,n.useDispatch)(t.store),i=(0,a.useCallback)((e=>{l.forEach((t=>c(t.clientId,e)))}),[l,c]);return{currentBlock:r,currentBlockAttributes:o,currentBlockInnerBlocks:l,currentBlockHasSelectedInnerBlock:s,setAllCurrentBlockInnerBlocksAttributes:i}},s=window.wp.editor,c=(window.wp.coreData,window.wp.components),i=window.wp.i18n,d=e=>{const{attributes:l,setAttributes:n}=e,{defaultTab:a,defaultTabEnabled:s,headingLevel:d}=l,{currentBlockInnerBlocks:u,setAllCurrentBlockInnerBlocksAttributes:b}=o();return(0,r.jsxs)(t.InspectorControls,{children:[(0,r.jsxs)(c.PanelBody,{title:(0,i.__)("Instellingen","yard-gutenberg"),children:[(0,r.jsx)(c.ToggleControl,{label:(0,i.__)("Actief tabblad opgeven","yard-gutenberg"),checked:s,onChange:()=>n({defaultTabEnabled:!s})}),s&&(0,r.jsx)(c.SelectControl,{label:(0,i.__)("Tabblad","yard-gutenberg"),value:a,options:u?.map((e=>({label:e.attributes.headingText,value:e.attributes.id}))),onChange:e=>{n({defaultTab:e})},help:(0,i.__)("Selecteer het tabblad dat standaard geopend moet zijn.","yard-gutenberg")})]}),(0,r.jsx)(c.PanelBody,{title:(0,i.__)("Toegankelijkheid","yard-gutenberg"),children:(0,r.jsx)(c.SelectControl,{label:(0,i.__)("Koptekst","yard-gutenberg"),value:d,options:[{label:"Geen",value:"div"},{label:"H2",value:"h2"},{label:"H3",value:"h3"},{label:"H4",value:"h4"},{label:"H5",value:"h5"},{label:"H6",value:"h6"}],onChange:e=>{n({headingLevel:e}),b({headingLevel:e})},help:(0,i.__)("Selecteer het koptekst niveau voor de titels van de tab items.","yard-gutenberg")})})]})},u=[["yard/tabs-item"]],b=["yard/tabs-item"],g=window.wp.compose,p=window.wp.hooks,k=((0,g.createHigherOrderComponent)((e=>t=>{const{media:l}=t;if(!l)return(0,r.jsx)(e,{...t});const{currentPostType:o}={currentPostType:(0,n.useSelect)((e=>e(s.store).getCurrentPostType()))},[d,u]=(e=>{const t=(0,n.useSelect)((e=>e(s.store).getEditedPostAttribute("meta"))),{editPost:r}=(0,n.useDispatch)(s.store),l=(0,a.useCallback)((t=>r({meta:{[e]:t}})),[r,e]);return[t?.[e],l]})("featured_image_focal_point"),b=(0,p.applyFilters)("yard.featured-image-focal-point-picker-allowed-post-types",[]),g=(0,a.useCallback)(((e={x:.5,y:.5})=>{u(e)}),[u]);return(0,a.useEffect)((()=>{0===d?.length&&g()}),[d,g]),b.includes(o)&&d&&l?.source_url?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e,{...t}),(0,r.jsx)("div",{style:{marginTop:"1rem"},children:(0,r.jsx)(c.FocalPointPicker,{label:(0,i.__)("Kies een focuspunt voor de uitgelichte afbeelding."),url:l?.source_url,value:d,onChange:g,onDrag:g})})]}):(0,r.jsx)(e,{...t})}),"FeaturedImageFocalPointPicker"),window.wp.notices,{src:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 576 512",children:(0,r.jsx)("path",{d:"M512 352H160c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32H277.5c8.5 0 16.6 3.4 22.6 9.4l26.5 26.5c18 18 42.4 28.1 67.9 28.1H512c17.7 0 32 14.3 32 32V320c0 17.7-14.3 32-32 32zM349.3 77.3L322.7 50.7c-12-12-28.3-18.7-45.3-18.7H160c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H394.5c-17 0-33.3-6.7-45.3-18.7zM32 112c0-8.8-7.2-16-16-16s-16 7.2-16 16V352c0 70.7 57.3 128 128 128H464c8.8 0 16-7.2 16-16s-7.2-16-16-16H128c-53 0-96-43-96-96V112z"})}),foreground:"#00a49e"}),h={to:[{type:"block",blocks:["yard/collapse"],transform:(t,r)=>{const l=r?.map((({attributes:t,innerBlocks:r})=>(0,e.createBlock)("yard/collapse-item",{headingLevel:t.headingLevel,headingText:t.headingText,icon:t.icon,iconAltText:t.iconAltText},r)));return(0,e.createBlock)("yard/collapse",{headingLevel:t.headingLevel},l)}}]};(0,e.registerBlockType)("yard/tabs",{deprecated:l,edit:e=>{const{attributes:l,setAttributes:s,clientId:c}=e,{currentTab:i,defaultTab:g,defaultTabEnabled:p}=l,{currentBlockInnerBlocks:k,currentBlockHasSelectedInnerBlock:h}=o(),{currentSelectedBlock:v,getClientIdsOfDescendants:f,getBlockAttributes:w}=(0,n.useSelect)((e=>({currentSelectedBlock:e("core/block-editor").getSelectedBlockClientId(),getClientIdsOfDescendants:e("core/block-editor").getClientIdsOfDescendants(c),getBlockAttributes:e("core/block-editor").getBlockAttributes}))),B=(0,a.useCallback)((e=>f?.some((t=>{const{id:r}=w(t);return e===r}))),[f,w]);return(0,a.useEffect)((()=>{if(!v&&!h)return p&&g?s({currentTab:g}):void(k.length>0&&s({defaultTab:k.at(0)?.attributes.id,currentTab:k.at(0)?.attributes.id}))}),[g,p,v,k,h,s]),(0,a.useEffect)((()=>{const e=B(i),t=B(g);e&&t||s({defaultTab:k.at(0)?.attributes.id,currentTab:k.at(0)?.attributes.id})}),[g,i,B,k,s]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(d,{...e}),(0,r.jsx)("div",{...(0,t.useBlockProps)(),children:(0,r.jsx)(t.InnerBlocks,{allowedBlocks:b,renderAppender:()=>(0,r.jsx)(t.InnerBlocks.ButtonBlockAppender,{}),template:u})})]})},icon:k,save:({attributes:e})=>{const{defaultTab:l}=e;return(0,r.jsxs)("div",{...t.useBlockProps.save(),"data-default-tab":l,children:[(0,r.jsx)("div",{role:"tablist",className:"wp-block-yard-tabs__list",children:(0,r.jsx)(t.InnerBlocks.Content,{})}),(0,r.jsx)("div",{className:"wp-block-yard-tabs__panels",children:(0,r.jsx)(t.InnerBlocks.Content,{})})]})},transforms:h,providesContext:{"yard/tabs-current-tab":"currentTab"}})}},r={};function l(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,l),a.exports}l.m=t,e=[],l.O=(t,r,n,a)=>{if(!r){var o=1/0;for(d=0;d=a)&&Object.keys(l.O).every((e=>l.O[e](r[c])))?r.splice(c--,1):(s=!1,a0&&e[d-1][2]>a;d--)e[d]=e[d-1];e[d]=[r,n,a]},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={41:0,781:0};l.O.j=t=>0===e[t];var t=(t,r)=>{var n,a,[o,s,c]=r,i=0;if(o.some((t=>0!==e[t]))){for(n in s)l.o(s,n)&&(l.m[n]=s[n]);if(c)var d=c(l)}for(t&&t(r);il(78)));n=l.O(n)})(); \ No newline at end of file diff --git a/src/Blocks/tabs-item/block.json b/src/Blocks/tabs-item/block.json index 14e1297..4c14835 100644 --- a/src/Blocks/tabs-item/block.json +++ b/src/Blocks/tabs-item/block.json @@ -2,7 +2,7 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "yard/tabs-item", - "version": "0.1.1", + "version": "0.2.0", "title": "Tabblad", "category": "yard", "description": "Tabblad item.", @@ -27,7 +27,7 @@ "type": "string" } }, - "parent": ["yard/tabs"], + "parent": [ "yard/tabs" ], "supports": { "anchor": true, "html": false, diff --git a/src/Blocks/tabs-item/save.js b/src/Blocks/tabs-item/save.js index bf9d748..6213da6 100644 --- a/src/Blocks/tabs-item/save.js +++ b/src/Blocks/tabs-item/save.js @@ -1,45 +1,37 @@ /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { InnerBlocks } from '@wordpress/block-editor'; /** * External dependencies */ import { Icon } from '@yardinternet/gutenberg-components'; -const Save = ( props ) => { - const { attributes } = props; - const { headingLevel, headingText, icon, id } = attributes; - const HeadingWithLevel = headingLevel; +const Save = ( { attributes } ) => { + const { headingText, icon, id } = attributes; return ( <> - - - + { icon && } + { headingText } + diff --git a/src/Blocks/tabs/block.json b/src/Blocks/tabs/block.json index edf7cd9..0389d18 100644 --- a/src/Blocks/tabs/block.json +++ b/src/Blocks/tabs/block.json @@ -2,7 +2,7 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "yard/tabs", - "version": "0.1.1", + "version": "0.2.0", "title": "Tabbladen", "category": "yard", "description": "Groepeer gemakkelijk content in verschillende tabbladen.", @@ -28,7 +28,7 @@ }, "supports": { "html": false, - "align": ["wide", "full"] + "align": [ "wide", "full" ] }, "textdomain": "yard", "editorScript": "file:./index.js", diff --git a/src/Blocks/tabs/frontend.js b/src/Blocks/tabs/frontend.js index 7deabdc..916c218 100644 --- a/src/Blocks/tabs/frontend.js +++ b/src/Blocks/tabs/frontend.js @@ -6,29 +6,28 @@ const init = () => { tabsBlocks?.forEach( ( tabs ) => { const defaultTabId = tabs.dataset.defaultTab; - const tabsButtons = tabs.querySelectorAll( - '.wp-block-yard-tabs-item__button' - ); - const tabsPanels = tabs.querySelectorAll( - '.wp-block-yard-tabs-item__panel' - ); + + // Move elements to proper containers + const { tabButtons, tabPanels } = moveTabElements( tabs ); // Reset all tab and set active tab based on id - resetAllTabs( tabsButtons, tabsPanels ); - setDefaultTab( tabs, defaultTabId, tabsButtons ); + resetAllTabs( tabButtons, tabPanels ); + setDefaultTab( tabButtons, tabPanels, defaultTabId ); // If there is a hash in the url, set that tab active if ( window.location.hash !== '' ) { - setActiveTabOnHash( tabs, tabsButtons, tabsPanels ); + setActiveTabOnHash( tabButtons, tabPanels ); } - tabsButtons.forEach( ( btn ) => { - // Add click listenter to all tab buttons to change active tab + // Click and keyboard listeners + tabButtons.forEach( ( btn ) => { btn.addEventListener( 'click', () => { - resetAllTabs( tabsButtons, tabsPanels ); - setActiveTab( tabs, btn ); + resetAllTabs( tabButtons, tabPanels ); + setActiveTab( btn, tabButtons, tabPanels ); } ); } ); + + addArrowKeyNavigation( tabButtons ); } ); }; @@ -41,6 +40,7 @@ const init = () => { const resetAllTabs = ( tabsButtons, tabsPanels ) => { tabsButtons?.forEach( ( btn ) => { btn.setAttribute( 'aria-selected', 'false' ); + btn.setAttribute( 'tabindex', '-1' ); btn.classList.remove( 'active' ); } ); @@ -54,68 +54,130 @@ const resetAllTabs = ( tabsButtons, tabsPanels ) => { * Set active tab * * @param {HTMLElement} tabs - Current tabs + * @param {HTMLElement[]} buttons - All tab buttons * @param {HTMLElement} btn - Current tab button */ -const setActiveTab = ( tabs, btn ) => { - // Activate tab button - btn?.setAttribute( 'aria-selected', 'true' ); - btn?.classList.add( 'active' ); - - // Get the corresponding tab panel - const tabPanel = tabs.querySelector( - `#${ btn?.getAttribute( 'aria-controls' ) }` - ); +const setActiveTab = ( btn, buttons, panels ) => { + const id = btn.getAttribute( 'aria-controls' ); + const panel = panels.find( ( p ) => p.id === id ); - if ( ! tabPanel ) return; + if ( ! panel ) return; - // Activate tab panel - tabPanel.setAttribute( 'aria-hidden', 'false' ); - tabPanel.classList.add( 'active' ); + btn.setAttribute( 'aria-selected', 'true' ); + btn.setAttribute( 'tabindex', '0' ); + btn.classList.add( 'active' ); + + panels.forEach( ( panel ) => panel.setAttribute( 'hidden', 'true' ) ); + panel.removeAttribute( 'hidden' ); + panel.setAttribute( 'aria-hidden', 'false' ); + panel.classList.add( 'active' ); }; /** - * Set default tab based on id - * - * @param {HTMLElement} tabs - Current tabs - * @param {string} defaultTabId - Id for the default tab - * @param {HTMLElement[]} tabsButtons - All buttons of current tabs + * Set default tab */ -const setDefaultTab = ( tabs, defaultTabId, tabsButtons ) => { - let defaultButton; - - if ( defaultTabId ) { - // Get corresponding tab button by id - defaultButton = tabs.querySelector( - `#tabs-item-button-${ defaultTabId }` - ); - } - - // Set active tab based on the defaultButton, - // If there is no button, get the first button (tabsButtons[ 0 ]) - setActiveTab( tabs, defaultButton ?? tabsButtons[ 0 ] ); +const setDefaultTab = ( buttons, panels, defaultId ) => { + let defaultBtn = defaultId + ? buttons.find( ( b ) => b.id === `tabs-item-button-${ defaultId }` ) + : buttons[ 0 ]; + + if ( ! defaultBtn ) defaultBtn = buttons[ 0 ]; + setActiveTab( defaultBtn, buttons, panels ); + defaultBtn.focus(); }; /** * Set active tab basesd on url hash * - * @param {HTMLElement} tabs - Current tabs * @param {HTMLElement[]} tabsButtons - All buttons of current tabs * @param {HTMLElement[]} tabsPanels - All panels of current tabs */ -const setActiveTabOnHash = ( tabs, tabsButtons, tabsPanels ) => { - // Get heading based on de url hash - const heading = tabs.querySelector( window.location.hash ); +const setActiveTabOnHash = ( tabsButtons, tabsPanels ) => { + const heading = document.querySelector( window.location.hash ); + if ( ! heading ) return; - if ( heading ) { - // Get corresponding tab button - const btn = heading.querySelector( '.wp-block-yard-tabs-item__button' ); - - // Reset all tab and set active tab based on btn + const btn = heading.querySelector( '[data-tab-button]' ); + if ( btn ) { resetAllTabs( tabsButtons, tabsPanels ); - setActiveTab( tabs, btn ); + setActiveTab( btn, tabsButtons, tabsPanels ); + btn.focus(); } }; +/** + * Move tab buttons and panels to WCAG-compliant structure + * + * @param {HTMLElement} tabs - The parent tabs block + * @returns {Object} - { tabButtons, tabPanels, tablist, panelsContainer } + */ +const moveTabElements = ( tabs ) => { + // Grab all fragments + const tabButtons = Array.from( + tabs.querySelectorAll( '[data-tab-button]' ) + ); + const tabPanels = Array.from( tabs.querySelectorAll( '[data-tab-panel]' ) ); + + // Create or get containers + const tabList = tabs.querySelector( '[role="tablist"]' ); + const panelsContainer = tabs.querySelector( '.wp-block-yard-tabs__panels' ); + + if ( ! tabList ) { + tabList = document.createElement( 'div' ); + tabList.setAttribute( 'role', 'tablist' ); + tabs.prepend( tabList ); + } + + if ( ! panelsContainer ) { + panelsContainer = document.createElement( 'div' ); + panelsContainer.classList.add( 'wp-block-yard-tabs__panels' ); + tabs.appendChild( panelsContainer ); + } + + // Move buttons and panels into correct container + tabButtons.forEach( ( btn ) => tabList.appendChild( btn ) ); + tabPanels.forEach( ( panel ) => panelsContainer.appendChild( panel ) ); + + return { tabButtons, tabPanels, tabList, panelsContainer }; +}; + +/** + * Add keyboard navigation to tab buttons + * + * @param {HTMLElement[]} tabButtons - Array of tab buttons + */ +const addArrowKeyNavigation = ( tabButtons ) => { + tabButtons.forEach( ( btn, index ) => { + btn.addEventListener( 'keydown', ( e ) => { + let newIndex = index; + + switch ( e.key ) { + case 'ArrowRight': + newIndex = ( index + 1 ) % tabButtons.length; + e.preventDefault(); + break; + case 'ArrowLeft': + newIndex = + ( index - 1 + tabButtons.length ) % tabButtons.length; + e.preventDefault(); + break; + case 'Home': + newIndex = 0; + e.preventDefault(); + break; + case 'End': + newIndex = tabButtons.length - 1; + e.preventDefault(); + break; + default: + return; // ignore other keys + } + + tabButtons[ newIndex ].focus(); + tabButtons[ newIndex ].click(); + } ); + } ); +}; + init(); // When the url hash is changed, the init function must be called again diff --git a/src/Blocks/tabs/save.js b/src/Blocks/tabs/save.js index 24e9197..b731558 100644 --- a/src/Blocks/tabs/save.js +++ b/src/Blocks/tabs/save.js @@ -3,13 +3,18 @@ */ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; -const Save = ( props ) => { - const { attributes } = props; +const Save = ( { attributes } ) => { const { defaultTab } = attributes; return ( -
- +
+
+ +
+ +
+ +
); };