diff --git a/packages/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md index 18e7ead5d1805..f4c6cc6141de1 100644 --- a/packages/block-editor/src/components/block-patterns-list/README.md +++ b/packages/block-editor/src/components/block-patterns-list/README.md @@ -61,6 +61,14 @@ The aria label for the block patterns list. - Required: No - Default: `Block Patterns` +#### showTitlesAsTooltip + +Whether to render the title of each pattern as a tooltip. User-defined patterns always show their visual title regardless of this prop. + +- Type: `boolean` +- Required: No +- Default: `false` + ## Related components Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree. diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index 741a92ddf10df..8128e89418f45 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -39,14 +39,14 @@ function BlockPattern( { pattern, onClick, onHover, - showTitle = true, - showTooltip, + showTitlesAsTooltip, category, } ) { const [ isDragging, setIsDragging ] = useState( false ); const { blocks, viewportWidth } = pattern; const instanceId = useInstanceId( BlockPattern ); const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`; + const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user; // When we have a selected category and the pattern is draggable, we need to update the // pattern's categories in metadata to only contain the selected category, and pass this to @@ -94,10 +94,7 @@ function BlockPattern( { } } > - - { showTitle && ( + { ( ! showTitlesAsTooltip || isUserPattern ) && ( - { pattern.type === - INSERTER_PATTERN_TYPES.user && - ! pattern.syncStatus && ( -
- -
- ) } - { ( ! showTooltip || - pattern.type === - INSERTER_PATTERN_TYPES.user ) && ( -
- { pattern.title } + { isUserPattern && ! pattern.syncStatus && ( +
+
) } +
+ { pattern.title } +
) } @@ -196,7 +186,6 @@ function BlockPatternsList( orientation, label = __( 'Block patterns' ), category, - showTitle = true, showTitlesAsTooltip, pagingProps, }, @@ -230,8 +219,7 @@ function BlockPatternsList( onClick={ onClickPattern } onHover={ onHover } isDraggable={ isDraggable } - showTitle={ showTitle } - showTooltip={ showTitlesAsTooltip } + showTitlesAsTooltip={ showTitlesAsTooltip } category={ category } /> ) ) } diff --git a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js index 0ebb4520d98fd..ad9bffab762c2 100644 --- a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js +++ b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js @@ -31,7 +31,6 @@ export const Default = { blockPatterns: patterns, isDraggable: false, label: 'Block patterns story', - showTitle: true, showTitlesAsTooltip: false, }, argTypes: { @@ -40,18 +39,11 @@ export const Default = { description: 'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.', }, - showTitle: { - description: 'Whether to render the title of each pattern.', - table: { - defaultValue: { summary: true }, - type: { summary: 'boolean' }, - }, - }, onClickPattern: { type: 'function' }, onHover: { type: 'function' }, showTitlesAsTooltip: { description: - 'Whether to render the title of each pattern as a tooltip. If enabled, it takes precedence over `showTitle` prop.', + 'Whether to render the title of each pattern as a tooltip. If enabled', }, orientation: { description: 'Orientation for the underlying composite widget.', diff --git a/packages/block-editor/src/components/block-toolbar/change-design.js b/packages/block-editor/src/components/block-toolbar/change-design.js index 9da1affe4273c..2d69675218ea4 100644 --- a/packages/block-editor/src/components/block-toolbar/change-design.js +++ b/packages/block-editor/src/components/block-toolbar/change-design.js @@ -118,7 +118,7 @@ export default function ChangeDesign( { clientId } ) { ) } diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 141ebf8cc8401..01e41111b7c89 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -79,7 +79,6 @@ function BlockPatternsTab( { onInsert={ onInsert } rootClientId={ rootClientId } category={ category } - showTitlesAsTooltip={ false } />
) } diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index a318fd285cdc3..ba66ffa673ff8 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -95,7 +95,7 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) { label={ __( 'Templates' ) } blockPatterns={ blockPatterns } onClickPattern={ onSelect } - showTitle={ false } + showTitlesAsTooltip /> );