Move HeadinglevelDropdown to its own component

packages/block-editor/README.md

@@ -683,6 +683,18 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore>
 
+### TagSelectionDropdown
+
+Dropdown for selecting a HTML tag.
+
+_Parameters_
+
+-   _props_ `WPTagSelectionDropdownProps`: Component props.
+
+_Returns_
+
+-   `WPComponent`: The toolbar.
+
 ### ToolSelector
 
 Undocumented declaration.

packages/block-editor/src/components/block-tag-selection/README.md

@@ -0,0 +1,52 @@
+# Block Tag Selection
+
+`<TagSelectionDropdown>` Adds a dropdown with a list of selectable HTML tags to the block toolbar.
+Uses `<ToolbarDropdownMenu>`.
+
+## Usage
+
+```jsx
+
+import { BlockControls, TagSelectionDropdown } from '@wordpress/block-editor';
+
+const DEFAULT_TAGS = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p' ];
+
+const MyTagSelectionToolbar = () => (
+	<BlockControls group="block">
+		<TagSelectionDropdown
+			tags={ DEFAULT_TAGS }
+			selectedTag={ tag }
+			onChange={ ( newTag ) =>
+				setAttributes( { tag: newTag } )
+			}
+		/>
+	</BlockControls>
+);
+```
+
+### Props
+
+#### tags
+
+The list of available HTML tags, passed from the block.
+
+-   Type: `Array`
+-   Required: no
+
+#### selectedTag
+
+The chosen HTML tag.
+
+-   Type: `string`
+-   Required: no
+
+#### onChange
+
+Callback to run when toolbar value is changed.
+
+-   Type: `string`
+-   Required: yes
+
+## 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.

packages/block-editor/src/components/block-tag-selection/index.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarDropdownMenu } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import TagIcon from './tag-icon';
+
+// Default HTML tags
+const DEFAULT_TAGS = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ];
+
+const POPOVER_PROPS = {
+	className: 'block-library-heading-level-dropdown',
+};
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * TagSelectionDropdown props.
+ *
+ * @typedef WPTagSelectionDropdownProps
+ *
+ * @property {Array}  tags        The list of available HTML tags.
+ * @property {string} selectedTag The chosen HTML tag.
+ * @property {string} onChange    Callback to run when
+ *                                toolbar value is changed.
+ */
+
+/**
+ * Dropdown for selecting a HTML tag.
+ *
+ * @param {WPTagSelectionDropdownProps} props Component props.
+ *
+ * @return {WPComponent} The toolbar.
+ */
+export default function TagSelectionDropdown( {
+	tags,
+	selectedTag,
+	onChange,
+} ) {
+	const tagslist = tags ? tags : DEFAULT_TAGS;
+
+	return (
+		<ToolbarDropdownMenu
+			popoverProps={ POPOVER_PROPS }
+			icon={ <TagIcon tag={ selectedTag } /> }
+			label={ __( 'Change HTML tag' ) }
+			controls={ tagslist.map( ( targetTag ) => {
+				{
+					const isActive = targetTag === selectedTag;
+
+					return {
+						icon: (
+							<TagIcon tag={ targetTag } isPressed={ isActive } />
+						),
+						label: sprintf(
+							// translators: %s: the name of the HTML tag
+							__( 'HTML tag: %s' ),
+							targetTag
+						),
+						isActive,
+						onClick() {
+							onChange( targetTag );
+						},
+						role: 'menuitemradio',
+					};
+				}
+			} ) }
+		/>
+	);
+}

packages/block-editor/src/components/block-tag-selection/tag-icon.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+import { paragraph } from '@wordpress/icons';
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * TagIcon props.
+ *
+ * @typedef WPTagIconProps
+ *
+ * @property {string}   tag       The tag to show an icon for.
+ * @property {?boolean} isPressed Whether or not the icon should appear pressed; default: false.
+ */
+
+/**
+ * Tag icon.
+ *
+ * @param {WPTagIconProps} props Component props.
+ *
+ * @return {?WPComponent} The icon.
+ */
+export default function TagIcon( { tag, isPressed = false } ) {
+	if ( tag === 'p' ) return paragraph;
+	const tagToPath = {
+		h1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
+		h2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
+		h3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
+		h4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
+		h5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
+		h6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
+	};
+	if ( ! tagToPath.hasOwnProperty( tag ) ) {
+		return null;
+	}
+
+	return (
+		<SVG
+			width="24"
+			height="24"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			isPressed={ isPressed }
+		>
+			<Path d={ tagToPath[ tag ] } />
+		</SVG>
+	);
+}

packages/block-editor/src/components/index.js

@@ -26,6 +26,7 @@ export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as BlockStyles } from './block-styles';
+export { default as TagSelectionDropdown } from './block-tag-selection';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';

packages/block-library/src/post-title/block.json

@@ -12,8 +12,8 @@
 			"type": "string"
 		},
 		"level": {
-			"type": "number",
-			"default": 2
+			"type": "string",
+			"default": "h2"
 		},
 		"isLink": {
 			"type": "boolean",

packages/block-library/src/post-title/deprecated.js

@@ -1,8 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
 
+// Migrate the old level attribute (number) to the corresponding HTML tag (string).
+const migrateLevel = ( attributes ) => {
+	const { level, ...restAttributes } = attributes;
+	return typeof level === 'number'
+		? { ...restAttributes, level: 'h' + level }
+		: attributes;
+};
+
+const v2 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		level: {
+			type: 'number',
+			default: 2,
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+		},
+		rel: {
+			type: 'string',
+			attribute: 'rel',
+			default: '',
+		},
+		linkTarget: {
+			type: 'string',
+			default: '_self',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+				textTransform: true,
+			},
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: compose( migrateFontFamily, migrateLevel ),
+	isEligible( attributes ) {
+		if ( typeof attributes.level === 'number' ) {
+			return true;
+		}
+		return false;
+	},
+};
+
 const v1 = {
 	attributes: {
 		textAlign: {
@@ -62,4 +142,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

packages/block-library/src/post-title/edit.js

@@ -12,6 +12,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	PlainText,
+	TagSelectionDropdown,
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -20,15 +21,14 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 import { useCanEditEntity } from '../utils/hooks';
 
 export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId, queryId },
 } ) {
-	const TagName = 0 === level ? 'p' : 'h' + level;
+	const TagName = level;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const [ rawTitle = '', setTitle, fullTitle ] = useEntityProp(
@@ -102,8 +102,8 @@ export default function PostTitleEdit( {
 	return (
 		<>
 			<BlockControls group="block">
-				<HeadingLevelDropdown
-					selectedLevel={ level }
+				<TagSelectionDropdown
+					selectedTag={ level }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

test/integration/fixtures/blocks/core__post-title.json

@@ -3,7 +3,7 @@
 		"name": "core/post-title",
 		"isValid": true,
 		"attributes": {
-			"level": 2,
+			"level": "h2",
 			"isLink": false,
 			"rel": "",
 			"linkTarget": "_self"

test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html

@@ -1 +1 @@
-<!-- wp:post-title {"fontFamily":"cambria-georgia"} /-->
+<!-- wp:post-title {"level":2,"fontFamily":"cambria-georgia"} /-->

test/integration/fixtures/blocks/core__query__deprecated-2.json

@@ -36,7 +36,7 @@
 						"name": "core/post-title",
 						"isValid": true,
 						"attributes": {
-							"level": 2,
+							"level": "h2",
 							"isLink": false,
 							"rel": "",
 							"linkTarget": "_self"