Fix Site title: Different markup in the editor and on the frontend (#…

…29021) Update Site Title markup in the editor
WordPress · Mar 17, 2021 · 3d9f76e · 3d9f76e
1 parent 7f58c19
commit 3d9f76e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json
@@ -20,6 +20,7 @@
 		"fontSize": true,
 		"lineHeight": true,
 		"__experimentalFontFamily": true,
+		"__experimentalSelector": ".wp-block-site-title, .wp-block-site-title > a",
 		"__experimentalTextTransform": true
 	}
 }
diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js
@@ -23,13 +23,12 @@ import LevelToolbar from './level-toolbar';
 export default function SiteTitleEdit( { attributes, setAttributes } ) {
 	const { level, textAlign } = attributes;
 	const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
-	const tagName = level === 0 ? 'p' : `h${ level }`;
+	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
-
 	return (
 		<>
 			<BlockControls>
@@ -47,17 +46,17 @@ export default function SiteTitleEdit( { attributes, setAttributes } ) {
 					}
 				/>
 			</BlockControls>
-
-			<RichText
-				tagName={ tagName }
-				aria-label={ __( 'Site title text' ) }
-				placeholder={ __( 'Write site title…' ) }
-				value={ title }
-				onChange={ setTitle }
-				allowedFormats={ [] }
-				disableLineBreaks
-				{ ...blockProps }
-			/>
+			<TagName { ...blockProps }>
+				<RichText
+					tagName="a"
+					aria-label={ __( 'Site title text' ) }
+					placeholder={ __( 'Write site title…' ) }
+					value={ title }
+					onChange={ setTitle }
+					allowedFormats={ [] }
+					disableLineBreaks
+				/>
+			</TagName>
 		</>
 	);
 }