diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 4c8df25bc24f7..184581c5c9e8a 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -847,7 +847,7 @@ Describe in a few words what the site is about. The tagline can be used in searc - **Name:** core/site-tagline - **Category:** theme - **Supports:** align (full, wide), color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** textAlign +- **Attributes:** level, textAlign ## Site Title diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json index 2361be9ea3efc..01ec727eb9053 100644 --- a/packages/block-library/src/site-tagline/block.json +++ b/packages/block-library/src/site-tagline/block.json @@ -10,6 +10,10 @@ "attributes": { "textAlign": { "type": "string" + }, + "level": { + "type": "number", + "default": 0 } }, "example": {}, diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js index 1ce13c6eb43c4..e4ea535966044 100644 --- a/packages/block-library/src/site-tagline/edit.js +++ b/packages/block-library/src/site-tagline/edit.js @@ -12,17 +12,20 @@ import { AlignmentControl, useBlockProps, BlockControls, + HeadingLevelDropdown, RichText, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; +const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ]; + export default function SiteTaglineEdit( { attributes, setAttributes, insertBlocksAfter, } ) { - const { textAlign } = attributes; + const { textAlign, level } = attributes; const { canUserEdit, tagline } = useSelect( ( select ) => { const { canUser, getEntityRecord, getEditedEntityRecord } = select( coreStore ); @@ -38,6 +41,7 @@ export default function SiteTaglineEdit( { }; }, [] ); + const TagName = level === 0 ? 'p' : `h${ level }`; const { editEntityRecord } = useDispatch( coreStore ); function setTagline( newTagline ) { @@ -58,7 +62,7 @@ export default function SiteTaglineEdit( { onChange={ setTagline } aria-label={ __( 'Site tagline text' ) } placeholder={ __( 'Write site taglineā€¦' ) } - tagName="p" + tagName={ TagName } value={ tagline } disableLineBreaks __unstableOnSplitAtEnd={ () => @@ -67,11 +71,20 @@ export default function SiteTaglineEdit( { { ...blockProps } /> ) : ( -

{ tagline || __( 'Site Tagline placeholder' ) }

+ + { tagline || __( 'Site Tagline placeholder' ) } + ); return ( <> + + setAttributes( { level: newLevel } ) + } + /> setAttributes( { textAlign: newAlign } ) diff --git a/packages/block-library/src/site-tagline/index.php b/packages/block-library/src/site-tagline/index.php index 840ba79762ce5..b59e1e556c320 100644 --- a/packages/block-library/src/site-tagline/index.php +++ b/packages/block-library/src/site-tagline/index.php @@ -19,11 +19,18 @@ function render_block_core_site_tagline( $attributes ) { if ( ! $site_tagline ) { return; } + + $tag_name = 'p'; $align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}"; $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) ); + if ( isset( $attributes['level'] ) && 0 !== $attributes['level'] ) { + $tag_name = 'h' . (int) $attributes['level']; + } + return sprintf( - '

%2$s

', + '<%1$s %2$s>%3$s', + $tag_name, $wrapper_attributes, $site_tagline ); @@ -42,4 +49,5 @@ function register_block_core_site_tagline() { ) ); } + add_action( 'init', 'register_block_core_site_tagline' ); diff --git a/test/integration/fixtures/blocks/core__site-tagline.json b/test/integration/fixtures/blocks/core__site-tagline.json index 7e15e1e8bb75c..e504bc75df30c 100644 --- a/test/integration/fixtures/blocks/core__site-tagline.json +++ b/test/integration/fixtures/blocks/core__site-tagline.json @@ -2,7 +2,9 @@ { "name": "core/site-tagline", "isValid": true, - "attributes": {}, + "attributes": { + "level": 0 + }, "innerBlocks": [] } ]