From 4b14897bc805ebe68093fca486b177eaa7e4513b Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 23 Dec 2020 15:31:00 +0200 Subject: [PATCH] Display Block Information by matching block variations (#27469) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * getBlockTypeWithVariationInfo selector, BlockDescription component and first changes to display the proper info * revert BlockCard component and make the passed attributes top level with depracation * remove BlockDescription * change InserterPreviewPanel to use BlockCard with passing top level properties * create new custom hook for block's display information * use new hook in BlockInspector * revert BlockIcon and augment BlockTitle * Navigation List View update * remove previous selector * refactor BlockSwitcher to function component and use the new hook * change hook * use CreateSelector and declare WPBlockDisplayInformation typedef * revert BlockSwitcher to handle in separate PR * remove getBlockDisplayInformation selector * add `isActive` API for block variations to use for trying to find a match * doc for `isActive` in block variation * jsdoc fix * address review feedback part 1 * fix BlockTitle tests * rename hook to `useBlockDisplayInformation` * fix export * useBlockDisplayInformation README * move login in useSelect * e2e tests * blockTitle extra safeguard that existed before * Update docs Co-authored-by: Greg Ziółkowski * Update docs Co-authored-by: Greg Ziółkowski * Update docs Co-authored-by: Greg Ziółkowski * Update docs Co-authored-by: Greg Ziółkowski * rewordings * remove experimental status * small refactoring Co-authored-by: Greg Ziółkowski --- .../block-api/block-registration.md | 35 +++++---- packages/block-editor/README.md | 24 +++++- .../src/components/block-card/index.js | 13 +++- .../src/components/block-inspector/index.js | 30 ++++++-- .../block-navigation/block-select-button.js | 16 ++-- .../src/components/block-title/index.js | 27 ++++--- .../src/components/block-title/test/index.js | 19 +++-- packages/block-editor/src/components/index.js | 1 + .../src/components/inserter/preview-panel.js | 21 ++++-- .../use-block-display-information/README.md | 42 +++++++++++ .../use-block-display-information/index.js | 70 ++++++++++++++++++ .../block-library/src/embed/variations.js | 12 +++ .../src/social-link/variations.js | 11 +++ packages/blocks/src/api/registration.js | 8 ++ .../plugins/block-variations/index.js | 4 + .../specs/editor/plugins/block-variations.js | 73 +++++++++++++++++++ 16 files changed, 345 insertions(+), 61 deletions(-) create mode 100644 packages/block-editor/src/components/use-block-display-information/README.md create mode 100644 packages/block-editor/src/components/use-block-display-information/index.js diff --git a/docs/designers-developers/developers/block-api/block-registration.md b/docs/designers-developers/developers/block-api/block-registration.md index 46560971890650..ffe0981510eb16 100644 --- a/docs/designers-developers/developers/block-api/block-registration.md +++ b/docs/designers-developers/developers/block-api/block-registration.md @@ -222,7 +222,7 @@ example: { #### variations (optional) -- **Type:** `Object[]` +- **Type:** `Object[]` Similarly to how the block's style variations can be declared, a block type can define block variations that the user can pick from. The difference is that, rather than changing only the visual appearance, this field provides a way to apply initial custom attributes and inner blocks at the time when a block is inserted. @@ -256,19 +256,20 @@ variations: [ An object describing a variation defined for the block type can contain the following fields: -- `name` (type `string`) – The unique and machine-readable name. -- `title` (type `string`) – A human-readable variation title. -- `description` (optional, type `string`) – A detailed variation description. -- `icon` (optional, type `string` | `Object`) – An icon helping to visualize the variation. It can have the same shape as the block type. -- `isDefault` (optional, type `boolean`) – Indicates whether the current variation is the default one. Defaults to `false`. -- `attributes` (optional, type `Object`) – Values that override block attributes. -- `innerBlocks` (optional, type `Array[]`) – Initial configuration of nested blocks. -- `example` (optional, type `Object`) – Example provides structured data for the block preview. You can set to `undefined` to disable the preview shown for the block type. -- `scope` (optional, type `WPBlockVariationScope[]`) - the list of scopes where the variation is applicable. When not provided, it defaults to `block` and `inserter`. Available options: - - `inserter` - Block Variation is shown on the inserter. - - `block` - Used by blocks to filter specific block variations. Mostly used in Placeholder patterns like `Columns` block. - - `transform` - Block Variation will be shown in the component for Block Variations transformations. -- `keywords` (optional, type `string[]`) - An array of terms (which can be translated) that help users discover the variation while searching. +- `name` (type `string`) – The unique and machine-readable name. +- `title` (type `string`) – A human-readable variation title. +- `description` (optional, type `string`) – A detailed variation description. +- `icon` (optional, type `string` | `Object`) – An icon helping to visualize the variation. It can have the same shape as the block type. +- `isDefault` (optional, type `boolean`) – Indicates whether the current variation is the default one. Defaults to `false`. +- `attributes` (optional, type `Object`) – Values that override block attributes. +- `innerBlocks` (optional, type `Array[]`) – Initial configuration of nested blocks. +- `example` (optional, type `Object`) – Example provides structured data for the block preview. You can set to `undefined` to disable the preview shown for the block type. +- `scope` (optional, type `WPBlockVariationScope[]`) - the list of scopes where the variation is applicable. When not provided, it defaults to `block` and `inserter`. Available options: + - `inserter` - Block Variation is shown on the inserter. + - `block` - Used by blocks to filter specific block variations. Mostly used in Placeholder patterns like `Columns` block. + - `transform` - Block Variation will be shown in the component for Block Variations transformations. +- `keywords` (optional, type `string[]`) - An array of terms (which can be translated) that help users discover the variation while searching. +- `isActive` (optional, type `Function`) - A function that accepts a block's attributes and the variation's attributes and determines if a variation is active. This function doesn't try to find a match dynamically based on all block's attributes, as in many cases some attributes are irrelevant. An example would be for `embed` block where we only care about `providerNameSlug` attribute's value. It's also possible to override the default block style variation using the `className` attribute when defining block variations. @@ -278,15 +279,17 @@ variations: [ name: 'blue', title: __( 'Blue Quote' ), isDefault: true, - attributes: { className: 'is-style-blue-quote' }, + attributes: { color: 'blue', className: 'is-style-blue-quote' }, icon: 'format-quote', + isActive: ( blockAttributes, variationAttributes ) => + blockAttributes.color === variationAttributes.color }, ], ``` #### supports (optional) -- ***Type:*** `Object` +- **_Type:_** `Object` Supports contains as set of options to control features used in the editor. See the [the supports documentation](/docs/designers-developers/developers/block-api/block-supports.md) for more details. diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 7ee086234ecd0d..95611432d3e1bb 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -19,12 +19,12 @@ import { BlockEditorProvider, BlockList, WritingFlow, - ObserveTyping + ObserveTyping, } from '@wordpress/block-editor'; import { SlotFillProvider, Popover } from '@wordpress/components'; import { useState } from '@wordpress/element'; -function MyEditorComponent () { +function MyEditorComponent() { const [ blocks, updateBlocks ] = useState( [] ); return ( @@ -568,6 +568,26 @@ _Related_ - +# **useBlockDisplayInformation** + +Hook used to try to find a matching block variation and return +the appropriate information for display reasons. In order to +to try to find a match we need to things: +1\. Block's client id to extract it's current attributes. +2\. A block variation should have set `isActive` prop to a proper function. + +If for any reason a block variaton match cannot be found, +the returned information come from the Block Type. +If no blockType is found with the provided clientId, returns null. + +_Parameters_ + +- _clientId_ `string`: Block's client id. + +_Returns_ + +- `?WPBlockDisplayInformation`: Block's display information, or `null` when the block or its type not found. + # **useBlockEditContext** Undocumented declaration. diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index c209ea39b5c73e..60f8616b5f49dd 100644 --- a/packages/block-editor/src/components/block-card/index.js +++ b/packages/block-editor/src/components/block-card/index.js @@ -1,9 +1,20 @@ +/** + * WordPress dependencies + */ +import deprecated from '@wordpress/deprecated'; + /** * Internal dependencies */ import BlockIcon from '../block-icon'; -function BlockCard( { blockType: { icon, title, description } } ) { +function BlockCard( { title, icon, description, blockType } ) { + if ( blockType ) { + deprecated( '`blockType` property in `BlockCard component`', { + alternative: '`title, icon and description` properties', + } ); + ( { title, icon, description } = blockType ); + } return (
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index be2433edbe39da..dd6edc46f5be04 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -25,6 +25,8 @@ import BlockStyles from '../block-styles'; import MultiSelectionInspector from '../multi-selection-inspector'; import DefaultStylePicker from '../default-style-picker'; import BlockVariationTransforms from '../block-variation-transforms'; +import useBlockDisplayInformation from '../use-block-display-information'; + const BlockInspector = ( { blockType, count, @@ -64,22 +66,36 @@ const BlockInspector = ( { } return null; } + return ( + + ); +}; +const BlockInspectorSingleBlock = ( { + clientId, + blockName, + hasBlockStyles, + bubblesVirtually, +} ) => { + const blockInformation = useBlockDisplayInformation( clientId ); return (
- - + + { hasBlockStyles && (
- + { hasBlockSupport( - blockType.name, + blockName, 'defaultStylePicker', true - ) && ( - - ) } + ) && }
) } diff --git a/packages/block-editor/src/components/block-navigation/block-select-button.js b/packages/block-editor/src/components/block-navigation/block-select-button.js index 2e9956d5387e18..e6f40a1ed62092 100644 --- a/packages/block-editor/src/components/block-navigation/block-select-button.js +++ b/packages/block-editor/src/components/block-navigation/block-select-button.js @@ -19,12 +19,13 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import BlockIcon from '../block-icon'; +import useBlockDisplayInformation from '../use-block-display-information'; import { getBlockPositionDescription } from './utils'; function BlockNavigationBlockSelectButton( { className, - block, + block: { clientId, name, attributes }, isSelected, onClick, position, @@ -38,12 +39,15 @@ function BlockNavigationBlockSelectButton( }, ref ) { - const { name, attributes } = block; - - const blockType = getBlockType( name ); - const blockDisplayName = getBlockLabel( blockType, attributes ); + const blockInformation = useBlockDisplayInformation( clientId ); const instanceId = useInstanceId( BlockNavigationBlockSelectButton ); const descriptionId = `block-navigation-block-select-button__${ instanceId }`; + const blockType = getBlockType( name ); + const blockLabel = getBlockLabel( blockType, attributes ); + // If label is defined we prioritize it over possible possible + // block variation match title. + const blockDisplayName = + blockLabel !== blockType.title ? blockLabel : blockInformation?.title; const blockPositionDescription = getBlockPositionDescription( position, siblingBlockCount, @@ -66,7 +70,7 @@ function BlockNavigationBlockSelectButton( onDragEnd={ onDragEnd } draggable={ draggable } > - + { blockDisplayName } { isSelected && ( diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index 3a36d53e12e17c..c7701527e07a09 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -12,6 +12,11 @@ import { __experimentalGetBlockLabel as getBlockLabel, } from '@wordpress/blocks'; +/** + * Internal dependencies + */ +import useBlockDisplayInformation from '../use-block-display-information'; + /** * Renders the block's configured title as a string, or empty if the title * cannot be determined. @@ -44,22 +49,16 @@ export default function BlockTitle( { clientId } ) { [ clientId ] ); - if ( ! name ) { - return null; - } - + const blockInformation = useBlockDisplayInformation( clientId ); + if ( ! name || ! blockInformation ) return null; const blockType = getBlockType( name ); - if ( ! blockType ) { - return null; - } - - const { title } = blockType; const label = getBlockLabel( blockType, attributes ); - - // Label will often fall back to the title if no label is defined for the + // Label will fallback to the title if no label is defined for the // current label context. We do not want "Paragraph: Paragraph". - if ( label !== title ) { - return `${ title }: ${ truncate( label, { length: 15 } ) }`; + // If label is defined we prioritize it over possible possible + // block variation match title. + if ( label !== blockType.title ) { + return `${ blockType.title }: ${ truncate( label, { length: 15 } ) }`; } - return title; + return blockInformation.title; } diff --git a/packages/block-editor/src/components/block-title/test/index.js b/packages/block-editor/src/components/block-title/test/index.js index d268699d09668d..23af6288130e01 100644 --- a/packages/block-editor/src/components/block-title/test/index.js +++ b/packages/block-editor/src/components/block-title/test/index.js @@ -45,6 +45,15 @@ jest.mock( '@wordpress/blocks', () => { }; } ); +jest.mock( '../../use-block-display-information', () => { + const resultsMap = { + 'id-name-exists': { title: 'Block Title' }, + 'id-name-with-label': { title: 'Block With Label' }, + 'id-name-with-long-label': { title: 'Block With Long Label' }, + }; + return jest.fn( ( clientId ) => resultsMap[ clientId ] ); +} ); + jest.mock( '@wordpress/data/src/components/use-select', () => { // This allows us to tweak the returned value on each test const mock = jest.fn(); @@ -81,9 +90,7 @@ describe( 'BlockTitle', () => { attributes: null, } ) ); - const wrapper = shallow( - - ); + const wrapper = shallow( ); expect( wrapper.text() ).toBe( 'Block Title' ); } ); @@ -94,9 +101,7 @@ describe( 'BlockTitle', () => { attributes: null, } ) ); - const wrapper = shallow( - - ); + const wrapper = shallow( ); expect( wrapper.text() ).toBe( 'Block With Label: Test Label' ); } ); @@ -108,7 +113,7 @@ describe( 'BlockTitle', () => { } ) ); const wrapper = shallow( - + ); expect( wrapper.text() ).toBe( diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 3e845204bed823..551f83f8b4d663 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -118,6 +118,7 @@ export { export { default as Warning } from './warning'; export { default as WritingFlow } from './writing-flow'; export { useCanvasClickRedirect as __unstableUseCanvasClickRedirect } from './use-canvas-click-redirect'; +export { default as useBlockDisplayInformation } from './use-block-display-information'; /* * State Related Components diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js index 11c87d647097d6..3242ca306ffaeb 100644 --- a/packages/block-editor/src/components/inserter/preview-panel.js +++ b/packages/block-editor/src/components/inserter/preview-panel.js @@ -16,11 +16,13 @@ import BlockCard from '../block-card'; import BlockPreview from '../block-preview'; function InserterPreviewPanel( { item } ) { - const hoveredItemBlockType = getBlockType( item.name ); + const { name, title, icon, description, initialAttributes } = item; + const hoveredItemBlockType = getBlockType( name ); + const isReusable = isReusableBlock( item ); return (
- { isReusableBlock( item ) || hoveredItemBlockType.example ? ( + { isReusable || hoveredItemBlockType.example ? (
@@ -53,7 +52,13 @@ function InserterPreviewPanel( { item } ) {
) }
- { ! isReusableBlock( item ) && } + { ! isReusable && ( + + ) }
); } diff --git a/packages/block-editor/src/components/use-block-display-information/README.md b/packages/block-editor/src/components/use-block-display-information/README.md new file mode 100644 index 00000000000000..6d52ee452cc48a --- /dev/null +++ b/packages/block-editor/src/components/use-block-display-information/README.md @@ -0,0 +1,42 @@ +# useBlockDisplayInformation + +A React Hook that tries to find a matching block variation and returns the appropriate information for display reasons. In order to try to find a match we need two things: + +1. Block's client id to extract its current attributes. +2. A block variation has `isActive` prop defined with a matcher function. + +If for any reason a block variaton match cannot be found, the returned information come from the Block Type. + +### Usage + +The hook returns an object which contains the block's title, icon, and description. If no block type is found for the provided `clientId`, it returns `null`. + +```jsx +import { + BlockIcon, + useBlockDisplayInformation, +} from '@wordpress/block-editor'; + +function DemoBlockCard( { clientId } ) { + const blockInformation = useBlockDisplayInformation( clientId ); + const { title, icon, description } = blockInformation; + return ( +
+ +

{ title }

+

{ description }

+
+ ); +} +``` + +## Props + +The hook accepts the following props. + +### clientId + +A block's clientId + +- Type: `String` +- Required: Yes diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js new file mode 100644 index 00000000000000..7ee0d350ffef8a --- /dev/null +++ b/packages/block-editor/src/components/use-block-display-information/index.js @@ -0,0 +1,70 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as blocksStore } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; + +/** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */ + +/** + * Contains basic block's information for display reasons. + * + * @typedef {Object} WPBlockDisplayInformation + * + * @property {string} title Human-readable block type label. + * @property {WPIcon} icon Block type icon. + * @property {string} description A detailed block type description. + */ + +/** + * Hook used to try to find a matching block variation and return + * the appropriate information for display reasons. In order to + * to try to find a match we need to things: + * 1. Block's client id to extract it's current attributes. + * 2. A block variation should have set `isActive` prop to a proper function. + * + * If for any reason a block variaton match cannot be found, + * the returned information come from the Block Type. + * If no blockType is found with the provided clientId, returns null. + * + * @param {string} clientId Block's client id. + * @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found. + */ + +export default function useBlockDisplayInformation( clientId ) { + return useSelect( + ( select ) => { + if ( ! clientId ) return null; + const { getBlockName, getBlockAttributes } = select( + blockEditorStore + ); + const { getBlockType, getBlockVariations } = select( blocksStore ); + const blockName = getBlockName( clientId ); + const blockType = getBlockType( blockName ); + if ( ! blockType ) return null; + const variations = getBlockVariations( blockName ); + const blockTypeInfo = { + title: blockType.title, + icon: blockType.icon, + description: blockType.description, + }; + if ( ! variations?.length ) return blockTypeInfo; + const attributes = getBlockAttributes( clientId ); + const match = variations.find( ( variation ) => + variation.isActive?.( attributes, variation.attributes ) + ); + if ( ! match ) return blockTypeInfo; + return { + title: match.title || blockType.title, + icon: match.icon || blockType.icon, + description: match.description || blockType.description, + }; + }, + [ clientId ] + ); +} diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index 34a1b8f66f43c9..02c68d0cb88cad 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -339,4 +339,16 @@ const variations = [ }, ]; +/** + * Add `isActive` function to all `embed` 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 ) => + blockAttributes.providerNameSlug === + variationAttributes.providerNameSlug; +} ); + export default variations; diff --git a/packages/block-library/src/social-link/variations.js b/packages/block-library/src/social-link/variations.js index 4297ced3c41718..a2f259feaaabbd 100644 --- a/packages/block-library/src/social-link/variations.js +++ b/packages/block-library/src/social-link/variations.js @@ -304,4 +304,15 @@ const variations = [ }, ]; +/** + * Add `isActive` function to all `social link` 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 ) => + blockAttributes.service === variationAttributes.service; +} ); + export default variations; diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js index d628cdfae0306c..7c1ce2c1643384 100644 --- a/packages/blocks/src/api/registration.js +++ b/packages/blocks/src/api/registration.js @@ -97,6 +97,14 @@ import { store as blocksStore } from '../store'; * @property {string[]} [keywords] An array of terms (which can be translated) * that help users discover the variation * while searching. + * @property {Function} [isActive] A function that accepts a block's attributes + * and the variation's attributes and determines + * if a variation is active. This function doesn't + * try to find a match dynamically based on all + * block's attributes, as in many cases some + * attributes are irrelevant. An example would + * be for `embed` block where we only care about + * `providerNameSlug` attribute's value. */ /** diff --git a/packages/e2e-tests/plugins/block-variations/index.js b/packages/e2e-tests/plugins/block-variations/index.js index 3a76ae7d42db66..219eedd6bec5e9 100644 --- a/packages/e2e-tests/plugins/block-variations/index.js +++ b/packages/e2e-tests/plugins/block-variations/index.js @@ -40,6 +40,8 @@ }, icon: 'yes-alt', scope: [ 'inserter' ], + isActive: ( { backgroundColor }, variationAttributes ) => + backgroundColor === variationAttributes.backgroundColor, } ); registerBlockVariation( 'core/paragraph', { @@ -52,6 +54,8 @@ }, icon: 'warning', scope: [ 'inserter' ], + isActive: ( { backgroundColor }, variationAttributes ) => + backgroundColor === variationAttributes.backgroundColor, } ); registerBlockVariation( 'core/columns', { diff --git a/packages/e2e-tests/specs/editor/plugins/block-variations.js b/packages/e2e-tests/specs/editor/plugins/block-variations.js index ef4a17360284a3..81862f42a5e304 100644 --- a/packages/e2e-tests/specs/editor/plugins/block-variations.js +++ b/packages/e2e-tests/specs/editor/plugins/block-variations.js @@ -7,6 +7,8 @@ import { deactivatePlugin, insertBlock, searchForBlock, + pressKeyWithModifier, + openDocumentSettingsSidebar, } from '@wordpress/e2e-test-utils'; describe( 'Block variations', () => { @@ -103,4 +105,75 @@ describe( 'Block variations', () => { ) ).toHaveLength( 4 ); } ); + // @see @wordpres/block-editor/src/components/use-block-display-information (`useBlockDisplayInformation` hook). + describe( 'testing block display information with matching variations', () => { + const getActiveBreadcrumb = async () => + page.evaluate( + () => + document.querySelector( + '.block-editor-block-breadcrumb__current' + ).textContent + ); + const getFirstNavigationItem = async () => { + await pressKeyWithModifier( 'access', 'o' ); + // This also returns the visually hidden text `(selected block)`. + // For example `Paragraph(selected block)`. In order to hide this + // implementation detail and search for childNodes, we choose to + // test with `String.prototype.startsWith()`. + return page.evaluate( + () => + document.querySelector( + '.block-editor-block-navigation-block-select-button' + ).textContent + ); + }; + const getBlockCardDescription = async () => { + await openDocumentSettingsSidebar(); + return page.evaluate( + () => + document.querySelector( + '.block-editor-block-card__description' + ).textContent + ); + }; + + it( 'should show block information when no matching variation is found', async () => { + await insertBlock( 'Large Quote' ); + const breadcrumb = await getActiveBreadcrumb(); + expect( breadcrumb ).toEqual( 'Quote' ); + const navigationItem = await getFirstNavigationItem(); + expect( navigationItem.startsWith( 'Quote' ) ).toBeTruthy(); + const description = await getBlockCardDescription(); + expect( description ).toEqual( + 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' + ); + } ); + it( 'should display variations info if all declared', async () => { + await insertBlock( 'Success Message' ); + const breadcrumb = await getActiveBreadcrumb(); + expect( breadcrumb ).toEqual( 'Success Message' ); + const navigationItem = await getFirstNavigationItem(); + expect( + navigationItem.startsWith( 'Success Message' ) + ).toBeTruthy(); + const description = await getBlockCardDescription(); + expect( description ).toEqual( + 'This block displays a success message. This description overrides the default one provided for the Paragraph block.' + ); + } ); + it( 'should display mixed block and variation match information', async () => { + // Warning Message variation is missing the `description`. + await insertBlock( 'Warning Message' ); + const breadcrumb = await getActiveBreadcrumb(); + expect( breadcrumb ).toEqual( 'Warning Message' ); + const navigationItem = await getFirstNavigationItem(); + expect( + navigationItem.startsWith( 'Warning Message' ) + ).toBeTruthy(); + const description = await getBlockCardDescription(); + expect( description ).toEqual( + 'Start with the building block of all narrative.' + ); + } ); + } ); } );