From a5fb9150a000df860952bbc944bcefe12c1fd8b4 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 23 Nov 2022 13:19:43 +0100 Subject: [PATCH 01/21] Add a tag selection component for the block toolbar (replaces HeadingLevelDropdown) --- packages/block-editor/README.md | 12 +++ .../components/block-tag-selection/README.md | 52 ++++++++++++ .../components/block-tag-selection/index.js | 74 +++++++++++++++++ .../block-tag-selection/tag-icon.js | 50 +++++++++++ packages/block-editor/src/components/index.js | 1 + .../block-library/src/post-title/block.json | 4 +- .../src/post-title/deprecated.js | 82 ++++++++++++++++++- packages/block-library/src/post-title/edit.js | 8 +- .../fixtures/blocks/core__post-title.json | 2 +- ..._post-title__deprecated-v1.serialized.html | 2 +- .../blocks/core__query__deprecated-2.json | 2 +- 11 files changed, 279 insertions(+), 10 deletions(-) create mode 100644 packages/block-editor/src/components/block-tag-selection/README.md create mode 100644 packages/block-editor/src/components/block-tag-selection/index.js create mode 100644 packages/block-editor/src/components/block-tag-selection/tag-icon.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 5760f1584c5db8..650846901299e1 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -683,6 +683,18 @@ _Related_ - +### TagSelectionDropdown + +Dropdown for selecting a HTML tag. + +_Parameters_ + +- _props_ `WPTagSelectionDropdownProps`: Component props. + +_Returns_ + +- `WPComponent`: The toolbar. + ### ToolSelector Undocumented declaration. diff --git a/packages/block-editor/src/components/block-tag-selection/README.md b/packages/block-editor/src/components/block-tag-selection/README.md new file mode 100644 index 00000000000000..ce1cad811bbc5e --- /dev/null +++ b/packages/block-editor/src/components/block-tag-selection/README.md @@ -0,0 +1,52 @@ +# Block Tag Selection + +`` Adds a dropdown with a list of selectable HTML tags to the block toolbar. +Uses ``. + +## Usage + +```jsx + +import { BlockControls, TagSelectionDropdown } from '@wordpress/block-editor'; + +const DEFAULT_TAGS = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p' ]; + +const MyTagSelectionToolbar = () => ( + + + setAttributes( { tag: newTag } ) + } + /> + +); +``` + +### 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. diff --git a/packages/block-editor/src/components/block-tag-selection/index.js b/packages/block-editor/src/components/block-tag-selection/index.js new file mode 100644 index 00000000000000..308c66905ab023 --- /dev/null +++ b/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 ( + } + label={ __( 'Change HTML tag' ) } + controls={ tagslist.map( ( targetTag ) => { + { + const isActive = targetTag === selectedTag; + + return { + icon: ( + + ), + label: sprintf( + // translators: %s: the name of the HTML tag + __( 'HTML tag: %s' ), + targetTag + ), + isActive, + onClick() { + onChange( targetTag ); + }, + role: 'menuitemradio', + }; + } + } ) } + /> + ); +} diff --git a/packages/block-editor/src/components/block-tag-selection/tag-icon.js b/packages/block-editor/src/components/block-tag-selection/tag-icon.js new file mode 100644 index 00000000000000..b5132626420e90 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 7743a98066c437..33807f4d765bcf 100644 --- a/packages/block-editor/src/components/index.js +++ b/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'; diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index 015896ff1bad01..283b5fcee0eae9 100644 --- a/packages/block-library/src/post-title/block.json +++ b/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", diff --git a/packages/block-library/src/post-title/deprecated.js b/packages/block-library/src/post-title/deprecated.js index e53606027c7bbf..61ad90f7c12baa 100644 --- a/packages/block-library/src/post-title/deprecated.js +++ b/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 ]; diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js index 4f01b17fc7ac4e..0c495170620c4e 100644 --- a/packages/block-library/src/post-title/edit.js +++ b/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,7 +21,6 @@ import { useEntityProp } from '@wordpress/core-data'; /** * Internal dependencies */ -import HeadingLevelDropdown from '../heading/heading-level-dropdown'; import { useCanEditEntity } from '../utils/hooks'; export default function PostTitleEdit( { @@ -28,7 +28,7 @@ export default function PostTitleEdit( { 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 ( <> - setAttributes( { level: newLevel } ) } diff --git a/test/integration/fixtures/blocks/core__post-title.json b/test/integration/fixtures/blocks/core__post-title.json index af92b1ddc180ee..8a38b29b6dcf35 100644 --- a/test/integration/fixtures/blocks/core__post-title.json +++ b/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" diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html index ac3f1192125921..f9182d99f9be6e 100644 --- a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.json b/test/integration/fixtures/blocks/core__query__deprecated-2.json index a63ad1c007b6b1..65bb356efe8960 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2.json +++ b/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" From 753e2a85559821f49dcffcd12b17b8c0cb81de81 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 24 Nov 2022 08:47:10 +0100 Subject: [PATCH 02/21] Update index.php --- packages/block-library/src/post-title/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-title/index.php b/packages/block-library/src/post-title/index.php index 125a2d81ddcbe3..bef077a2ba15be 100644 --- a/packages/block-library/src/post-title/index.php +++ b/packages/block-library/src/post-title/index.php @@ -30,7 +30,7 @@ function render_block_core_post_title( $attributes, $content, $block ) { $align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}"; if ( isset( $attributes['level'] ) ) { - $tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level']; + $tag_name = $attributes['level']; } if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) { From 165ad2fd4af60c366a9e14b5bf1450c6afa54bfa Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 16 Dec 2022 07:49:16 +0100 Subject: [PATCH 03/21] update fixtures --- .../fixtures/blocks/core__query__deprecated-2-with-colors.json | 2 +- test/integration/fixtures/blocks/core__query__deprecated-3.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json index 82bc41a40fb1b5..950d9885b8b0d4 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json @@ -56,7 +56,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": 2, + "level": "h2", "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json index bb1478cd676f22..4942512f127343 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-3.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json @@ -56,7 +56,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": 2, + "level": "h2", "isLink": false, "rel": "", "linkTarget": "_self" From 787d080ca435f2383e9f388d613563e08c56d87e Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 30 Dec 2022 11:36:14 +0100 Subject: [PATCH 04/21] Update CSS class, replace sprintf in the label with the tag name --- .../src/components/block-tag-selection/index.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-tag-selection/index.js b/packages/block-editor/src/components/block-tag-selection/index.js index 308c66905ab023..deb6ea6bba630e 100644 --- a/packages/block-editor/src/components/block-tag-selection/index.js +++ b/packages/block-editor/src/components/block-tag-selection/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { ToolbarDropdownMenu } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -13,7 +13,7 @@ import TagIcon from './tag-icon'; const DEFAULT_TAGS = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ]; const POPOVER_PROPS = { - className: 'block-library-heading-level-dropdown', + className: 'block-editor-block-tag-selection', }; /** @typedef {import('@wordpress/element').WPComponent} WPComponent */ @@ -51,16 +51,11 @@ export default function TagSelectionDropdown( { controls={ tagslist.map( ( targetTag ) => { { const isActive = targetTag === selectedTag; - return { icon: ( ), - label: sprintf( - // translators: %s: the name of the HTML tag - __( 'HTML tag: %s' ), - targetTag - ), + label: targetTag, isActive, onClick() { onChange( targetTag ); From 5691977b1583003531e83699a22f442d75e4a16e Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 30 Jan 2023 09:57:26 +0100 Subject: [PATCH 05/21] Add visible tag name to the drop down, add placeholder icon --- .../components/block-tag-selection/index.js | 38 ++++++++++++++++--- .../block-tag-selection/tag-icon.js | 4 +- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-tag-selection/index.js b/packages/block-editor/src/components/block-tag-selection/index.js index deb6ea6bba630e..d535b67aad0c47 100644 --- a/packages/block-editor/src/components/block-tag-selection/index.js +++ b/packages/block-editor/src/components/block-tag-selection/index.js @@ -10,7 +10,32 @@ import { __ } from '@wordpress/i18n'; import TagIcon from './tag-icon'; // Default HTML tags -const DEFAULT_TAGS = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ]; +const DEFAULT_TAGS = [ + { + tag: 'h1', + title: __( 'Heading 1' ), + }, + { + tag: 'h2', + title: __( 'Heading 2' ), + }, + { + tag: 'h3', + title: __( 'Heading 3' ), + }, + { + tag: 'h4', + title: __( 'Heading 4' ), + }, + { + tag: 'h5', + title: __( 'Heading 5' ), + }, + { + tag: 'h6', + title: __( 'Heading 6' ), + }, +]; const POPOVER_PROPS = { className: 'block-editor-block-tag-selection', @@ -50,15 +75,18 @@ export default function TagSelectionDropdown( { label={ __( 'Change HTML tag' ) } controls={ tagslist.map( ( targetTag ) => { { - const isActive = targetTag === selectedTag; + const isActive = targetTag.tag === selectedTag; return { icon: ( - + ), - label: targetTag, + title: targetTag.title, isActive, onClick() { - onChange( targetTag ); + onChange( targetTag.tag ); }, role: 'menuitemradio', }; diff --git a/packages/block-editor/src/components/block-tag-selection/tag-icon.js b/packages/block-editor/src/components/block-tag-selection/tag-icon.js index b5132626420e90..de528a76ff65c4 100644 --- a/packages/block-editor/src/components/block-tag-selection/tag-icon.js +++ b/packages/block-editor/src/components/block-tag-selection/tag-icon.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { Path, SVG } from '@wordpress/components'; -import { paragraph } from '@wordpress/icons'; +import { code, paragraph } from '@wordpress/icons'; /** @typedef {import('@wordpress/element').WPComponent} WPComponent */ @@ -33,7 +33,7 @@ export default function TagIcon( { tag, isPressed = false } ) { 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 code; } return ( From 1ba37340a1298f78322cb71b2952a2f6afd48cab Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 30 Jan 2023 10:24:14 +0100 Subject: [PATCH 06/21] Update README.md --- .../components/block-tag-selection/README.md | 30 +++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-tag-selection/README.md b/packages/block-editor/src/components/block-tag-selection/README.md index ce1cad811bbc5e..d129812df4061d 100644 --- a/packages/block-editor/src/components/block-tag-selection/README.md +++ b/packages/block-editor/src/components/block-tag-selection/README.md @@ -9,7 +9,33 @@ Uses ``. import { BlockControls, TagSelectionDropdown } from '@wordpress/block-editor'; -const DEFAULT_TAGS = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p' ]; +// Default HTML tags +const DEFAULT_TAGS = [ + { + tag: 'h1', + title: __( 'Heading 1' ), + }, + { + tag: 'h2', + title: __( 'Heading 2' ), + }, + { + tag: 'h3', + title: __( 'Heading 3' ), + }, + { + tag: 'h4', + title: __( 'Heading 4' ), + }, + { + tag: 'h5', + title: __( 'Heading 5' ), + }, + { + tag: 'h6', + title: __( 'Heading 6' ), + }, +]; const MyTagSelectionToolbar = () => ( @@ -30,7 +56,7 @@ const MyTagSelectionToolbar = () => ( The list of available HTML tags, passed from the block. -- Type: `Array` +- Type: `Object` - Required: no #### selectedTag From 5639693d1fa50418eb9473d05da55204e31882ce Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 8 Feb 2023 08:20:11 +0100 Subject: [PATCH 07/21] Try to fix issue with the deprecation --- packages/block-library/src/post-title/deprecated.js | 2 +- .../fixtures/blocks/core__post-title__deprecated-v1.json | 4 ++-- .../blocks/core__post-title__deprecated-v1.serialized.html | 2 +- .../fixtures/blocks/core__query__deprecated-4.json | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-title/deprecated.js b/packages/block-library/src/post-title/deprecated.js index 61ad90f7c12baa..7eaea75bc1e206 100644 --- a/packages/block-library/src/post-title/deprecated.js +++ b/packages/block-library/src/post-title/deprecated.js @@ -128,7 +128,7 @@ const v1 = { save() { return null; }, - migrate: migrateFontFamily, + migrate: compose( migrateFontFamily, migrateLevel ), isEligible( { style } ) { return style?.typography?.fontFamily; }, diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json index b358d1be0fa740..99f884cc3534bb 100644 --- a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json @@ -3,11 +3,11 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": 2, "isLink": false, "rel": "", "linkTarget": "_self", - "fontFamily": "cambria-georgia" + "fontFamily": "cambria-georgia", + "level": "h2" }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html index f9182d99f9be6e..ac3f1192125921 100644 --- a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.json b/test/integration/fixtures/blocks/core__query__deprecated-4.json index 2870009875a018..cb1047319a77d0 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json @@ -35,7 +35,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": 2, + "level": "h2", "isLink": false, "rel": "", "linkTarget": "_self" From 48a7a1066e5510d38a57a67384b4e1165e32cb72 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 8 Feb 2023 08:29:23 +0100 Subject: [PATCH 08/21] Update CHANGELOG.md --- packages/block-editor/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index be28b8306406b0..c7eff5fa129d6a 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- Add `TagSelectionDropdown` component for selecting a HTML tag from the block toolbar. + ## 11.3.0 (2023-02-01) ## 11.2.0 (2023-01-11) From 98dbcdecbaf2774f8f5b28e85deba76ac6152a7d Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 9 Feb 2023 09:46:23 +0100 Subject: [PATCH 09/21] Simplify and rename component --- packages/block-editor/CHANGELOG.md | 2 +- packages/block-editor/README.md | 24 ++--- .../README.md | 44 ++------- .../heding-level-icon.js | 48 +++++++++ .../block-heading-level-dropdown/index.js | 72 ++++++++++++++ .../components/block-tag-selection/index.js | 97 ------------------- .../block-tag-selection/tag-icon.js | 50 ---------- packages/block-editor/src/components/index.js | 2 +- .../block-library/src/post-title/block.json | 4 +- .../src/post-title/deprecated.js | 84 +--------------- packages/block-library/src/post-title/edit.js | 8 +- .../block-library/src/post-title/index.php | 2 +- .../fixtures/blocks/core__post-title.json | 2 +- ..._post-title__deprecated-v1.serialized.html | 2 +- ...core__query__deprecated-2-with-colors.json | 2 +- .../blocks/core__query__deprecated-2.json | 2 +- .../blocks/core__query__deprecated-3.json | 2 +- .../blocks/core__query__deprecated-4.json | 2 +- 18 files changed, 158 insertions(+), 291 deletions(-) rename packages/block-editor/src/components/{block-tag-selection => block-heading-level-dropdown}/README.md (57%) create mode 100644 packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js create mode 100644 packages/block-editor/src/components/block-heading-level-dropdown/index.js delete mode 100644 packages/block-editor/src/components/block-tag-selection/index.js delete mode 100644 packages/block-editor/src/components/block-tag-selection/tag-icon.js diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index c7eff5fa129d6a..568d42f07ab852 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Add `TagSelectionDropdown` component for selecting a HTML tag from the block toolbar. +- Add `HeadingLevelDropdown` component for selecting H1-H6 and paragraph HTML tags from the block toolbar. ## 11.3.0 (2023-02-01) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 2057eac69a36f9..126ab98719c324 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -531,6 +531,18 @@ _Returns_ - `Object`: Typography block support derived CSS classes & styles. +### HeadingLevelDropdown + +Dropdown for selecting a heading level (1 through 6) or paragraph (0). + +_Parameters_ + +- _props_ `WPHeadingLevelDropdownProps`: Component props. + +_Returns_ + +- `WPComponent`: The toolbar. + ### HeightControl HeightControl renders a linked unit control and range control for adjusting the height of a block. @@ -708,18 +720,6 @@ _Related_ - -### TagSelectionDropdown - -Dropdown for selecting a HTML tag. - -_Parameters_ - -- _props_ `WPTagSelectionDropdownProps`: Component props. - -_Returns_ - -- `WPComponent`: The toolbar. - ### ToolSelector Undocumented declaration. diff --git a/packages/block-editor/src/components/block-tag-selection/README.md b/packages/block-editor/src/components/block-heading-level-dropdown/README.md similarity index 57% rename from packages/block-editor/src/components/block-tag-selection/README.md rename to packages/block-editor/src/components/block-heading-level-dropdown/README.md index d129812df4061d..cecaee8c647bef 100644 --- a/packages/block-editor/src/components/block-tag-selection/README.md +++ b/packages/block-editor/src/components/block-heading-level-dropdown/README.md @@ -1,46 +1,20 @@ -# Block Tag Selection +# Heading Level Dropdown -`` Adds a dropdown with a list of selectable HTML tags to the block toolbar. +`` Adds a dropdown for selecting H1-H6 and paragraph HTML tags from the block toolbar. Uses ``. ## Usage ```jsx -import { BlockControls, TagSelectionDropdown } from '@wordpress/block-editor'; - -// Default HTML tags -const DEFAULT_TAGS = [ - { - tag: 'h1', - title: __( 'Heading 1' ), - }, - { - tag: 'h2', - title: __( 'Heading 2' ), - }, - { - tag: 'h3', - title: __( 'Heading 3' ), - }, - { - tag: 'h4', - title: __( 'Heading 4' ), - }, - { - tag: 'h5', - title: __( 'Heading 5' ), - }, - { - tag: 'h6', - title: __( 'Heading 6' ), - }, -]; - -const MyTagSelectionToolbar = () => ( +import { BlockControls, HeadingLevelDropdown } from '@wordpress/block-editor'; + +const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ]; + +const MyHeadingLevelToolbar = () => ( - setAttributes( { tag: newTag } ) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js b/packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js new file mode 100644 index 00000000000000..b3288d02761612 --- /dev/null +++ b/packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +/** @typedef {import('@wordpress/element').WPComponent} WPComponent */ + +/** + * HeadingLevelIcon props. + * + * @typedef WPHeadingLevelIconProps + * + * @property {number} level The heading level to show an icon for. + * @property {?boolean} isPressed Whether or not the icon should appear pressed; default: false. + */ + +/** + * Heading level icon. + * + * @param {WPHeadingLevelIconProps} props Component props. + * + * @return {?WPComponent} The icon. + */ +export default function HeadingLevelIcon( { level, isPressed = false } ) { + const levelToPath = { + 1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z', + 2: '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', + 3: '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', + 4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z', + 5: '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', + 6: '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 ( ! levelToPath.hasOwnProperty( level ) ) { + return null; + } + + return ( + + + + ); +} diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.js new file mode 100644 index 00000000000000..c5e68e6c10b170 --- /dev/null +++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js @@ -0,0 +1,72 @@ +/** + * WordPress dependencies + */ +import { ToolbarDropdownMenu } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import HeadingLevelIcon from './heding-level-icon'; + +const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ]; + +const POPOVER_PROPS = { + className: 'block-library-heading-level-dropdown', +}; + +/** @typedef {import('@wordpress/element').WPComponent} WPComponent */ + +/** + * HeadingLevelDropdown props. + * + * @typedef WPHeadingLevelDropdownProps + * + * @property {number} selectedLevel The chosen heading level. + * @property {(newValue:number)=>any} onChange Callback to run when + * toolbar value is changed. + */ + +/** + * Dropdown for selecting a heading level (1 through 6) or paragraph (0). + * + * @param {WPHeadingLevelDropdownProps} props Component props. + * + * @return {WPComponent} The toolbar. + */ +export default function HeadingLevelDropdown( { selectedLevel, onChange } ) { + return ( + } + label={ __( 'Change level' ) } + controls={ HEADING_LEVELS.map( ( targetLevel ) => { + { + const isActive = targetLevel === selectedLevel; + + return { + icon: ( + + ), + label: + targetLevel === 0 + ? __( 'Paragraph' ) + : sprintf( + // translators: %s: heading level e.g: "1", "2", "3" + __( 'Heading %d' ), + targetLevel + ), + isActive, + onClick() { + onChange( targetLevel ); + }, + role: 'menuitemradio', + }; + } + } ) } + /> + ); +} diff --git a/packages/block-editor/src/components/block-tag-selection/index.js b/packages/block-editor/src/components/block-tag-selection/index.js deleted file mode 100644 index d535b67aad0c47..00000000000000 --- a/packages/block-editor/src/components/block-tag-selection/index.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * WordPress dependencies - */ -import { ToolbarDropdownMenu } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import TagIcon from './tag-icon'; - -// Default HTML tags -const DEFAULT_TAGS = [ - { - tag: 'h1', - title: __( 'Heading 1' ), - }, - { - tag: 'h2', - title: __( 'Heading 2' ), - }, - { - tag: 'h3', - title: __( 'Heading 3' ), - }, - { - tag: 'h4', - title: __( 'Heading 4' ), - }, - { - tag: 'h5', - title: __( 'Heading 5' ), - }, - { - tag: 'h6', - title: __( 'Heading 6' ), - }, -]; - -const POPOVER_PROPS = { - className: 'block-editor-block-tag-selection', -}; - -/** @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 ( - } - label={ __( 'Change HTML tag' ) } - controls={ tagslist.map( ( targetTag ) => { - { - const isActive = targetTag.tag === selectedTag; - return { - icon: ( - - ), - title: targetTag.title, - isActive, - onClick() { - onChange( targetTag.tag ); - }, - role: 'menuitemradio', - }; - } - } ) } - /> - ); -} diff --git a/packages/block-editor/src/components/block-tag-selection/tag-icon.js b/packages/block-editor/src/components/block-tag-selection/tag-icon.js deleted file mode 100644 index de528a76ff65c4..00000000000000 --- a/packages/block-editor/src/components/block-tag-selection/tag-icon.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * WordPress dependencies - */ -import { Path, SVG } from '@wordpress/components'; -import { code, 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 code; - } - - return ( - - - - ); -} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 7c9e26704e4abc..f9eb115a769a8b 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -26,7 +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 HeadingLevelDropdown } from './block-heading-level-dropdown'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; export { default as __experimentalBlockPatternSetup } from './block-pattern-setup'; export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms'; diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index 0c8ec600602e55..388c480aba6573 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -12,8 +12,8 @@ "type": "string" }, "level": { - "type": "string", - "default": "h2" + "type": "number", + "default": "2" }, "isLink": { "type": "boolean", diff --git a/packages/block-library/src/post-title/deprecated.js b/packages/block-library/src/post-title/deprecated.js index 7eaea75bc1e206..e53606027c7bbf 100644 --- a/packages/block-library/src/post-title/deprecated.js +++ b/packages/block-library/src/post-title/deprecated.js @@ -1,88 +1,8 @@ -/** - * 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: { @@ -128,7 +48,7 @@ const v1 = { save() { return null; }, - migrate: compose( migrateFontFamily, migrateLevel ), + migrate: migrateFontFamily, isEligible( { style } ) { return style?.typography?.fontFamily; }, @@ -142,4 +62,4 @@ const v1 = { * * See block-deprecation.md */ -export default [ v2, v1 ]; +export default [ v1 ]; diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js index af2a090bdcea27..bd39b60c39859e 100644 --- a/packages/block-library/src/post-title/edit.js +++ b/packages/block-library/src/post-title/edit.js @@ -12,7 +12,7 @@ import { InspectorControls, useBlockProps, PlainText, - TagSelectionDropdown, + HeadingLevelDropdown, } from '@wordpress/block-editor'; import { ToggleControl, TextControl, PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -28,7 +28,7 @@ export default function PostTitleEdit( { setAttributes, context: { postType, postId, queryId }, } ) { - const TagName = level; + const TagName = 'h' + 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 ( <> - setAttributes( { level: newLevel } ) } diff --git a/packages/block-library/src/post-title/index.php b/packages/block-library/src/post-title/index.php index 14092d0deb4013..fdf265c30a42d2 100644 --- a/packages/block-library/src/post-title/index.php +++ b/packages/block-library/src/post-title/index.php @@ -28,7 +28,7 @@ function render_block_core_post_title( $attributes, $content, $block ) { $tag_name = 'h2'; if ( isset( $attributes['level'] ) ) { - $tag_name = $attributes['level']; + $tag_name = 'h' . $attributes['level']; } if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) { diff --git a/test/integration/fixtures/blocks/core__post-title.json b/test/integration/fixtures/blocks/core__post-title.json index 8a38b29b6dcf35..9f2892f6151709 100644 --- a/test/integration/fixtures/blocks/core__post-title.json +++ b/test/integration/fixtures/blocks/core__post-title.json @@ -3,7 +3,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "h2", + "level": "2", "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html index ac3f1192125921..bbeb23bb7afe35 100644 --- a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json index 950d9885b8b0d4..04f63255cf884a 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json @@ -56,7 +56,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "h2", + "level": "2", "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.json b/test/integration/fixtures/blocks/core__query__deprecated-2.json index 65bb356efe8960..4fc5ee139ae093 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-2.json @@ -36,7 +36,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "h2", + "level": "2", "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json index 4942512f127343..0c83f04e0a01d8 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-3.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json @@ -56,7 +56,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "h2", + "level": "2", "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.json b/test/integration/fixtures/blocks/core__query__deprecated-4.json index cb1047319a77d0..014407015e7dfe 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json @@ -35,7 +35,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "h2", + "level": "2", "isLink": false, "rel": "", "linkTarget": "_self" From 9a4bad36bfff32aa4f47b57a63a737a9570e93f5 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 9 Feb 2023 09:51:15 +0100 Subject: [PATCH 10/21] Try reverting fixture changes --- .../fixtures/blocks/core__post-title__deprecated-v1.json | 4 ++-- .../blocks/core__post-title__deprecated-v1.serialized.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json index 99f884cc3534bb..b358d1be0fa740 100644 --- a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json @@ -3,11 +3,11 @@ "name": "core/post-title", "isValid": true, "attributes": { + "level": 2, "isLink": false, "rel": "", "linkTarget": "_self", - "fontFamily": "cambria-georgia", - "level": "h2" + "fontFamily": "cambria-georgia" }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html index bbeb23bb7afe35..f9182d99f9be6e 100644 --- a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html @@ -1 +1 @@ - + From 37240973c417d0f8bd6b1f05c74a2ddac13d02ac Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 9 Feb 2023 09:53:44 +0100 Subject: [PATCH 11/21] And again... --- packages/block-library/src/post-title/block.json | 2 +- test/integration/fixtures/blocks/core__post-title.json | 2 +- .../blocks/core__post-title__deprecated-v1.serialized.html | 2 +- .../fixtures/blocks/core__query__deprecated-2-with-colors.json | 2 +- test/integration/fixtures/blocks/core__query__deprecated-2.json | 2 +- test/integration/fixtures/blocks/core__query__deprecated-3.json | 2 +- test/integration/fixtures/blocks/core__query__deprecated-4.json | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index 388c480aba6573..4a56a6f37b7795 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -13,7 +13,7 @@ }, "level": { "type": "number", - "default": "2" + "default": 2 }, "isLink": { "type": "boolean", diff --git a/test/integration/fixtures/blocks/core__post-title.json b/test/integration/fixtures/blocks/core__post-title.json index 9f2892f6151709..af92b1ddc180ee 100644 --- a/test/integration/fixtures/blocks/core__post-title.json +++ b/test/integration/fixtures/blocks/core__post-title.json @@ -3,7 +3,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "2", + "level": 2, "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html index f9182d99f9be6e..ac3f1192125921 100644 --- a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json index 04f63255cf884a..82bc41a40fb1b5 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json @@ -56,7 +56,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "2", + "level": 2, "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.json b/test/integration/fixtures/blocks/core__query__deprecated-2.json index 4fc5ee139ae093..a63ad1c007b6b1 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-2.json @@ -36,7 +36,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "2", + "level": 2, "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json index 0c83f04e0a01d8..bb1478cd676f22 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-3.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json @@ -56,7 +56,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "2", + "level": 2, "isLink": false, "rel": "", "linkTarget": "_self" diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.json b/test/integration/fixtures/blocks/core__query__deprecated-4.json index 014407015e7dfe..2870009875a018 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json @@ -35,7 +35,7 @@ "name": "core/post-title", "isValid": true, "attributes": { - "level": "2", + "level": 2, "isLink": false, "rel": "", "linkTarget": "_self" From d331504e0049b8f83937edd0c357a7e879a77e51 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 9 Feb 2023 10:21:14 +0100 Subject: [PATCH 12/21] Update Query title to use the new component --- packages/block-library/src/query-title/edit.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js index 7c9689f3367408..907a107f6d7fb3 100644 --- a/packages/block-library/src/query-title/edit.js +++ b/packages/block-library/src/query-title/edit.js @@ -12,15 +12,11 @@ import { InspectorControls, useBlockProps, Warning, + HeadingLevelDropdown, } from '@wordpress/block-editor'; import { ToggleControl, PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -/** - * Internal dependencies - */ -import HeadingLevelDropdown from '../heading/heading-level-dropdown'; - const SUPPORTED_TYPES = [ 'archive', 'search' ]; export default function QueryTitleEdit( { From 1fba40ddb4934a3673ed2d1ce0d14991cab9f344 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 9 Feb 2023 10:22:31 +0100 Subject: [PATCH 13/21] Update Comments title --- packages/block-library/src/comments-title/edit.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js index 7f4660d5735b27..8f3da9f2639aa6 100644 --- a/packages/block-library/src/comments-title/edit.js +++ b/packages/block-library/src/comments-title/edit.js @@ -12,6 +12,7 @@ import { useBlockProps, InspectorControls, store as blockEditorStore, + HeadingLevelDropdown, } from '@wordpress/block-editor'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useEntityProp } from '@wordpress/core-data'; @@ -21,11 +22,6 @@ import { useSelect } from '@wordpress/data'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; -/** - * Internal dependencies - */ -import HeadingLevelDropdown from '../heading/heading-level-dropdown'; - export default function Edit( { attributes: { textAlign, showPostTitle, showCommentsCount, level }, setAttributes, From d39758069cf0f92599a30cef35eff7dcfa7daa8a Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 9 Feb 2023 10:56:08 +0100 Subject: [PATCH 14/21] Update Site title with paragraph exception --- .../heding-level-icon.js | 2 ++ .../block-heading-level-dropdown/index.js | 11 ++++-- .../src/site-title/edit/index.js | 11 +++--- .../src/site-title/edit/level-icon.js | 28 --------------- .../src/site-title/edit/level-toolbar.js | 34 ------------------- 5 files changed, 16 insertions(+), 70 deletions(-) delete mode 100644 packages/block-library/src/site-title/edit/level-icon.js delete mode 100644 packages/block-library/src/site-title/edit/level-toolbar.js diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js b/packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js index b3288d02761612..368ac6573f68a5 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { Path, SVG } from '@wordpress/components'; +import { paragraph } from '@wordpress/icons'; /** @typedef {import('@wordpress/element').WPComponent} WPComponent */ @@ -22,6 +23,7 @@ import { Path, SVG } from '@wordpress/components'; * @return {?WPComponent} The icon. */ export default function HeadingLevelIcon( { level, isPressed = false } ) { + if ( level === 0 ) return paragraph; const levelToPath = { 1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z', 2: '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', diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.js index c5e68e6c10b170..5aa562ebe1e721 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/index.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js @@ -34,13 +34,20 @@ const POPOVER_PROPS = { * * @return {WPComponent} The toolbar. */ -export default function HeadingLevelDropdown( { selectedLevel, onChange } ) { +export default function HeadingLevelDropdown( { + levels, + selectedLevel, + onChange, +} ) { + if ( levels === undefined ) { + levels = HEADING_LEVELS; + } return ( } label={ __( 'Change level' ) } - controls={ HEADING_LEVELS.map( ( targetLevel ) => { + controls={ levels.map( ( targetLevel ) => { { const isActive = targetLevel === selectedLevel; diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js index 5980dff6d88193..ec434ef96fb393 100644 --- a/packages/block-library/src/site-title/edit/index.js +++ b/packages/block-library/src/site-title/edit/index.js @@ -15,15 +15,13 @@ import { InspectorControls, BlockControls, useBlockProps, + HeadingLevelDropdown, } from '@wordpress/block-editor'; import { ToggleControl, PanelBody } from '@wordpress/components'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/html-entities'; -/** - * Internal dependencies - */ -import LevelControl from './level-toolbar'; +const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ]; export default function SiteTitleEdit( { attributes, @@ -95,8 +93,9 @@ export default function SiteTitleEdit( { return ( <> - setAttributes( { level: newLevel } ) } diff --git a/packages/block-library/src/site-title/edit/level-icon.js b/packages/block-library/src/site-title/edit/level-icon.js deleted file mode 100644 index 95295208b6e599..00000000000000 --- a/packages/block-library/src/site-title/edit/level-icon.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * WordPress dependencies - */ -import { SVG, Path } from '@wordpress/components'; -import { paragraph } from '@wordpress/icons'; - -export default function LevelIcon( { level, isPressed = false } ) { - if ( level === 0 ) return paragraph; - const levelToPath = { - 1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z', - 2: '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', - 3: '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', - 4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z', - 5: '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', - 6: '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', - }; - return ( - - - - ); -} diff --git a/packages/block-library/src/site-title/edit/level-toolbar.js b/packages/block-library/src/site-title/edit/level-toolbar.js deleted file mode 100644 index 704c948d336731..00000000000000 --- a/packages/block-library/src/site-title/edit/level-toolbar.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * WordPress dependencies - */ -import { ToolbarDropdownMenu } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import LevelIcon from './level-icon'; - -export default function LevelControl( { level, onChange } ) { - const allControls = [ 1, 2, 3, 4, 5, 6, 0 ].map( ( currentLevel ) => { - const isActive = currentLevel === level; - return { - icon: , - title: - currentLevel === 0 - ? __( 'Paragraph' ) - : // translators: %s: heading level e.g: "1", "2", "3" - sprintf( __( 'Heading %d' ), currentLevel ), - isActive, - onClick: () => onChange( currentLevel ), - role: 'menuitemradio', - }; - } ); - return ( - } - controls={ allControls } - /> - ); -} From dcf2f38a73b0a9a54ecdac7ff962154db50113d9 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 9 Feb 2023 11:25:20 +0100 Subject: [PATCH 15/21] Update Heading block --- packages/block-library/src/heading/edit.js | 2 +- .../src/heading/heading-level-dropdown.js | 69 ------------------- 2 files changed, 1 insertion(+), 70 deletions(-) delete mode 100644 packages/block-library/src/heading/heading-level-dropdown.js diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 3f8fd39ee9caa9..d9962fd93a0cba 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -16,12 +16,12 @@ import { RichText, useBlockProps, store as blockEditorStore, + HeadingLevelDropdown, } from '@wordpress/block-editor'; /** * Internal dependencies */ -import HeadingLevelDropdown from './heading-level-dropdown'; import { generateAnchor, setAnchor } from './autogenerate-anchors'; function HeadingEdit( { diff --git a/packages/block-library/src/heading/heading-level-dropdown.js b/packages/block-library/src/heading/heading-level-dropdown.js deleted file mode 100644 index d8a4eae0ab34db..00000000000000 --- a/packages/block-library/src/heading/heading-level-dropdown.js +++ /dev/null @@ -1,69 +0,0 @@ -/** - * WordPress dependencies - */ -import { ToolbarDropdownMenu } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import HeadingLevelIcon from './heading-level-icon'; - -const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ]; - -const POPOVER_PROPS = { - className: 'block-library-heading-level-dropdown', -}; - -/** @typedef {import('@wordpress/element').WPComponent} WPComponent */ - -/** - * HeadingLevelDropdown props. - * - * @typedef WPHeadingLevelDropdownProps - * - * @property {number} selectedLevel The chosen heading level. - * @property {(newValue:number)=>any} onChange Callback to run when - * toolbar value is changed. - */ - -/** - * Dropdown for selecting a heading level (1 through 6). - * - * @param {WPHeadingLevelDropdownProps} props Component props. - * - * @return {WPComponent} The toolbar. - */ -export default function HeadingLevelDropdown( { selectedLevel, onChange } ) { - return ( - } - label={ __( 'Change heading level' ) } - controls={ HEADING_LEVELS.map( ( targetLevel ) => { - { - const isActive = targetLevel === selectedLevel; - - return { - icon: ( - - ), - label: sprintf( - // translators: %s: heading level e.g: "1", "2", "3" - __( 'Heading %d' ), - targetLevel - ), - isActive, - onClick() { - onChange( targetLevel ); - }, - role: 'menuitemradio', - }; - } - } ) } - /> - ); -} From 33f32da8823110b02ee8cdd4c525ca7257bdfce1 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 10 Feb 2023 04:24:56 +0100 Subject: [PATCH 16/21] Update rich-text.test.js --- packages/e2e-tests/specs/editor/various/rich-text.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js index 009abf121e351f..20bbae5932b127 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js @@ -24,8 +24,8 @@ describe( 'RichText', () => { // // See: https://github.com/WordPress/gutenberg/issues/3091 await insertBlock( 'Heading' ); - await page.waitForSelector( '[aria-label="Change heading level"]' ); - await page.click( '[aria-label="Change heading level"]' ); + await page.waitForSelector( '[aria-label="Change level"]' ); + await page.click( '[aria-label="Change level"]' ); await page.click( '[aria-label="Heading 3"]' ); expect( await getEditedPostContent() ).toMatchSnapshot(); From a146a808a0b758ae651972ac30c4c037d6261785 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Sat, 11 Feb 2023 12:21:49 +0100 Subject: [PATCH 17/21] Block Heading Dropdown - Add support for mobile (#47967) --- .../{heding-level-icon.js => heading-level-icon.js} | 0 .../src/components/block-heading-level-dropdown/index.js | 2 +- .../components/block-heading-level-dropdown/index.native.js} | 0 packages/block-editor/src/components/index.native.js | 1 + 4 files changed, 2 insertions(+), 1 deletion(-) rename packages/block-editor/src/components/block-heading-level-dropdown/{heding-level-icon.js => heading-level-icon.js} (100%) rename packages/{block-library/src/heading/heading-level-dropdown.native.js => block-editor/src/components/block-heading-level-dropdown/index.native.js} (100%) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js similarity index 100% rename from packages/block-editor/src/components/block-heading-level-dropdown/heding-level-icon.js rename to packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.js index 5aa562ebe1e721..f75ead708157ed 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/index.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js @@ -7,7 +7,7 @@ import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ -import HeadingLevelIcon from './heding-level-icon'; +import HeadingLevelIcon from './heading-level-icon'; const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ]; diff --git a/packages/block-library/src/heading/heading-level-dropdown.native.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js similarity index 100% rename from packages/block-library/src/heading/heading-level-dropdown.native.js rename to packages/block-editor/src/components/block-heading-level-dropdown/index.native.js diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 68218c374cb03c..08733339ee4e37 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -28,6 +28,7 @@ export { JustifyContentControl, } from './justify-content-control'; export { default as LineHeightControl } from './line-height-control'; +export { default as HeadingLevelDropdown } from './block-heading-level-dropdown'; export { default as PlainText } from './plain-text'; export { default as RichText, From 27165997d89cd63abb5ffccfb1db933fee32f9b4 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 22 May 2023 07:40:03 +0200 Subject: [PATCH 18/21] Text changes for a native file and e2e test spec --- .../components/block-heading-level-dropdown/index.native.js | 2 +- test/e2e/specs/site-editor/template-part.spec.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js index e24374c86b995c..1ba451ff54b8f4 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js @@ -57,7 +57,7 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) { controls={ HEADING_LEVELS.map( ( index ) => createLevelControl( index, selectedLevel, onChange ) ) } - label={ __( 'Change heading level' ) } + label={ __( 'Change level' ) } /> ); } diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js index 5623c1171861ef..1eb5fdba0c70d6 100644 --- a/test/e2e/specs/site-editor/template-part.spec.js +++ b/test/e2e/specs/site-editor/template-part.spec.js @@ -391,7 +391,7 @@ test.describe( 'Template Part', () => { await editor.selectBlocks( siteTitleInGroup ); // Change heading level of the Site Title block. - await editor.clickBlockToolbarButton( 'Change heading level' ); + await editor.clickBlockToolbarButton( 'Change level' ); const Heading3Button = page.getByRole( 'menuitemradio', { name: 'Heading 3', } ); @@ -401,7 +401,7 @@ test.describe( 'Template Part', () => { await pageUtils.pressKeys( 'primary+z' ); await expect( - page.locator( 'role=button[name="Change heading level"i]' ) + page.locator( 'role=button[name="Change level"i]' ) ).toBeFocused(); } ); } ); From 95866c5978525ba878656e8fd7ef86ed91e882a5 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 24 May 2023 07:47:49 +0200 Subject: [PATCH 19/21] Use the updated headingLevel icons --- .../heading-level-icon.js | 41 ++++++++----------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js index 368ac6573f68a5..6e064ee53d675d 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js @@ -1,8 +1,15 @@ /** * WordPress dependencies */ -import { Path, SVG } from '@wordpress/components'; -import { paragraph } from '@wordpress/icons'; +import { + headingLevel1, + headingLevel2, + headingLevel3, + headingLevel4, + headingLevel5, + headingLevel6, + paragraph, +} from '@wordpress/icons'; /** @typedef {import('@wordpress/element').WPComponent} WPComponent */ @@ -11,8 +18,7 @@ import { paragraph } from '@wordpress/icons'; * * @typedef WPHeadingLevelIconProps * - * @property {number} level The heading level to show an icon for. - * @property {?boolean} isPressed Whether or not the icon should appear pressed; default: false. + * @property {number} level The heading level to show an icon for. */ /** @@ -22,29 +28,18 @@ import { paragraph } from '@wordpress/icons'; * * @return {?WPComponent} The icon. */ -export default function HeadingLevelIcon( { level, isPressed = false } ) { +export default function HeadingLevelIcon( { level } ) { if ( level === 0 ) return paragraph; const levelToPath = { - 1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z', - 2: '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', - 3: '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', - 4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z', - 5: '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', - 6: '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', + 1: headingLevel1, + 2: headingLevel2, + 3: headingLevel3, + 4: headingLevel4, + 5: headingLevel5, + 6: headingLevel6, }; if ( ! levelToPath.hasOwnProperty( level ) ) { return null; } - - return ( - - - - ); + return levelToPath[ level ]; } From b78b136f321e0b4890162f0d7bf8f37f2fe190aa Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 15 Jun 2023 07:34:24 +0200 Subject: [PATCH 20/21] Update prop names --- .../block-heading-level-dropdown/README.md | 8 +++---- .../heading-level-icon.js | 24 +++++++++---------- .../block-heading-level-dropdown/index.js | 19 +++++++-------- .../block-library/src/comments-title/edit.js | 2 +- packages/block-library/src/heading/edit.js | 2 +- packages/block-library/src/post-title/edit.js | 2 +- .../block-library/src/query-title/edit.js | 2 +- .../src/site-title/edit/index.js | 4 ++-- 8 files changed, 29 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/README.md b/packages/block-editor/src/components/block-heading-level-dropdown/README.md index cecaee8c647bef..8e0676669b66aa 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/README.md +++ b/packages/block-editor/src/components/block-heading-level-dropdown/README.md @@ -14,8 +14,8 @@ const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ]; const MyHeadingLevelToolbar = () => ( setAttributes( { tag: newTag } ) } @@ -26,14 +26,14 @@ const MyHeadingLevelToolbar = () => ( ### Props -#### tags +#### options The list of available HTML tags, passed from the block. - Type: `Object` - Required: no -#### selectedTag +#### value The chosen HTML tag. diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js index 6e064ee53d675d..7b161d9c01700e 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js @@ -21,6 +21,16 @@ import { * @property {number} level The heading level to show an icon for. */ +const LEVEL_TO_PATH = { + 0: paragraph, + 1: headingLevel1, + 2: headingLevel2, + 3: headingLevel3, + 4: headingLevel4, + 5: headingLevel5, + 6: headingLevel6, +}; + /** * Heading level icon. * @@ -29,17 +39,5 @@ import { * @return {?WPComponent} The icon. */ export default function HeadingLevelIcon( { level } ) { - if ( level === 0 ) return paragraph; - const levelToPath = { - 1: headingLevel1, - 2: headingLevel2, - 3: headingLevel3, - 4: headingLevel4, - 5: headingLevel5, - 6: headingLevel6, - }; - if ( ! levelToPath.hasOwnProperty( level ) ) { - return null; - } - return levelToPath[ level ]; + return LEVEL_TO_PATH[ level ] ?? null; } diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.js index f75ead708157ed..4243d6b19918d7 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/index.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js @@ -22,9 +22,9 @@ const POPOVER_PROPS = { * * @typedef WPHeadingLevelDropdownProps * - * @property {number} selectedLevel The chosen heading level. - * @property {(newValue:number)=>any} onChange Callback to run when - * toolbar value is changed. + * @property {number} value The chosen heading level. + * @property {(newValue:number)=>any} onChange Callback to run when + * toolbar value is changed. */ /** @@ -35,21 +35,18 @@ const POPOVER_PROPS = { * @return {WPComponent} The toolbar. */ export default function HeadingLevelDropdown( { - levels, - selectedLevel, + options = HEADING_LEVELS, + value, onChange, } ) { - if ( levels === undefined ) { - levels = HEADING_LEVELS; - } return ( } + icon={ } label={ __( 'Change level' ) } - controls={ levels.map( ( targetLevel ) => { + controls={ options.map( ( targetLevel ) => { { - const isActive = targetLevel === selectedLevel; + const isActive = targetLevel === value; return { icon: ( diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js index 323b47012de958..3765a45d4f8bbe 100644 --- a/packages/block-library/src/comments-title/edit.js +++ b/packages/block-library/src/comments-title/edit.js @@ -94,7 +94,7 @@ export default function Edit( { } /> setAttributes( { level: newLevel } ) } diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index d9962fd93a0cba..f0e9fd282be3ea 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -92,7 +92,7 @@ function HeadingEdit( { <> setAttributes( { level: newLevel } ) } diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js index 7490a9f2bf57e3..92521aa8d86b80 100644 --- a/packages/block-library/src/post-title/edit.js +++ b/packages/block-library/src/post-title/edit.js @@ -120,7 +120,7 @@ export default function PostTitleEdit( { { blockEditingMode === 'default' && ( setAttributes( { level: newLevel } ) } diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js index 1193be0830579d..e5fa6f6c396774 100644 --- a/packages/block-library/src/query-title/edit.js +++ b/packages/block-library/src/query-title/edit.js @@ -94,7 +94,7 @@ export default function QueryTitleEdit( { <> setAttributes( { level: newLevel } ) } diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js index 866095f7cc9b27..ad3136d106557f 100644 --- a/packages/block-library/src/site-title/edit/index.js +++ b/packages/block-library/src/site-title/edit/index.js @@ -94,8 +94,8 @@ export default function SiteTitleEdit( { <> setAttributes( { level: newLevel } ) } From de0e2c9b8f05e4025fb1da764e183265ec83550a Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 15 Jun 2023 11:04:29 +0400 Subject: [PATCH 21/21] Add 'options' property to type definiton --- .../src/components/block-heading-level-dropdown/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.js index 4243d6b19918d7..40d60b08436cc0 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/index.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js @@ -23,6 +23,7 @@ const POPOVER_PROPS = { * @typedef WPHeadingLevelDropdownProps * * @property {number} value The chosen heading level. + * @property {number[]} options An array of supported heading levels. * @property {(newValue:number)=>any} onChange Callback to run when * toolbar value is changed. */