-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add 'Widget Group' block to widgets screens (#34484)
* Take all of the work on Widget Box that @getdave did * Rename 'core/widget-box' to 'core/widget-group' * Set up flow inspired by Legacy Widget block * Default title to the first block's label * Add styling * Add space to comment Co-authored-by: Kai Hao <[email protected]> * Fix custom title not appearing in frontend * Use solid line to match reusable block styling * Prevent Widget Group from appearing in its own list of valid transforms * Change title of Widget Group form to 'Widget Group' * Use useSelect properly * Remove unnecessary eslint-ignore * Fix Widget Group in Customizer * Update Widget Group block description * Fix misspelling of 'argument' * Remove unused file * Default TextControl value to '' * Force appender to always have light styling Co-authored-by: Dave Smith <[email protected]> Co-authored-by: Kai Hao <[email protected]>
- Loading branch information
3 people
authored
Sep 7, 2021
1 parent
d1427be
commit f2de298
Showing
15 changed files
with
357 additions
and
9 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 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
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
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
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 |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| { | ||
| "apiVersion": 2, | ||
| "name": "core/widget-group", | ||
| "category": "widgets", | ||
| "attributes": { | ||
| "title": { | ||
| "type": "string" | ||
| } | ||
| }, | ||
| "supports": { | ||
| "html": false, | ||
| "inserter": true, | ||
| "customClassName": true, | ||
| "reusable": false | ||
| }, | ||
| "editorStyle": "wp-block-widget-group-editor", | ||
| "style": "wp-block-widget-group" | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| useBlockProps, | ||
| BlockIcon, | ||
| ButtonBlockAppender, | ||
| InnerBlocks, | ||
| store as blockEditorStore, | ||
| } from '@wordpress/block-editor'; | ||
| import { Placeholder, TextControl } from '@wordpress/components'; | ||
| import { group as groupIcon } from '@wordpress/icons'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { getBlockType } from '@wordpress/blocks'; | ||
|
|
||
| export default function Edit( props ) { | ||
| const { clientId, isSelected } = props; | ||
| const { innerBlocks } = useSelect( ( select ) => | ||
| select( blockEditorStore ).getBlock( clientId ) | ||
| ); | ||
|
|
||
| let content; | ||
| if ( innerBlocks.length === 0 ) { | ||
| content = <PlaceholderContent { ...props } />; | ||
| } else if ( isSelected ) { | ||
| content = <EditFormContent { ...props } innerBlocks={ innerBlocks } />; | ||
| } else { | ||
| content = <PreviewContent { ...props } innerBlocks={ innerBlocks } />; | ||
| } | ||
|
|
||
| return ( | ||
| <div { ...useBlockProps( { className: 'widget' } ) }>{ content }</div> | ||
| ); | ||
| } | ||
|
|
||
| function PlaceholderContent( { clientId } ) { | ||
| return ( | ||
| <> | ||
| <Placeholder | ||
| className="wp-block-widget-group__placeholder" | ||
| icon={ <BlockIcon icon={ groupIcon } /> } | ||
| label={ __( 'Widget Group' ) } | ||
| > | ||
| <ButtonBlockAppender rootClientId={ clientId } /> | ||
| </Placeholder> | ||
| <InnerBlocks renderAppender={ false } /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function EditFormContent( { attributes, setAttributes, innerBlocks } ) { | ||
| return ( | ||
| <div className="wp-block-widget-group__edit-form"> | ||
| <h2 className="wp-block-widget-group__edit-form-title"> | ||
| { __( 'Widget Group' ) } | ||
| </h2> | ||
| <TextControl | ||
| label={ __( 'Title' ) } | ||
| placeholder={ getDefaultTitle( innerBlocks ) } | ||
| value={ attributes.title ?? '' } | ||
| onChange={ ( title ) => setAttributes( { title } ) } | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function PreviewContent( { attributes, innerBlocks } ) { | ||
| return ( | ||
| <> | ||
| <h2 className="widget-title"> | ||
| { attributes.title || getDefaultTitle( innerBlocks ) } | ||
| </h2> | ||
| <InnerBlocks /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function getDefaultTitle( innerBlocks ) { | ||
| if ( innerBlocks.length === 0 ) { | ||
| return null; | ||
| } | ||
| return getBlockType( innerBlocks[ 0 ].name ).title; | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| .wp-block-widget-group { | ||
| &.has-child-selected::after { | ||
| border-radius: $radius-block-ui; | ||
| border: 1px solid var(--wp-admin-theme-color); | ||
| bottom: 0; | ||
| content: ""; | ||
| left: 0; | ||
| position: absolute; | ||
| right: 0; | ||
| top: 0; | ||
| } | ||
|
|
||
| .widget-title { | ||
| font-family: $default-font; | ||
| font-size: 18px; | ||
| font-weight: 600; | ||
| } | ||
| } | ||
|
|
||
| .wp-block-widget-group__placeholder { | ||
| .block-editor-inserter { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| // Force the appender to always have "light mode" styling as it appears in a | ||
| // light colored placeholder. | ||
| .is-dark-theme .wp-block-widget-group__placeholder .block-editor-button-block-appender { | ||
| box-shadow: inset 0 0 0 $border-width $gray-900; | ||
| color: $gray-900; | ||
| } | ||
|
|
||
| .wp-block-widget-group__edit-form { | ||
| background: $white; | ||
| border-radius: $radius-block-ui; | ||
| border: 1px solid $gray-900; | ||
| padding: $grid-unit-15 - 1px; // Subtract the border width. | ||
|
|
||
| .wp-block-widget-group__edit-form-title { | ||
| color: $black; | ||
| font-family: $default-font; | ||
| font-size: 14px; | ||
| font-weight: 600; | ||
| margin: 0 0 $grid-unit-15 0; | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { createBlock } from '@wordpress/blocks'; | ||
| import { group as icon } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import metadata from './block.json'; | ||
| import edit from './edit'; | ||
| import save from './save'; | ||
| const { name } = metadata; | ||
| export { metadata, name }; | ||
|
|
||
| export const settings = { | ||
| title: __( 'Widget Group' ), | ||
| description: __( | ||
| 'Create a classic widget layout with a title that’s styled by your theme for your widget areas.' | ||
| ), | ||
| icon, | ||
| __experimentalLabel: ( { name: label } ) => label, | ||
| edit, | ||
| save, | ||
| transforms: { | ||
| from: [ | ||
| { | ||
| type: 'block', | ||
| isMultiBlock: true, | ||
| blocks: [ '*' ], | ||
| isMatch( attributes, blocks ) { | ||
| // Avoid transforming existing `widget-group` blocks. | ||
| return ! blocks.some( | ||
| ( block ) => block.name === 'core/widget-group' | ||
| ); | ||
| }, | ||
| __experimentalConvert( blocks ) { | ||
| // Put the selected blocks inside the new Widget Group's innerBlocks. | ||
| let innerBlocks = [ | ||
| ...blocks.map( ( block ) => { | ||
| return createBlock( | ||
| block.name, | ||
| block.attributes, | ||
| block.innerBlocks | ||
| ); | ||
| } ), | ||
| ]; | ||
|
|
||
| // If the first block is a heading then assume this is intended | ||
| // to be the Widget's "title". | ||
| const firstHeadingBlock = | ||
| innerBlocks[ 0 ].name === 'core/heading' | ||
| ? innerBlocks[ 0 ] | ||
| : null; | ||
|
|
||
| // Remove the first heading block as we're copying | ||
| // it's content into the Widget Group's title attribute. | ||
| innerBlocks = innerBlocks.filter( | ||
| ( block ) => block !== firstHeadingBlock | ||
| ); | ||
|
|
||
| return createBlock( | ||
| 'core/widget-group', | ||
| { | ||
| ...( firstHeadingBlock && { | ||
| title: firstHeadingBlock.attributes.content, | ||
| } ), | ||
| }, | ||
| innerBlocks | ||
| ); | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }; |
Oops, something went wrong.