Skip to content

Commit

Permalink
Use metadata object attribute (+3 squashed commits)
Browse files Browse the repository at this point in the history
Squashed commits:
[c1bd86cd5d] Use section object
[7667d1715e] Add unit test
[e7d647eb76] Add: Section concept
  • Loading branch information
jorgefilipecosta committed May 5, 2022
1 parent 1326a46 commit 871b7ed
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 6 deletions.
14 changes: 14 additions & 0 deletions docs/reference-guides/block-api/block-supports.md
Original file line number Diff line number Diff line change
Expand Up @@ -664,3 +664,17 @@ attributes: {
}
}
```

### __experimentalMetadata

- Type: `boolean`
- Default value: `false`

The block gets the `metadata` attribute added to the block definition when `__experimentalMetadata` is true. The `metadata` attribute has the type `object` without a default value provided. Blocks can manually add this attribute and set their defaults.
The metadata attribute contains information related to the block.

For now, the following metadata properties are available:
- `name` - Contains a descriptive name of the block shown on the block switcher and blocklist view. E.g., A group block may be named "404 Section".

This functionality is experimental, and the properties could be added or removed.
In the future, `__experimentalMetadata` support may not exist, and the `metadata` attribute may be added unconditionally to all the blocks.
14 changes: 9 additions & 5 deletions packages/block-editor/src/components/block-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,18 +43,19 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
icon,
blockTitle,
patterns,
hasBlockName,
} = useSelect(
( select ) => {
const {
getBlockRootClientId,
getBlockTransformItems,
__experimentalGetPatternTransformItems,
getBlockAttributes,
} = select( blockEditorStore );
const { getBlockStyles, getBlockType } = select( blocksStore );
const { canRemoveBlocks } = select( blockEditorStore );
const rootClientId = getBlockRootClientId(
castArray( clientIds )[ 0 ]
);
const clientId = castArray( clientIds )[ 0 ];
const rootClientId = getBlockRootClientId( clientId );
const [ { name: firstBlockName } ] = blocks;
const _isSingleBlockSelected = blocks.length === 1;
const styles =
Expand Down Expand Up @@ -84,6 +85,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
blocks,
rootClientId
),
hasBlockName: !! getBlockAttributes( clientId ).metadata?.name,
};
},
[ clientIds, blocks, blockInformation?.icon ]
Expand Down Expand Up @@ -111,7 +113,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
icon={
<>
<BlockIcon icon={ icon } showColors />
{ ( isReusable || isTemplate ) && (
{ ( hasBlockName || isReusable || isTemplate ) && (
<span className="block-editor-block-switcher__toggle-text">
<BlockTitle
clientId={ clientIds }
Expand Down Expand Up @@ -168,7 +170,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
className="block-editor-block-switcher__toggle"
showColors
/>
{ ( isReusable || isTemplate ) && (
{ ( isReusable ||
isTemplate ||
hasBlockName ) && (
<span className="block-editor-block-switcher__toggle-text">
<BlockTitle
clientId={ clientIds }
Expand Down
22 changes: 22 additions & 0 deletions packages/block-editor/src/components/block-title/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ jest.mock( '@wordpress/blocks', () => {

case 'name-with-long-label':
return { title: 'Block With Long Label' };
case 'name-with-section':
return { title: 'Block With Section Support' };
}
},
__experimentalGetBlockLabel( { title } ) {
Expand All @@ -48,6 +50,11 @@ jest.mock( '@wordpress/blocks', () => {
return title;
}
},
hasBlockSupport( name, support, defaultSupport = false ) {
if ( support === '__experimentalMetadata' ) {
return name === 'name-with-section' ? true : defaultSupport;
}
},
};
} );

Expand Down Expand Up @@ -178,4 +185,19 @@ describe( 'BlockTitle', () => {
'This is a longer label than typical for blocks to have.'
);
} );

it( 'should return section title if the block supports it', () => {
useSelect.mockImplementation( () => ( {
name: 'name-with-section',
attributes: {
metadata: { name: 'My custom section' },
},
} ) );

const wrapper = shallow(
<BlockTitle clientId="id-name-with-long-label" />
);

expect( wrapper.text() ).toBe( 'My custom section' );
} );
} );
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,9 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
? getBlockLabel( blockType, attributes )
: null;

const label = reusableBlockTitle || blockLabel;
const blockName = attributes?.metadata?.name;

const label = blockName || reusableBlockTitle || blockLabel;
// Label will fallback to the title if no label is defined for the current
// label context. If the label is defined we prioritize it over a
// possible block variation title match.
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import './compat';
import './align';
import './lock';
import './metadata';
import './anchor';
import './custom-class-name';
import './generated-class-name';
Expand Down
40 changes: 40 additions & 0 deletions packages/block-editor/src/hooks/metadata.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* External dependencies
*/
import { has } from 'lodash';

/**
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { hasBlockSupport } from '@wordpress/blocks';

/**
* Filters registered block settings, extending attributes to include `metadata` in blocks declaring section support.
*
* @param {Object} blockTypeSettings Original block settings.
*
* @return {Object} Filtered block settings.
*/
export function addAttribute( blockTypeSettings ) {
if (
hasBlockSupport( blockTypeSettings, '__experimentalMetadata', false )
) {
// Allow blocks to specify their own metadata attribute definition with default value if needed.
if ( ! has( blockTypeSettings.attributes, [ 'metadata' ] ) ) {
blockTypeSettings.attributes = {
...blockTypeSettings.attributes,
metadata: {
type: 'object',
},
};
}
}
return blockTypeSettings;
}

addFilter(
'blocks.registerBlockType',
'core/metadata/addAttribute',
addAttribute
);
1 change: 1 addition & 0 deletions packages/block-library/src/group/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"align": [ "wide", "full" ],
"anchor": true,
"html": false,
"__experimentalMetadata": true,
"color": {
"gradients": true,
"link": true,
Expand Down

0 comments on commit 871b7ed

Please sign in to comment.