【確認待ち】見出しレベル変更メニューが水平から垂直に調整

editor-css/_editor_before.scss

@@ -114,6 +114,8 @@ button.image-button:not(.button-delete) {
 @import "./editor_before_icons";
 // ボタン横並び編集用CSS
 @import "./editor_before_button-outer";
+// VK見出しCSS読み込み
+@import "./editor_before_vk-heading";
 
 // VK Outer 編集パネル
 $color-danger: #dd3333;

editor-css/_editor_before_vk-heading.scss

@@ -0,0 +1,12 @@
+/*-------------------------------------------*/
+/* vk blocks Heading Level Dropdown
+/*-------------------------------------------*/
+// WordPress5.8でcssが崩れるので独自のクラスを追加
+.vk-blocks-heading-level-dropdown {
+	.components-popover__content {
+		min-width: auto;
+		> div {
+			padding: 8px;
+		}
+	}
+}

readme.txt

@@ -63,6 +63,7 @@ e.g.
 
 == Changelog ==
 
+[ fix ][ Heading ] vertical heading levels for wp-5.9
 [ fix ][ Border Box ] cope with custom color palette
 [ Bug fix ] fix block style enqueue point
 

src/blocks/heading/heading-level-dropdown.js

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	Dropdown,
-	Toolbar,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarDropdownMenu } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -17,66 +11,41 @@ import HeadingLevelIcon from './heading-level-icon';
 
 const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
 
+// WordPress5.8でcssが崩れるので独自のクラスを追加
 const POPOVER_PROPS = {
-	className: 'block-library-heading-level-dropdown',
-	isAlternate: true,
+	className:
+		'block-library-heading-level-dropdown vk-blocks-heading-level-dropdown',
 };
 
 export default function HeadingLevelDropdown({ selectedLevel, onChange }) {
 	return (
-		<Dropdown
+		<ToolbarDropdownMenu
 			popoverProps={POPOVER_PROPS}
-			renderToggle={({ onToggle, isOpen }) => {
-				const openOnArrowDown = (event) => {
-					if (!isOpen && event.keyCode === DOWN) {
-						event.preventDefault();
-						event.stopPropagation();
-						onToggle();
-					}
-				};
+			icon={<HeadingLevelIcon level={selectedLevel} />}
+			label={__('Change heading level')}
+			controls={HEADING_LEVELS.map((targetLevel) => {
+				{
+					const isActive = targetLevel === selectedLevel;
 
-				return (
-					<ToolbarButton
-						aria-expanded={isOpen}
-						aria-haspopup="true"
-						icon={<HeadingLevelIcon level={selectedLevel} />}
-						label={__('Change heading level')}
-						onClick={onToggle}
-						onKeyDown={openOnArrowDown}
-						showTooltip
-					/>
-				);
-			}}
-			renderContent={() => (
-				<Toolbar
-					className="block-library-heading-level-toolbar"
-					label={__('Change heading level')}
-				>
-					<ToolbarGroup
-						isCollapsed={false}
-						controls={HEADING_LEVELS.map((targetLevel) => {
-							const isActive = targetLevel === selectedLevel;
-							return {
-								icon: (
-									<HeadingLevelIcon
-										level={targetLevel}
-										isPressed={isActive}
-									/>
-								),
-								title: sprintf(
-									// translators: %s: heading level e.g: "1", "2", "3"
-									__('Heading %d'),
-									targetLevel
-								),
-								isActive,
-								onClick() {
-									onChange(targetLevel);
-								},
-							};
-						})}
-					/>
-				</Toolbar>
-			)}
+					return {
+						icon: (
+							<HeadingLevelIcon
+								level={targetLevel}
+								isPressed={isActive}
+							/>
+						),
+						label: sprintf(
+							// translators: %s: heading level e.g: "1", "2", "3"
+							__('Heading %d'),
+							targetLevel
+						),
+						isActive,
+						onClick() {
+							onChange(targetLevel);
+						},
+					};
+				}
+			})}
 		/>
 	);
 }