-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #52 from happyprime/fix/improvements
Assorted improvements
- Loading branch information
Showing
24 changed files
with
7,220 additions
and
9,503 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,13 @@ | ||
| # Show/Hide Section Block | ||
| # Show / Hide Section Block | ||
|
|
||
| Creates accessible summaries that can be toggled to show or hide additional details. | ||
| Display an accessible show/hide interface with details and summary elements. | ||
|
|
||
| ## About | ||
| ## Description | ||
|
|
||
| This is a WordPress plugin that adds a Show/Hide Group block to the Block Editor. | ||
| TBD | ||
|
|
||
| The block allows users to add sections with summaries and associated content. The display of the associated content can be displayed or hidden by interacting with the summary or the Open/Close All button. | ||
| ## Changelog | ||
|
|
||
| ### 2.0.0 | ||
|
|
||
| Initial public release. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,35 @@ | ||
| function docReady( fn ) { | ||
| // see if DOM is already available | ||
| if ( | ||
| document.readyState === 'complete' || | ||
| document.readyState === 'interactive' | ||
| ) { | ||
| // call on next available tick | ||
| setTimeout( fn, 1 ); | ||
| } else { | ||
| document.addEventListener( 'DOMContentLoaded', fn ); | ||
| } | ||
| } | ||
|
|
||
| docReady( function () { | ||
| const toggleAll = document.querySelectorAll( | ||
| '.wp-block-happyprime-show-hide-group .toggle-all' | ||
| ); | ||
| if ( toggleAll.length > 0 ) { | ||
| toggleAll.forEach( ( toggle ) => | ||
| toggle.addEventListener( 'click', () => { | ||
| const details = toggle.parentElement.querySelectorAll( | ||
| 'details.wp-block-happyprime-show-hide-section' | ||
| ); | ||
| if ( 'open all' === toggle.innerText.toLowerCase() ) { | ||
| // Open all. | ||
| details.forEach( ( detail ) => { | ||
| detail.setAttribute( 'open', true ); | ||
| } ); | ||
| // Update button. | ||
| toggle.innerText = 'Close All'; | ||
| toggle.ariaExpanded = true; | ||
| } else { | ||
| // Close all. | ||
| details.forEach( ( detail ) => { | ||
| detail.removeAttribute( 'open' ); | ||
| } ); | ||
| // Update button. | ||
| toggle.innerText = 'Open All'; | ||
| toggle.ariaExpanded = false; | ||
| } | ||
| } ) | ||
| { | ||
| const handleToggleButton = () => { | ||
| const toggleAll = document.querySelectorAll( | ||
| '.wp-block-happyprime-show-hide-group .toggle-all' | ||
| ); | ||
| } | ||
| } ); | ||
|
|
||
| if ( toggleAll.length > 0 ) { | ||
| toggleAll.forEach( ( toggle ) => | ||
| toggle.addEventListener( 'click', () => { | ||
| const details = toggle.parentElement.querySelectorAll( | ||
| 'details.wp-block-happyprime-show-hide-section' | ||
| ); | ||
|
|
||
| if ( false === Boolean( toggle.ariaExpanded ) ) { | ||
| details.forEach( ( detail ) => { | ||
| detail.setAttribute( 'open', true ); | ||
| } ); | ||
|
|
||
| toggle.innerText = 'Close All'; | ||
| toggle.ariaExpanded = true; | ||
| } else { | ||
| details.forEach( ( detail ) => { | ||
| detail.removeAttribute( 'open' ); | ||
| } ); | ||
|
|
||
| toggle.innerText = 'Open All'; | ||
| toggle.ariaExpanded = false; | ||
| } | ||
| } ) | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener( 'DOMContentLoaded', handleToggleButton ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,129 +1,131 @@ | ||
| import { registerBlockType } from '@wordpress/blocks'; | ||
| import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; | ||
| import { | ||
| InnerBlocks, | ||
| InspectorControls, | ||
| useBlockProps, | ||
| } from '@wordpress/block-editor'; | ||
| import { PanelBody, ToggleControl } from '@wordpress/components'; | ||
| import { dispatch, useSelect } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| // Internal dependencies. | ||
| import metadata from './block.json'; | ||
| import './style.css'; | ||
|
|
||
| // Register the block. | ||
| registerBlockType( metadata, { | ||
| edit: ( props ) => { | ||
| const blockProps = useBlockProps(); // eslint-disable-line react-hooks/rules-of-hooks | ||
| const { | ||
| attributes: { blockCount, allIds }, | ||
| setAttributes, | ||
| } = props; | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const innerBlocks = useSelect( ( select ) => { | ||
| const currentBlocks = select( 'core/block-editor' ).getBlocks( | ||
| props.clientId | ||
| ); | ||
| return currentBlocks; | ||
| } ); | ||
| const Edit = ( props ) => { | ||
| const { | ||
| attributes: { hasToggle }, | ||
| setAttributes, | ||
| } = props; | ||
|
|
||
| // Update inner blocks' htmlId attributes when the inner blocks change. | ||
| let newId = ''; | ||
| let currentIds = ''; | ||
| for ( let i = 0; i < innerBlocks.length; i++ ) { | ||
| newId = 'show-hide-section-' + i + '-' + props.clientId; | ||
| currentIds += ' ' + newId; | ||
| dispatch( 'core/block-editor' ).updateBlockAttributes( | ||
| innerBlocks[ i ].clientId, | ||
| { htmlId: newId } | ||
| ); | ||
| } | ||
| const details = useSelect( ( select ) => { | ||
| const currentBlocks = select( 'core/block-editor' ).getBlocks( | ||
| props.clientId | ||
| ); | ||
|
|
||
| // Save the number of inner blocks and the list of IDs the Toggle All button controls. | ||
| const currentCount = innerBlocks.length; | ||
| setAttributes( { blockCount: currentCount, allIds: currentIds } ); | ||
| return currentBlocks; | ||
| } ); | ||
|
|
||
| // Create an Open/Close All button which will only be shown if there is more than one inner block. | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const details = useSelect( ( select ) => { | ||
| const currentBlocks = select( 'core/block-editor' ).getBlocks( | ||
| props.clientId | ||
| ); | ||
| return currentBlocks; | ||
| } ); | ||
| const toggleAllSections = ( evt ) => { | ||
| if ( false === evt.target.ariaExpanded ) { | ||
| details.forEach( ( detail ) => { | ||
| dispatch( 'core/block-editor' ).updateBlockAttributes( | ||
| detail.clientId, | ||
| { isOpen: true } | ||
| ); | ||
| } ); | ||
|
|
||
| const toggleAllSections = ( evt ) => { | ||
| if ( 'open all' === evt.target.innerText.toLowerCase() ) { | ||
| // Open all. | ||
| details.forEach( ( detail ) => { | ||
| dispatch( 'core/block-editor' ).updateBlockAttributes( | ||
| detail.clientId, | ||
| { isOpen: 'open' } | ||
| ); | ||
| } ); | ||
| // Update button. | ||
| evt.target.innerText = 'Close All'; | ||
| evt.target.ariaExpanded = true; | ||
| } else { | ||
| // Close all. | ||
| details.forEach( ( detail ) => { | ||
| dispatch( 'core/block-editor' ).updateBlockAttributes( | ||
| detail.clientId, | ||
| { isOpen: '' } | ||
| ); | ||
| } ); | ||
| // Update button. | ||
| evt.target.innerText = 'Open All'; | ||
| evt.target.ariaExpanded = false; | ||
| } | ||
| }; | ||
| evt.target.innerText = __( 'Close all', 'show-hide-section' ); | ||
| evt.target.ariaExpanded = true; | ||
| } else { | ||
| details.forEach( ( detail ) => { | ||
| dispatch( 'core/block-editor' ).updateBlockAttributes( | ||
| detail.clientId, | ||
| { isOpen: false } | ||
| ); | ||
| } ); | ||
|
|
||
| const toggleAll = ( | ||
| <button | ||
| className="toggle-all" | ||
| aria-expanded="false" | ||
| aria-controls={ allIds } | ||
| onClick={ toggleAllSections } | ||
| > | ||
| Open All | ||
| </button> | ||
| ); | ||
| evt.target.innerText = __( 'Open all', 'show-hide-section' ); | ||
| evt.target.ariaExpanded = false; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div { ...blockProps }> | ||
| { blockCount > 1 && toggleAll } | ||
| return ( | ||
| <> | ||
| <InspectorControls> | ||
| <PanelBody> | ||
| <ToggleControl | ||
| label={ __( | ||
| 'Has open/close all toggle', | ||
| 'show-hide-section' | ||
| ) } | ||
| help={ | ||
| hasToggle | ||
| ? __( | ||
| 'Open/close all toggle will display.', | ||
| 'show-hide-section' | ||
| ) | ||
| : __( | ||
| 'Open/close all toggle will not display.', | ||
| 'show-hide-section' | ||
| ) | ||
| } | ||
| checked={ hasToggle } | ||
| onChange={ ( value ) => { | ||
| setAttributes( { hasToggle: value } ); | ||
| } } | ||
| /> | ||
| </PanelBody> | ||
| </InspectorControls> | ||
| <div { ...useBlockProps() }> | ||
| { hasToggle && ( | ||
| <button | ||
| className="toggle-all" | ||
| aria-expanded="false" | ||
| onClick={ toggleAllSections } | ||
| > | ||
| { __( 'Open all', 'show-hide-section' ) } | ||
| </button> | ||
| ) } | ||
| <InnerBlocks | ||
| allowedBlocks={ [ 'happyprime/show-hide-section' ] } | ||
| template={ [ | ||
| [ | ||
| 'happyprime/show-hide-section', | ||
| { htmlId: 'show-hide-section-0' }, | ||
| {}, | ||
| [ [ 'core/paragraph', {} ] ], | ||
| ], | ||
| [ | ||
| 'happyprime/show-hide-section', | ||
| { htmlId: 'show-hide-section-1' }, | ||
| {}, | ||
| [ [ 'core/paragraph', {} ] ], | ||
| ], | ||
| ] } | ||
| templateLock={ false } | ||
| /> | ||
| </div> | ||
| ); | ||
| }, | ||
| save: ( props ) => { | ||
| const blockProps = useBlockProps.save(); | ||
| const { blockCount, allIds } = props.attributes; | ||
| const toggleAll = ( | ||
| <button | ||
| className="toggle-all" | ||
| aria-expanded="false" | ||
| aria-controls={ allIds } | ||
| > | ||
| Open All | ||
| </button> | ||
| ); | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <div { ...blockProps }> | ||
| { blockCount > 1 && toggleAll } | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| ); | ||
| }, | ||
| const Save = ( props ) => { | ||
| const { | ||
| attributes: { hasToggle }, | ||
| } = props; | ||
|
|
||
| return ( | ||
| <div { ...useBlockProps.save() }> | ||
| { hasToggle && ( | ||
| <button className="toggle-all" aria-expanded="false"> | ||
| { __( 'Open all', 'show-hide-section' ) } | ||
| </button> | ||
| ) } | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| // Register the block. | ||
| registerBlockType( metadata, { | ||
| edit: Edit, | ||
| save: Save, | ||
| } ); |
Oops, something went wrong.