diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js index d36bc4ae80aa16..b39aa070c529e3 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -28,6 +28,7 @@ const SetupContent = ( { activeSlide, patterns, onBlockPatternSelect, + showTitles, } ) => { const composite = useCompositeState(); const containerClass = 'block-editor-block-pattern-setup__container'; @@ -67,6 +68,7 @@ const SetupContent = ( { pattern={ pattern } onSelect={ onBlockPatternSelect } composite={ composite } + showTitles={ showTitles } /> ) ) } @@ -74,7 +76,7 @@ const SetupContent = ( { ); }; -function BlockPattern( { pattern, onSelect, composite } ) { +function BlockPattern( { pattern, onSelect, composite, showTitles } ) { const baseClassName = 'block-editor-block-pattern-setup-list'; const { blocks, description, viewportWidth = 700 } = pattern; const descriptionId = useInstanceId( @@ -98,12 +100,17 @@ function BlockPattern( { pattern, onSelect, composite } ) { blocks={ blocks } viewportWidth={ viewportWidth } /> + { showTitles && ( +
+ { pattern.title } +
+ ) } + { !! description && ( + + { description } + + ) } - { !! description && ( - - { description } - - ) } ); } @@ -139,6 +146,7 @@ const BlockPatternSetup = ( { filterPatternsFn, onBlockPatternSelect, initialViewMode = VIEWMODES.carousel, + showTitles = false, } ) => { const [ viewMode, setViewMode ] = useState( initialViewMode ); const [ activeSlide, setActiveSlide ] = useState( 0 ); @@ -165,6 +173,7 @@ const BlockPatternSetup = ( { activeSlide={ activeSlide } patterns={ patterns } onBlockPatternSelect={ onPatternSelectCallback } + showTitles={ showTitles } />