Post Title Block: Add alignment and heading level support (#22872)

* Add support to the post title block for text alignment and heading level. * Fix up classname output, and add a default post title classname. * Add lightBlockWrapper, and __experimentalSelector to block.json. * Fix block JSON trailing comma. * Fix PHP spacing lint errors. * Update the core post title fixture.
WordPress · Jun 8, 2020 · d58f258 · d58f258
1 parent 2f3ea7b
commit d58f258
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 5 deletions.
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
@@ -5,7 +5,26 @@
 		"postId",
 		"postType"
 	],
+	"attributes": {
+		"align": {
+			"type": "string"
+		},
+		"level": {
+			"type": "number",
+			"default": 2
+		}
+	},
 	"supports": {
-		"html": false
+		"html": false,
+		"lightBlockWrapper": true,
+		"__experimentalSelector": {
+			"core/post-title/h1": "h1",
+			"core/post-title/h2": "h2",
+			"core/post-title/h3": "h3",
+			"core/post-title/h4": "h4",
+			"core/post-title/h5": "h5",
+			"core/post-title/h6": "h6",
+			"core/post-title/p": "p"
+		}
 	}
 }
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
@@ -1,10 +1,32 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	__experimentalBlock as Block,
+} from '@wordpress/block-editor';
+import { ToolbarGroup } from '@wordpress/components';
 
-export default function PostTitleEdit( { context } ) {
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from '../heading/heading-level-dropdown';
+
+export default function PostTitleEdit( {
+	attributes,
+	setAttributes,
+	context,
+} ) {
+	const { level, align } = attributes;
 	const { postType, postId } = context;
+	const tagName = 0 === level ? 'p' : 'h' + level;
 
 	const post = useSelect(
 		( select ) =>
@@ -20,5 +42,32 @@ export default function PostTitleEdit( { context } ) {
 		return null;
 	}
 
-	return <h2>{ post.title }</h2>;
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<HeadingLevelDropdown
+						selectedLevel={ level }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+				</ToolbarGroup>
+				<AlignmentToolbar
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { align: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<Block
+				tagName={ tagName }
+				className={ classnames( {
+					[ `has-text-align-${ align }` ]: align,
+				} ) }
+			>
+				{ post.title }
+			</Block>
+		</>
+	);
 }
diff --git a/packages/block-library/src/post-title/index.php b/packages/block-library/src/post-title/index.php
@@ -19,7 +19,19 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		return '';
 	}
 
-	return '<h1>' . get_the_title( $block->context['postId'] ) . '</h1>';
+	$tag_name         = 'h2';
+	$align_class_name = empty( $attributes['align'] ) ? '' : ' ' . "has-text-align-{$attributes['align']}";
+
+	if ( isset( $attributes['level'] ) ) {
+		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
+	}
+
+	return sprintf(
+		'<%1$s class="%2$s">%3$s</%1$s>',
+		$tag_name,
+		'wp-block-post-title' . esc_attr( $align_class_name ),
+		get_the_title( $block->context['postId'] )
+	);
 }
 
 /**

diff --git a/packages/e2e-tests/fixtures/blocks/core__post-title.json b/packages/e2e-tests/fixtures/blocks/core__post-title.json
@@ -3,7 +3,9 @@
         "clientId": "_clientId_0",
         "name": "core/post-title",
         "isValid": true,
-        "attributes": {},
+        "attributes": {
+            "level": 2
+        },
         "innerBlocks": [],
         "originalContent": ""
     }