Details wrapper
-+ { __( 'Example Static – hello from the editor!', 'example-static' ) } +
+ ); +} diff --git a/blocks/src/example-static/editor.scss b/blocks/src/example-static/editor.scss new file mode 100644 index 0000000..433949b --- /dev/null +++ b/blocks/src/example-static/editor.scss @@ -0,0 +1,9 @@ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-create-block-example-static { + border: 1px dotted #f00; +} diff --git a/blocks/src/example-static/index.js b/blocks/src/example-static/index.js new file mode 100644 index 0000000..ade1e47 --- /dev/null +++ b/blocks/src/example-static/index.js @@ -0,0 +1,39 @@ +/** + * Registers a new block provided a unique name and an object defining its behavior. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. + * All files containing `style` keyword are bundled together. The code used + * gets applied both to the front of your site and to the editor. + * + * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + */ +import './style.scss'; + +/** + * Internal dependencies + */ +import Edit from './edit'; +import save from './save'; +import metadata from './block.json'; + +/** + * Every block starts by registering a new block type definition. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +registerBlockType( metadata.name, { + /** + * @see ./edit.js + */ + edit: Edit, + + /** + * @see ./save.js + */ + save, +} ); diff --git a/blocks/src/example-static/save.js b/blocks/src/example-static/save.js new file mode 100644 index 0000000..b7e7dcc --- /dev/null +++ b/blocks/src/example-static/save.js @@ -0,0 +1,24 @@ +/** + * React hook that is used to mark the block wrapper element. + * It provides all the necessary props like the class name. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops + */ +import { useBlockProps } from '@wordpress/block-editor'; + +/** + * The save function defines the way in which the different attributes should + * be combined into the final markup, which is then serialized by the block + * editor into `post_content`. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save + * + * @return {WPElement} Element to render. + */ +export default function save() { + return ( ++ { 'Example Static – hello from the saved content!' } +
+ ); +} diff --git a/blocks/src/example-static/style.scss b/blocks/src/example-static/style.scss new file mode 100644 index 0000000..bcff354 --- /dev/null +++ b/blocks/src/example-static/style.scss @@ -0,0 +1,12 @@ +/** + * The following styles get applied both on the front of your site + * and in the editor. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-create-block-example-static { + background-color: #21759b; + color: #fff; + padding: 2px; +} diff --git a/js/detailswrapper.js b/js/detailswrapper.js index e9903e7..a8c97d2 100644 --- a/js/detailswrapper.js +++ b/js/detailswrapper.js @@ -1,63 +1,24 @@ -const expandCollapses = document.querySelectorAll( '.expand-collapse' ); -if ( expandCollapses ) - expandCollapses.forEach( ( expandCollapse ) => { - expandCollapse.addEventListener( 'click', () => { - const currentAction = expandCollapse.getAttribute( 'id' ); - if ( currentAction === 'expand' ) { - expandCollapse.setAttribute( 'id', 'collapse' ); +const expandCollapses = document.querySelectorAll('.expand-collapse'); +if (expandCollapses) + expandCollapses.forEach((expandCollapse) => { + expandCollapse.addEventListener('click', () => { + const currentAction = expandCollapse.getAttribute('id'); + if (currentAction === 'expand') { + expandCollapse.setAttribute('id', 'collapse'); expandCollapse.innerHTML = 'Collapse All'; } else { - expandCollapse.setAttribute( 'id', 'expand' ); + expandCollapse.setAttribute('id', 'expand'); expandCollapse.innerHTML = 'Expand All'; } - expandCollapse.parentElement - .querySelectorAll( 'details' ) - .forEach( ( accItem, i ) => { - if ( currentAction === 'expand' ) { - accItem.setAttribute( 'open', true ); + expandCollapse.parentElement.parentElement + .querySelectorAll('details') + .forEach((accItem, i) => { + if (currentAction === 'expand') { + accItem.setAttribute('open', true); } else { - accItem.removeAttribute( 'open' ); + accItem.removeAttribute('open'); } - } ); - } ); - } ); - -const details = document.querySelectorAll( '.accordion-wrapper details' ); -if ( details ) - details.forEach( ( detail ) => { - detail.addEventListener( 'toggle', ( e ) => { - const currentAccWrapper = e.target.parentElement.parentElement; - const expandCollapse = - currentAccWrapper.querySelector( '.expand-collapse' ); - const currentAction = expandCollapse.getAttribute( 'id' ); - - if ( currentAction === 'expand' ) { - if ( allOpen( currentAccWrapper ) ) { - expandCollapse.setAttribute( 'id', 'collapse' ); - expandCollapse.innerHTML = 'Collapse All'; - } - } else { - if ( allClosed( currentAccWrapper ) ) { - expandCollapse.setAttribute( 'id', 'expand' ); - expandCollapse.innerHTML = 'Expand All'; - } - } - } ); - } ); - -function allOpen( currentAccWrapper ) { - let allOpenRet = true; - currentAccWrapper.querySelectorAll( 'details' ).forEach( ( detail ) => { - if ( ! detail.open ) allOpenRet = false; - } ); - return allOpenRet; -} - -function allClosed( currentAccWrapper ) { - let allClosedRet = true; - currentAccWrapper.querySelectorAll( 'details' ).forEach( ( detail ) => { - if ( detail.open ) allClosedRet = false; - } ); - return allClosedRet; -} + }); + }); + });