-
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.
Template part - register block variations and area selection inputs f…
…rom original area definitions. (#30821) * register variations from editor store * add definitons to post editor settings * remove unnecessary export var * minor refactor * update block inspector area selection * move icons to original definitions * fix unit tests * move default wrapper element to original definition * update default tag on front end * update jsdoc param description * update jsdoc description * add properties to general, handle defaultWrapper in placeholder * remove unnecessary null check * Update packages/editor/src/store/utils/get-template-part-icon.js Co-authored-by: Nik Tsekouras <[email protected]> Co-authored-by: Nik Tsekouras <[email protected]>
- Loading branch information
1 parent
a3acd0d
commit e5b0a86
Showing
11 changed files
with
122 additions
and
103 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
9 changes: 0 additions & 9 deletions
9
packages/block-library/src/template-part/edit/get-tag-based-on-area.js
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
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 |
|---|---|---|
| @@ -1,56 +1,60 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { footer, header } from '@wordpress/icons'; | ||
| import { store as coreDataStore } from '@wordpress/core-data'; | ||
| import { select } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { store as editorStore } from '@wordpress/editor'; | ||
| import { store as blocksStore } from '@wordpress/blocks'; | ||
| import { dispatch, select, subscribe } from '@wordpress/data'; | ||
|
|
||
| const variations = [ | ||
| { | ||
| name: 'header', | ||
| title: __( 'Header' ), | ||
| description: __( | ||
| "The header template defines a page area that typically contains a title, logo, and main navigation. Since it's a global element it can be present across all pages and posts." | ||
| ), | ||
| icon: header, | ||
| attributes: { area: 'header' }, | ||
| scope: [ 'inserter' ], | ||
| }, | ||
| { | ||
| name: 'footer', | ||
| title: __( 'Footer' ), | ||
| description: __( | ||
| "The footer template defines a page area that typically contains site credits, social links, or any other combination of blocks. Since it's a global element it can be present across all pages and posts." | ||
| ), | ||
| icon: footer, | ||
| attributes: { area: 'footer' }, | ||
| scope: [ 'inserter' ], | ||
| }, | ||
| ]; | ||
| const unsubscribe = subscribe( () => { | ||
| const definedVariations = select( | ||
| editorStore | ||
| ).__experimentalGetDefaultTemplatePartAreas(); | ||
|
|
||
| /** | ||
| * Add `isActive` function to all `Template Part` variations, if not defined. | ||
| * `isActive` function is used to find a variation match from a created | ||
| * Block by providing its attributes. | ||
| */ | ||
| variations.forEach( ( variation ) => { | ||
| if ( variation.isActive ) return; | ||
| variation.isActive = ( blockAttributes, variationAttributes ) => { | ||
| const { area, theme, slug } = blockAttributes; | ||
| // We first check the `area` block attribute which is set during insertion. | ||
| // This property is removed on the creation of a template part. | ||
| if ( area ) return area === variationAttributes.area; | ||
| // Find a matching variation from the created template part | ||
| // by checking the entity's `area` property. | ||
| if ( ! slug ) return false; | ||
| const entity = select( coreDataStore ).getEntityRecord( | ||
| 'postType', | ||
| 'wp_template_part', | ||
| `${ theme }//${ slug }` | ||
| ); | ||
| return entity?.area === variationAttributes.area; | ||
| }; | ||
| } ); | ||
| if ( ! definedVariations?.length ) { | ||
| return; | ||
| } | ||
| unsubscribe(); | ||
|
|
||
| export default variations; | ||
| const variations = definedVariations | ||
| .filter( ( { area } ) => 'uncategorized' !== area ) | ||
| .map( ( { area, label, description, icon } ) => { | ||
| return { | ||
| name: area, | ||
| title: label, | ||
| description, | ||
| icon, | ||
| attributes: { area }, | ||
| scope: [ 'inserter' ], | ||
| }; | ||
| } ); | ||
|
|
||
| /** | ||
| * Add `isActive` function to all `Template Part` variations, if not defined. | ||
| * `isActive` function is used to find a variation match from a created | ||
| * Block by providing its attributes. | ||
| */ | ||
| variations.forEach( ( variation ) => { | ||
| if ( variation.isActive ) return; | ||
| variation.isActive = ( blockAttributes, variationAttributes ) => { | ||
| const { area, theme, slug } = blockAttributes; | ||
| // We first check the `area` block attribute which is set during insertion. | ||
| // This property is removed on the creation of a template part. | ||
| if ( area ) return area === variationAttributes.area; | ||
| // Find a matching variation from the created template part | ||
| // by checking the entity's `area` property. | ||
| if ( ! slug ) return false; | ||
| const entity = select( coreDataStore ).getEntityRecord( | ||
| 'postType', | ||
| 'wp_template_part', | ||
| `${ theme }//${ slug }` | ||
| ); | ||
| return entity?.area === variationAttributes.area; | ||
| }; | ||
| } ); | ||
|
|
||
| dispatch( blocksStore ).addBlockVariations( | ||
| 'core/template-part', | ||
| variations | ||
| ); | ||
| } ); |
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
Oops, something went wrong.