From d80735144ada0e763a5f6812110b90c3b3ecfb99 Mon Sep 17 00:00:00 2001 From: Jason Chafin Date: Thu, 3 Aug 2023 08:07:18 -0700 Subject: [PATCH 1/6] fix: :art: remove wrong class from `detailswrapper.js` --- js/detailswrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/detailswrapper.js b/js/detailswrapper.js index e9903e7..26cf1c9 100644 --- a/js/detailswrapper.js +++ b/js/detailswrapper.js @@ -23,7 +23,7 @@ if ( expandCollapses ) } ); } ); -const details = document.querySelectorAll( '.accordion-wrapper details' ); +const details = document.querySelectorAll( 'details' ); if ( details ) details.forEach( ( detail ) => { detail.addEventListener( 'toggle', ( e ) => { From c9ad2a03ef028cc503044b6f6612bf2c9d996a48 Mon Sep 17 00:00:00 2001 From: Jason Chafin Date: Thu, 3 Aug 2023 09:03:52 -0700 Subject: [PATCH 2/6] refactor: :construction: WIP. Styling is fixed. JS is broken. --- blocks/src/details-wrapper/save.js | 4 ++-- blocks/src/details-wrapper/style.scss | 25 ++++++++++++++++++------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/blocks/src/details-wrapper/save.js b/blocks/src/details-wrapper/save.js index 610fe19..4ea1256 100644 --- a/blocks/src/details-wrapper/save.js +++ b/blocks/src/details-wrapper/save.js @@ -6,9 +6,9 @@ export default function save() { const innerBlocksProps = useInnerBlocksProps.save(); return (
- +
Expand All - +
); diff --git a/blocks/src/details-wrapper/style.scss b/blocks/src/details-wrapper/style.scss index 60b6a45..1f13e59 100644 --- a/blocks/src/details-wrapper/style.scss +++ b/blocks/src/details-wrapper/style.scss @@ -18,13 +18,23 @@ background-color: var(--wp--preset--color--light-gray); } - .expand-collapse { - color: #32373c; - background-color: var(--wp--preset--color--lightest-gray); - padding: 0.5rem 0.5rem 0.5rem 0; - margin-bottom: 1rem; - text-decoration: none; - border-radius: 5px; + &.has-background { + .expand-wrap { + padding:0.5rem; + } + } + + .expand-wrap { + display:flex; + align-items:center; + justify-items:left; + padding:0.5rem 0; + .expand-collapse { + color: #32373c; + background-color: var(--wp--preset--color--lightest-gray); + padding: 0.5rem 0.5rem 0.5rem 0; + text-decoration: none; + border-radius: 5px; &::before { font-family: dashicons, sans-serif; @@ -44,6 +54,7 @@ content: "\f347"; } } + } .details-block { margin-top: 1rem; From 9a66716cefd93ef314048b1521b48f64b7eeb711 Mon Sep 17 00:00:00 2001 From: Jason Chafin Date: Thu, 3 Aug 2023 10:53:34 -0700 Subject: [PATCH 3/6] refactor: :construction: Work in progress. Moved expand button to within js code. --- blocks/src/details-wrapper/edit.js | 15 ++++++++-- blocks/src/details-wrapper/editor.scss | 2 -- blocks/src/details-wrapper/save.js | 2 +- blocks/src/example-static/block.json | 17 +++++++++++ blocks/src/example-static/edit.js | 38 +++++++++++++++++++++++++ blocks/src/example-static/editor.scss | 9 ++++++ blocks/src/example-static/index.js | 39 ++++++++++++++++++++++++++ blocks/src/example-static/save.js | 24 ++++++++++++++++ blocks/src/example-static/style.scss | 12 ++++++++ 9 files changed, 152 insertions(+), 6 deletions(-) create mode 100644 blocks/src/example-static/block.json create mode 100644 blocks/src/example-static/edit.js create mode 100644 blocks/src/example-static/editor.scss create mode 100644 blocks/src/example-static/index.js create mode 100644 blocks/src/example-static/save.js create mode 100644 blocks/src/example-static/style.scss diff --git a/blocks/src/details-wrapper/edit.js b/blocks/src/details-wrapper/edit.js index 082f5d5..16855e8 100644 --- a/blocks/src/details-wrapper/edit.js +++ b/blocks/src/details-wrapper/edit.js @@ -1,18 +1,27 @@ import { __ } from '@wordpress/i18n'; -import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; +import { useBlockProps, InnerBlocks, useInnerBlocksProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { const blockProps = useBlockProps( { className: 'details-wrapper', } ); - const ALLOWED_BLOCKS = [ 'ucsc/details' ]; + const ALLOWED_BLOCKS = ['ucsc/details']; + const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps, {ALLOWED_BLOCKS}); + return ( <>

Details wrapper

- + + +
); diff --git a/blocks/src/details-wrapper/editor.scss b/blocks/src/details-wrapper/editor.scss index 271c560..5c1c7fa 100644 --- a/blocks/src/details-wrapper/editor.scss +++ b/blocks/src/details-wrapper/editor.scss @@ -8,8 +8,6 @@ border: 1px solid #aaa; border: 1px solid var(--wp--preset--color--light-gray); border-radius: 4px; - margin: 0.5em 0.5em 0; - padding: 0.5em 0.5em 0; .wrapper-heading { color: #aaa; diff --git a/blocks/src/details-wrapper/save.js b/blocks/src/details-wrapper/save.js index 4ea1256..764b33c 100644 --- a/blocks/src/details-wrapper/save.js +++ b/blocks/src/details-wrapper/save.js @@ -7,7 +7,7 @@ export default function save() { return (
- Expand All + {__('Eat All', 'details-wrapper')}
diff --git a/blocks/src/example-static/block.json b/blocks/src/example-static/block.json new file mode 100644 index 0000000..869c10d --- /dev/null +++ b/blocks/src/example-static/block.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "create-block/example-static", + "version": "0.1.0", + "title": "Example Static", + "category": "widgets", + "icon": "smiley", + "description": "Example block scaffolded with Create Block tool.", + "supports": { + "html": false + }, + "textdomain": "example-static", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css" +} \ No newline at end of file diff --git a/blocks/src/example-static/edit.js b/blocks/src/example-static/edit.js new file mode 100644 index 0000000..750d5b9 --- /dev/null +++ b/blocks/src/example-static/edit.js @@ -0,0 +1,38 @@ +/** + * Retrieves the translation of text. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ + */ +import { __ } from '@wordpress/i18n'; + +/** + * 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'; + +/** + * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. + * Those files can contain any CSS code that gets applied to the editor. + * + * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + */ +import './editor.scss'; + +/** + * The edit function describes the structure of your block in the context of the + * editor. This represents what the editor will render when the block is used. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit + * + * @return {WPElement} Element to render. + */ +export default function Edit() { + return ( +

+ { __( '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; +} From 08c4e4a57352113b224cc3a68f0fd85d72e0e98a Mon Sep 17 00:00:00 2001 From: Jason Chafin Date: Thu, 3 Aug 2023 11:41:22 -0700 Subject: [PATCH 4/6] refactor: :construction: More progress --- blocks/src/details-wrapper/block.json | 6 ++++++ blocks/src/details-wrapper/edit.js | 5 +++-- blocks/src/details-wrapper/save.js | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/blocks/src/details-wrapper/block.json b/blocks/src/details-wrapper/block.json index 057e5a8..f16bbab 100644 --- a/blocks/src/details-wrapper/block.json +++ b/blocks/src/details-wrapper/block.json @@ -7,6 +7,12 @@ "category": "text", "icon": "button", "description": "Wrapper for the details block", + "attributes": { + "wrapperButton": { + "type": "string", + "default": "Expand All" + } + }, "supports": { "align": [ "wide", "full" ], "color": { diff --git a/blocks/src/details-wrapper/edit.js b/blocks/src/details-wrapper/edit.js index 16855e8..b23b605 100644 --- a/blocks/src/details-wrapper/edit.js +++ b/blocks/src/details-wrapper/edit.js @@ -1,9 +1,10 @@ import { __ } from '@wordpress/i18n'; -import { useBlockProps, InnerBlocks, useInnerBlocksProps } from '@wordpress/block-editor'; +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import './editor.scss'; -export default function Edit() { +export default function Edit({attributes, setAttributes}) { + const { wrapperButton } = attributes; const blockProps = useBlockProps( { className: 'details-wrapper', } ); diff --git a/blocks/src/details-wrapper/save.js b/blocks/src/details-wrapper/save.js index 764b33c..07a78d1 100644 --- a/blocks/src/details-wrapper/save.js +++ b/blocks/src/details-wrapper/save.js @@ -7,7 +7,7 @@ export default function save() { return (
- {__('Eat All', 'details-wrapper')} + {__('Expand All', 'details-wrapper')}
From d938dbcb47ce2bbf749fc4972edf718796331b4d Mon Sep 17 00:00:00 2001 From: Jason Chafin Date: Thu, 3 Aug 2023 12:10:15 -0700 Subject: [PATCH 5/6] refactor: :art: clean up `detailswrapper.js`. Lots of leftover cruft. Make work with new structure. --- js/detailswrapper.js | 73 +++++++++++--------------------------------- 1 file changed, 17 insertions(+), 56 deletions(-) diff --git a/js/detailswrapper.js b/js/detailswrapper.js index 26cf1c9..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( '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; -} + }); + }); + }); From a9051b46754c2c7d7c0d41760b0dc516bce8b6f1 Mon Sep 17 00:00:00 2001 From: Jason Chafin Date: Thu, 3 Aug 2023 12:15:05 -0700 Subject: [PATCH 6/6] refactor: :construction: Minor change to `edit.js` --- blocks/src/details-wrapper/edit.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/blocks/src/details-wrapper/edit.js b/blocks/src/details-wrapper/edit.js index b23b605..341990f 100644 --- a/blocks/src/details-wrapper/edit.js +++ b/blocks/src/details-wrapper/edit.js @@ -3,8 +3,7 @@ import { __ } from '@wordpress/i18n'; import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import './editor.scss'; -export default function Edit({attributes, setAttributes}) { - const { wrapperButton } = attributes; +export default function Edit() { const blockProps = useBlockProps( { className: 'details-wrapper', } );