@wordpress/block-library 9.40.2-next.v.202602241322.0 → 9.40.2

package/build-module/tabs-menu-item/edit.mjs

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { __, sprintf } from "@wordpress/i18n";
 import {
   useBlockProps,
+  withColors,
   store as blockEditorStore,
   RichText
 } from "@wordpress/block-editor";
@@ -12,8 +13,18 @@ import slugFromLabel from "../tab/slug-from-label.mjs";
 import Controls from "./controls.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Edit({
+  attributes,
+  setAttributes,
   context,
   clientId,
+  activeBackgroundColor,
+  setActiveBackgroundColor,
+  activeTextColor,
+  setActiveTextColor,
+  hoverBackgroundColor,
+  setHoverBackgroundColor,
+  hoverTextColor,
+  setHoverTextColor,
   __unstableLayoutClassNames: layoutClassNames
 }) {
   const tabIndex = context["core/tabs-menu-item-index"] ?? 0;
@@ -88,6 +99,35 @@ function Edit({
       __unstableMarkNextChangeAsNotPersistent
     ]
   );
+  const customColorStyles = useMemo(() => {
+    const styles = {};
+    const activeBg = activeBackgroundColor?.color || attributes.customActiveBackgroundColor;
+    const activeText = activeTextColor?.color || attributes.customActiveTextColor;
+    const hoverBg = hoverBackgroundColor?.color || attributes.customHoverBackgroundColor;
+    const hoverText = hoverTextColor?.color || attributes.customHoverTextColor;
+    if (activeBg) {
+      styles["--custom-tab-active-color"] = activeBg;
+    }
+    if (activeText) {
+      styles["--custom-tab-active-text-color"] = activeText;
+    }
+    if (hoverBg) {
+      styles["--custom-tab-hover-color"] = hoverBg;
+    }
+    if (hoverText) {
+      styles["--custom-tab-hover-text-color"] = hoverText;
+    }
+    return styles;
+  }, [
+    activeBackgroundColor?.color,
+    attributes.customActiveBackgroundColor,
+    activeTextColor?.color,
+    attributes.customActiveTextColor,
+    hoverBackgroundColor?.color,
+    attributes.customHoverBackgroundColor,
+    hoverTextColor?.color,
+    attributes.customHoverTextColor
+  ]);
   const tabPanelId = tabId || `tab-${tabIndex}`;
   const tabLabelId = `${tabPanelId}--tab`;
   const blockProps = useBlockProps({
@@ -95,6 +135,7 @@ function Edit({
       "is-active": isActiveTab,
       "is-selected": isSelectedTab
     }),
+    style: customColorStyles,
     "aria-controls": tabPanelId,
     "aria-selected": isActiveTab,
     id: tabLabelId,
@@ -106,11 +147,24 @@ function Edit({
     /* @__PURE__ */ jsx(
       Controls,
       {
-        tabsClientId,
-        tabClientId,
-        tabIndex,
-        tabsCount: tabsList.length,
-        tabsMenuClientId
+        ...{
+          attributes,
+          setAttributes,
+          clientId,
+          tabsClientId,
+          tabClientId,
+          tabIndex,
+          tabsCount: tabsList.length,
+          tabsMenuClientId,
+          activeBackgroundColor,
+          setActiveBackgroundColor,
+          activeTextColor,
+          setActiveTextColor,
+          hoverBackgroundColor,
+          setHoverBackgroundColor,
+          hoverTextColor,
+          setHoverTextColor
+        }
       }
     ),
     /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(
@@ -129,7 +183,13 @@ function Edit({
     ) })
   ] });
 }
+var edit_default = withColors(
+  "activeBackgroundColor",
+  "activeTextColor",
+  "hoverBackgroundColor",
+  "hoverTextColor"
+)(Edit);
 export {
-  Edit as default
+  edit_default as default
 };
 //# sourceMappingURL=edit.mjs.map

package/build-module/tabs-menu-item/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs-menu-item/edit.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tRichText,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport slugFromLabel from '../tab/slug-from-label';\nimport Controls from './controls';\n\nexport default function Edit( {\n\tcontext,\n\tclientId,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\t// Context from tabs-menu (per-item context via BlockContextProvider)\n\tconst tabIndex = context[ 'core/tabs-menu-item-index' ] ?? 0;\n\tconst tabId = context[ 'core/tabs-menu-item-id' ] ?? '';\n\tconst tabLabel = context[ 'core/tabs-menu-item-label' ] ?? '';\n\tconst tabClientId = context[ 'core/tabs-menu-item-clientId' ] ?? '';\n\n\t// Context from parent tabs block, memoized to prevent unnecessary re-renders.\n\tconst contextTabsList = context[ 'core/tabs-list' ];\n\tconst tabsList = useMemo(\n\t\t() => contextTabsList || [],\n\t\t[ contextTabsList ]\n\t);\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;\n\tconst editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];\n\n\t// Memoize effectiveActiveIndex to ensure it updates when context changes\n\tconst effectiveActiveIndex = useMemo( () => {\n\t\treturn editorActiveTabIndex ?? activeTabIndex;\n\t}, [ editorActiveTabIndex, activeTabIndex ] );\n\n\tconst isActiveTab = tabIndex === effectiveActiveIndex;\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Get parent tabs clientId for updating editorActiveTabIndex\n\tconst { tabsClientId, tabsMenuClientId, selectedTabClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\t\t\t// tabs-menu-item -> tabs-menu -> tabs\n\t\t\tconst _tabsMenuClientId = getBlockRootClientId( clientId );\n\t\t\tconst _tabsClientId = _tabsMenuClientId\n\t\t\t\t? getBlockRootClientId( _tabsMenuClientId )\n\t\t\t\t: null;\n\n\t\t\tconst selectedIds = getSelectedBlockClientIds();\n\n\t\t\t// Find if any tab is selected\n\t\t\tlet selectedTab = null;\n\t\t\tfor ( const tab of tabsList ) {\n\t\t\t\tif (\n\t\t\t\t\tselectedIds.includes( tab.clientId ) ||\n\t\t\t\t\thasSelectedInnerBlock( tab.clientId, true )\n\t\t\t\t) {\n\t\t\t\t\tselectedTab = tab.clientId;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttabsClientId: _tabsClientId,\n\t\t\t\ttabsMenuClientId: _tabsMenuClientId,\n\t\t\t\tselectedTabClientId: selectedTab,\n\t\t\t};\n\t\t},\n\t\t[ clientId, tabsList ]\n\t);\n\n\tconst isSelectedTab = tabClientId === selectedTabClientId;\n\n\t// Update tab label in the tab block\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst handleLabelChange = useCallback(\n\t\t( newLabel ) => {\n\t\t\tif ( tabClientId ) {\n\t\t\t\tupdateBlockAttributes( tabClientId, {\n\t\t\t\t\tlabel: newLabel,\n\t\t\t\t\tanchor: slugFromLabel( newLabel, tabIndex ),\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[ updateBlockAttributes, tabClientId, tabIndex ]\n\t);\n\n\t// Update editor active tab index on parent tabs block when tab is clicked\n\tconst handleTabClick = useCallback(\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\n\t\t\t// Update the parent tabs block's editorActiveTabIndex (ephemeral, not persisted)\n\t\t\tif ( tabsClientId && tabIndex !== effectiveActiveIndex ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: tabIndex,\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\ttabsClientId,\n\t\t\ttabIndex,\n\t\t\teffectiveActiveIndex,\n\t\t\tupdateBlockAttributes,\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t]\n\t);\n\n\tconst tabPanelId = tabId || `tab-${ tabIndex }`;\n\tconst tabLabelId = `${ tabPanelId }--tab`;\n\n\t// Use blockProps for core style engine support\n\tconst blockProps = useBlockProps( {\n\t\tclassName: clsx( layoutClassNames, {\n\t\t\t'is-active': isActiveTab,\n\t\t\t'is-selected': isSelectedTab,\n\t\t} ),\n\t\t'aria-controls': tabPanelId,\n\t\t'aria-selected': isActiveTab,\n\t\tid: tabLabelId,\n\t\trole: 'tab',\n\t\ttabIndex: -1,\n\t\tonClick: handleTabClick,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<Controls\n\t\t\t\ttabsClientId={ tabsClientId }\n\t\t\t\ttabClientId={ tabClientId }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\ttabsCount={ tabsList.length }\n\t\t\t\ttabsMenuClientId={ tabsMenuClientId }\n\t\t\t/>\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<RichText\n\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tplaceholder={ sprintf(\n\t\t\t\t\t\t/* translators: %d is the tab index + 1 */\n\t\t\t\t\t\t__( 'Tab title %d' ),\n\t\t\t\t\t\ttabIndex + 1\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ tabLabel || '' }\n\t\t\t\t\tonChange={ handleLabelChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\twithColors,\n\tstore as blockEditorStore,\n\tRichText,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport slugFromLabel from '../tab/slug-from-label';\nimport Controls from './controls';\n\nfunction Edit( {\n\tattributes,\n\tsetAttributes,\n\tcontext,\n\tclientId,\n\tactiveBackgroundColor,\n\tsetActiveBackgroundColor,\n\tactiveTextColor,\n\tsetActiveTextColor,\n\thoverBackgroundColor,\n\tsetHoverBackgroundColor,\n\thoverTextColor,\n\tsetHoverTextColor,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\t// Context from tabs-menu (per-item context via BlockContextProvider)\n\tconst tabIndex = context[ 'core/tabs-menu-item-index' ] ?? 0;\n\tconst tabId = context[ 'core/tabs-menu-item-id' ] ?? '';\n\tconst tabLabel = context[ 'core/tabs-menu-item-label' ] ?? '';\n\tconst tabClientId = context[ 'core/tabs-menu-item-clientId' ] ?? '';\n\n\t// Context from parent tabs block, memoized to prevent unnecessary re-renders.\n\tconst contextTabsList = context[ 'core/tabs-list' ];\n\tconst tabsList = useMemo(\n\t\t() => contextTabsList || [],\n\t\t[ contextTabsList ]\n\t);\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;\n\tconst editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];\n\n\t// Memoize effectiveActiveIndex to ensure it updates when context changes\n\tconst effectiveActiveIndex = useMemo( () => {\n\t\treturn editorActiveTabIndex ?? activeTabIndex;\n\t}, [ editorActiveTabIndex, activeTabIndex ] );\n\n\tconst isActiveTab = tabIndex === effectiveActiveIndex;\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Get parent tabs clientId for updating editorActiveTabIndex\n\tconst { tabsClientId, tabsMenuClientId, selectedTabClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\t\t\t// tabs-menu-item -> tabs-menu -> tabs\n\t\t\tconst _tabsMenuClientId = getBlockRootClientId( clientId );\n\t\t\tconst _tabsClientId = _tabsMenuClientId\n\t\t\t\t? getBlockRootClientId( _tabsMenuClientId )\n\t\t\t\t: null;\n\n\t\t\tconst selectedIds = getSelectedBlockClientIds();\n\n\t\t\t// Find if any tab is selected\n\t\t\tlet selectedTab = null;\n\t\t\tfor ( const tab of tabsList ) {\n\t\t\t\tif (\n\t\t\t\t\tselectedIds.includes( tab.clientId ) ||\n\t\t\t\t\thasSelectedInnerBlock( tab.clientId, true )\n\t\t\t\t) {\n\t\t\t\t\tselectedTab = tab.clientId;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttabsClientId: _tabsClientId,\n\t\t\t\ttabsMenuClientId: _tabsMenuClientId,\n\t\t\t\tselectedTabClientId: selectedTab,\n\t\t\t};\n\t\t},\n\t\t[ clientId, tabsList ]\n\t);\n\n\tconst isSelectedTab = tabClientId === selectedTabClientId;\n\n\t// Update tab label in the tab block\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst handleLabelChange = useCallback(\n\t\t( newLabel ) => {\n\t\t\tif ( tabClientId ) {\n\t\t\t\tupdateBlockAttributes( tabClientId, {\n\t\t\t\t\tlabel: newLabel,\n\t\t\t\t\tanchor: slugFromLabel( newLabel, tabIndex ),\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[ updateBlockAttributes, tabClientId, tabIndex ]\n\t);\n\n\t// Update editor active tab index on parent tabs block when tab is clicked\n\tconst handleTabClick = useCallback(\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\n\t\t\t// Update the parent tabs block's editorActiveTabIndex (ephemeral, not persisted)\n\t\t\tif ( tabsClientId && tabIndex !== effectiveActiveIndex ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: tabIndex,\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\ttabsClientId,\n\t\t\ttabIndex,\n\t\t\teffectiveActiveIndex,\n\t\t\tupdateBlockAttributes,\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t]\n\t);\n\n\t// Build CSS custom properties for active/hover color states\n\tconst customColorStyles = useMemo( () => {\n\t\tconst styles = {};\n\n\t\t// Active/hover colors from custom attributes\n\t\tconst activeBg =\n\t\t\tactiveBackgroundColor?.color ||\n\t\t\tattributes.customActiveBackgroundColor;\n\t\tconst activeText =\n\t\t\tactiveTextColor?.color || attributes.customActiveTextColor;\n\t\tconst hoverBg =\n\t\t\thoverBackgroundColor?.color ||\n\t\t\tattributes.customHoverBackgroundColor;\n\t\tconst hoverText =\n\t\t\thoverTextColor?.color || attributes.customHoverTextColor;\n\n\t\tif ( activeBg ) {\n\t\t\tstyles[ '--custom-tab-active-color' ] = activeBg;\n\t\t}\n\t\tif ( activeText ) {\n\t\t\tstyles[ '--custom-tab-active-text-color' ] = activeText;\n\t\t}\n\t\tif ( hoverBg ) {\n\t\t\tstyles[ '--custom-tab-hover-color' ] = hoverBg;\n\t\t}\n\t\tif ( hoverText ) {\n\t\t\tstyles[ '--custom-tab-hover-text-color' ] = hoverText;\n\t\t}\n\n\t\treturn styles;\n\t}, [\n\t\tactiveBackgroundColor?.color,\n\t\tattributes.customActiveBackgroundColor,\n\t\tactiveTextColor?.color,\n\t\tattributes.customActiveTextColor,\n\t\thoverBackgroundColor?.color,\n\t\tattributes.customHoverBackgroundColor,\n\t\thoverTextColor?.color,\n\t\tattributes.customHoverTextColor,\n\t] );\n\n\tconst tabPanelId = tabId || `tab-${ tabIndex }`;\n\tconst tabLabelId = `${ tabPanelId }--tab`;\n\n\t// Use blockProps for core style engine support\n\tconst blockProps = useBlockProps( {\n\t\tclassName: clsx( layoutClassNames, {\n\t\t\t'is-active': isActiveTab,\n\t\t\t'is-selected': isSelectedTab,\n\t\t} ),\n\t\tstyle: customColorStyles,\n\t\t'aria-controls': tabPanelId,\n\t\t'aria-selected': isActiveTab,\n\t\tid: tabLabelId,\n\t\trole: 'tab',\n\t\ttabIndex: -1,\n\t\tonClick: handleTabClick,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<Controls\n\t\t\t\t{ ...{\n\t\t\t\t\tattributes,\n\t\t\t\t\tsetAttributes,\n\t\t\t\t\tclientId,\n\t\t\t\t\ttabsClientId,\n\t\t\t\t\ttabClientId,\n\t\t\t\t\ttabIndex,\n\t\t\t\t\ttabsCount: tabsList.length,\n\t\t\t\t\ttabsMenuClientId,\n\t\t\t\t\tactiveBackgroundColor,\n\t\t\t\t\tsetActiveBackgroundColor,\n\t\t\t\t\tactiveTextColor,\n\t\t\t\t\tsetActiveTextColor,\n\t\t\t\t\thoverBackgroundColor,\n\t\t\t\t\tsetHoverBackgroundColor,\n\t\t\t\t\thoverTextColor,\n\t\t\t\t\tsetHoverTextColor,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<RichText\n\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tplaceholder={ sprintf(\n\t\t\t\t\t\t/* translators: %d is the tab index + 1 */\n\t\t\t\t\t\t__( 'Tab title %d' ),\n\t\t\t\t\t\ttabIndex + 1\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ tabLabel || '' }\n\t\t\t\t\tonChange={ handleLabelChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default withColors(\n\t'activeBackgroundColor',\n\t'activeTextColor',\n\t'hoverBackgroundColor',\n\t'hoverTextColor'\n)( Edit );\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/tabs-menu-item/save.mjs

@@ -1,9 +1,23 @@
 // packages/block-library/src/tabs-menu-item/save.js
 import { useBlockProps } from "@wordpress/block-editor";
 import { jsx } from "react/jsx-runtime";
-function save() {
+function save({ attributes }) {
+  const customColorStyles = {};
+  if (attributes.customActiveBackgroundColor) {
+    customColorStyles["--custom-tab-active-color"] = attributes.customActiveBackgroundColor;
+  }
+  if (attributes.customActiveTextColor) {
+    customColorStyles["--custom-tab-active-text-color"] = attributes.customActiveTextColor;
+  }
+  if (attributes.customHoverBackgroundColor) {
+    customColorStyles["--custom-tab-hover-color"] = attributes.customHoverBackgroundColor;
+  }
+  if (attributes.customHoverTextColor) {
+    customColorStyles["--custom-tab-hover-text-color"] = attributes.customHoverTextColor;
+  }
   const blockProps = useBlockProps.save({
     className: "wp-block-tabs-menu-item__template",
+    style: customColorStyles,
     type: "button",
     role: "tab"
   });

package/build-module/tabs-menu-item/save.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs-menu-item/save.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps } from '@wordpress/block-editor';\n\nexport default function save() {\n\tconst blockProps = useBlockProps.save( {\n\t\tclassName: 'wp-block-tabs-menu-item__template',\n\t\ttype: 'button',\n\t\trole: 'tab',\n\t} );\n\n\treturn <button { ...blockProps } />;\n}\n"],
-  "mappings": ";AAGA,SAAS,qBAAqB;AAStB;AAPO,SAAR,OAAwB;AAC9B,QAAM,aAAa,cAAc,KAAM;AAAA,IACtC,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,EACP,CAAE;AAEF,SAAO,oBAAC,YAAS,GAAG,YAAa;AAClC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps } from '@wordpress/block-editor';\n\nexport default function save( { attributes } ) {\n\t// Build CSS custom properties for active/hover colors\n\tconst customColorStyles = {};\n\n\t// Active/hover colors from custom attributes\n\tif ( attributes.customActiveBackgroundColor ) {\n\t\tcustomColorStyles[ '--custom-tab-active-color' ] =\n\t\t\tattributes.customActiveBackgroundColor;\n\t}\n\tif ( attributes.customActiveTextColor ) {\n\t\tcustomColorStyles[ '--custom-tab-active-text-color' ] =\n\t\t\tattributes.customActiveTextColor;\n\t}\n\tif ( attributes.customHoverBackgroundColor ) {\n\t\tcustomColorStyles[ '--custom-tab-hover-color' ] =\n\t\t\tattributes.customHoverBackgroundColor;\n\t}\n\tif ( attributes.customHoverTextColor ) {\n\t\tcustomColorStyles[ '--custom-tab-hover-text-color' ] =\n\t\t\tattributes.customHoverTextColor;\n\t}\n\n\t// useBlockProps.save includes all core style engine classes and styles\n\t// The button content is replaced by PHP during rendering, so we output\n\t// an empty button as a template.\n\tconst blockProps = useBlockProps.save( {\n\t\tclassName: 'wp-block-tabs-menu-item__template',\n\t\tstyle: customColorStyles,\n\t\ttype: 'button',\n\t\trole: 'tab',\n\t} );\n\n\treturn <button { ...blockProps } />;\n}\n"],
+  "mappings": ";AAGA,SAAS,qBAAqB;AAkCtB;AAhCO,SAAR,KAAuB,EAAE,WAAW,GAAI;AAE9C,QAAM,oBAAoB,CAAC;AAG3B,MAAK,WAAW,6BAA8B;AAC7C,sBAAmB,2BAA4B,IAC9C,WAAW;AAAA,EACb;AACA,MAAK,WAAW,uBAAwB;AACvC,sBAAmB,gCAAiC,IACnD,WAAW;AAAA,EACb;AACA,MAAK,WAAW,4BAA6B;AAC5C,sBAAmB,0BAA2B,IAC7C,WAAW;AAAA,EACb;AACA,MAAK,WAAW,sBAAuB;AACtC,sBAAmB,+BAAgC,IAClD,WAAW;AAAA,EACb;AAKA,QAAM,aAAa,cAAc,KAAM;AAAA,IACtC,WAAW;AAAA,IACX,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACP,CAAE;AAEF,SAAO,oBAAC,YAAS,GAAG,YAAa;AAClC;",
   "names": []
 }

package/build-style/editor-rtl.css

@@ -818,20 +818,21 @@ html :where(.wp-block-column) {
   right: 0;
 }
 
-.block-library-html__modal {
-  height: 100%;
+@media (min-width: 600px) {
+  .block-library-html__modal:not(.is-full-screen) {
+    height: 9999rem;
+  }
 }
 .block-library-html__modal .components-modal__children-container {
   height: 100%;
 }
 
 .block-library-html__modal-tabs {
-  overflow-y: auto;
+  flex: 1;
 }
 
 .block-library-html__modal-content {
   flex: 1;
-  min-height: 0;
 }
 
 .block-library-html__modal-tab {
@@ -871,9 +872,17 @@ html :where(.wp-block-column) {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
-  flex: 1;
   min-height: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+.block-library-html__preview iframe {
+  height: 100%;
+}
+
+.wp-block[data-align=center] > .wp-block-icon {
+  display: flex;
+  justify-content: center;
 }
 
 .wp-block-icon__inserter {
@@ -1814,6 +1823,16 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   color: #cc1818;
 }
 
+.navigation-link-to__action-button {
+  grid-column: auto;
+}
+.navigation-link-to__action-button:nth-last-child(1 of .navigation-link-to__action-button):nth-child(odd of .navigation-link-to__action-button) {
+  grid-column: 1/-1;
+}
+.navigation-link-to__action-button.navigation-link-to__action-button.navigation-link-to__action-button {
+  justify-content: center;
+}
+
 .wp-block-navigation-submenu {
   display: block;
 }
@@ -2325,6 +2344,7 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
 }
 
 .wp-block-tabs-menu-item.is-selected {
+  outline: 2px solid var(--wp-admin-theme-color, #007cba);
   outline-offset: 2px;
 }
 
@@ -2335,6 +2355,10 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
 .block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) .wp-block-tabs-menu-item {
   flex-basis: 100% !important;
 }
+.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item):hover > .wp-block-tabs-menu-item {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}
 
 .block-editor-template-part__selection-modal {
   z-index: 1000001;

package/build-style/editor.css

@@ -820,20 +820,21 @@ html :where(.wp-block-column) {
   left: 0;
 }
 
-.block-library-html__modal {
-  height: 100%;
+@media (min-width: 600px) {
+  .block-library-html__modal:not(.is-full-screen) {
+    height: 9999rem;
+  }
 }
 .block-library-html__modal .components-modal__children-container {
   height: 100%;
 }
 
 .block-library-html__modal-tabs {
-  overflow-y: auto;
+  flex: 1;
 }
 
 .block-library-html__modal-content {
   flex: 1;
-  min-height: 0;
 }
 
 .block-library-html__modal-tab {
@@ -874,9 +875,17 @@ html :where(.wp-block-column) {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
-  flex: 1;
   min-height: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+.block-library-html__preview iframe {
+  height: 100%;
+}
+
+.wp-block[data-align=center] > .wp-block-icon {
+  display: flex;
+  justify-content: center;
 }
 
 .wp-block-icon__inserter {
@@ -1818,6 +1827,16 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   color: #cc1818;
 }
 
+.navigation-link-to__action-button {
+  grid-column: auto;
+}
+.navigation-link-to__action-button:nth-last-child(1 of .navigation-link-to__action-button):nth-child(odd of .navigation-link-to__action-button) {
+  grid-column: 1/-1;
+}
+.navigation-link-to__action-button.navigation-link-to__action-button.navigation-link-to__action-button {
+  justify-content: center;
+}
+
 .wp-block-navigation-submenu {
   display: block;
 }
@@ -2329,6 +2348,7 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
 }
 
 .wp-block-tabs-menu-item.is-selected {
+  outline: 2px solid var(--wp-admin-theme-color, #007cba);
   outline-offset: 2px;
 }
 
@@ -2339,6 +2359,10 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
 .block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) .wp-block-tabs-menu-item {
   flex-basis: 100% !important;
 }
+.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item):hover > .wp-block-tabs-menu-item {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}
 
 .block-editor-template-part__selection-modal {
   z-index: 1000001;

package/build-style/html/editor-rtl.css

@@ -95,20 +95,21 @@
   right: 0;
 }
 
-.block-library-html__modal {
-  height: 100%;
+@media (min-width: 600px) {
+  .block-library-html__modal:not(.is-full-screen) {
+    height: 9999rem;
+  }
 }
 .block-library-html__modal .components-modal__children-container {
   height: 100%;
 }
 
 .block-library-html__modal-tabs {
-  overflow-y: auto;
+  flex: 1;
 }
 
 .block-library-html__modal-content {
   flex: 1;
-  min-height: 0;
 }
 
 .block-library-html__modal-tab {
@@ -148,7 +149,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
-  flex: 1;
   min-height: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+.block-library-html__preview iframe {
+  height: 100%;
 }

package/build-style/html/editor.css

@@ -95,20 +95,21 @@
   left: 0;
 }
 
-.block-library-html__modal {
-  height: 100%;
+@media (min-width: 600px) {
+  .block-library-html__modal:not(.is-full-screen) {
+    height: 9999rem;
+  }
 }
 .block-library-html__modal .components-modal__children-container {
   height: 100%;
 }
 
 .block-library-html__modal-tabs {
-  overflow-y: auto;
+  flex: 1;
 }
 
 .block-library-html__modal-content {
   flex: 1;
-  min-height: 0;
 }
 
 .block-library-html__modal-tab {
@@ -149,7 +150,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
-  flex: 1;
   min-height: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+.block-library-html__preview iframe {
+  height: 100%;
 }

package/build-style/icon/editor-rtl.css

@@ -43,6 +43,11 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+.wp-block[data-align=center] > .wp-block-icon {
+  display: flex;
+  justify-content: center;
+}
+
 .wp-block-icon__inserter {
   padding: 0 24px;
   margin: 0 -24px;

package/build-style/icon/editor.css

@@ -43,6 +43,11 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+.wp-block[data-align=center] > .wp-block-icon {
+  display: flex;
+  justify-content: center;
+}
+
 .wp-block-icon__inserter {
   padding: 0 24px;
   margin: 0 -24px;

package/build-style/navigation/style-rtl.css

@@ -244,7 +244,17 @@
     transform: rotate(90deg);
   }
 }
-.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
+@media (hover: hover) {
+  .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+    visibility: visible;
+    overflow: visible;
+    opacity: 1;
+    width: auto;
+    height: auto;
+    min-width: 200px;
+  }
+}
+.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
   visibility: visible;
   overflow: visible;
@@ -564,6 +574,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
   display: block;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
+  left: auto;
+  right: 0;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;

package/build-style/navigation/style.css

@@ -244,7 +244,17 @@
     transform: rotate(-90deg);
   }
 }
-.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
+@media (hover: hover) {
+  .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+    visibility: visible;
+    overflow: visible;
+    opacity: 1;
+    width: auto;
+    height: auto;
+    min-width: 200px;
+  }
+}
+.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
   visibility: visible;
   overflow: visible;
@@ -564,6 +574,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
   display: block;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
+  right: auto;
+  left: 0;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;

package/build-style/navigation-link/editor-rtl.css

@@ -158,4 +158,14 @@
  */
 .navigation-link-control__error-text {
   color: #cc1818;
+}
+
+.navigation-link-to__action-button {
+  grid-column: auto;
+}
+.navigation-link-to__action-button:nth-last-child(1 of .navigation-link-to__action-button):nth-child(odd of .navigation-link-to__action-button) {
+  grid-column: 1/-1;
+}
+.navigation-link-to__action-button.navigation-link-to__action-button.navigation-link-to__action-button {
+  justify-content: center;
 }

package/build-style/navigation-link/editor.css

@@ -158,4 +158,14 @@
  */
 .navigation-link-control__error-text {
   color: #cc1818;
+}
+
+.navigation-link-to__action-button {
+  grid-column: auto;
+}
+.navigation-link-to__action-button:nth-last-child(1 of .navigation-link-to__action-button):nth-child(odd of .navigation-link-to__action-button) {
+  grid-column: 1/-1;
+}
+.navigation-link-to__action-button.navigation-link-to__action-button.navigation-link-to__action-button {
+  justify-content: center;
 }

package/build-style/navigation-overlay-close/style-rtl.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.5em;
-  padding: 0.5em;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -13,8 +13,8 @@
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 24px;
+  height: 24px;
   fill: currentColor;
   display: block;
   flex-shrink: 0;

package/build-style/navigation-overlay-close/style.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.5em;
-  padding: 0.5em;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -13,8 +13,8 @@
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 24px;
+  height: 24px;
   fill: currentColor;
   display: block;
   flex-shrink: 0;