@wordpress/block-library 9.48.0 → 10.0.0

package/build-module/tabs/view.mjs

@@ -5,40 +5,8 @@ import {
   getElement,
   withSyncEvent
 } from "@wordpress/interactivity";
-function createReadOnlyProxy(obj) {
-  const arrayMutationMethods = /* @__PURE__ */ new Set([
-    "push",
-    "pop",
-    "shift",
-    "unshift",
-    "splice",
-    "sort",
-    "reverse",
-    "copyWithin",
-    "fill"
-  ]);
-  return new Proxy(obj, {
-    get(target, prop) {
-      if (Array.isArray(target) && arrayMutationMethods.has(prop)) {
-        return () => {
-        };
-      }
-      const value = target[prop];
-      if (typeof value === "object" && value !== null) {
-        return createReadOnlyProxy(value);
-      }
-      return value;
-    },
-    set() {
-      return false;
-    },
-    deleteProperty() {
-      return false;
-    }
-  });
-}
-var { actions: privateActions, state: privateState } = store(
-  "core/tabs/private",
+var { actions, state } = store(
+  "core/tabs",
   {
     state: {
       /**
@@ -49,7 +17,7 @@ var { actions: privateActions, state: privateState } = store(
       get tabsList() {
         const context = getContext();
         const tabsId = context?.tabsId;
-        const tabsList = privateState[tabsId];
+        const tabsList = state[tabsId];
         return tabsList;
       },
       /**
@@ -64,8 +32,8 @@ var { actions: privateActions, state: privateState } = store(
         if (!tabId) {
           return null;
         }
-        const { tabsList } = privateState;
-        const tabIndex = tabsList.findIndex((t) => t.id === tabId);
+        const { tabsList } = state;
+        const tabIndex = tabsList.findIndex((t) => t === tabId);
         return tabIndex;
       },
       /**
@@ -75,7 +43,7 @@ var { actions: privateActions, state: privateState } = store(
        */
       get isActiveTab() {
         const { activeTabIndex } = getContext();
-        const { tabIndex } = privateState;
+        const { tabIndex } = state;
         return activeTabIndex === tabIndex;
       },
       /**
@@ -85,7 +53,7 @@ var { actions: privateActions, state: privateState } = store(
        * @type {number}
        */
       get tabIndexAttribute() {
-        return privateState.isActiveTab ? 0 : -1;
+        return state.isActiveTab ? 0 : -1;
       }
     },
     actions: {
@@ -95,24 +63,16 @@ var { actions: privateActions, state: privateState } = store(
        * @param {KeyboardEvent} event The keydown event.
        */
       handleTabKeyDown: withSyncEvent((event) => {
-        const context = getContext();
-        const { isVertical } = context;
-        const { tabIndex } = privateState;
+        const { tabIndex } = state;
         if (tabIndex === null) {
           return;
         }
-        if (event.key === "ArrowRight" && !isVertical) {
-          event.preventDefault();
-          privateActions.moveFocus(tabIndex + 1);
-        } else if (event.key === "ArrowLeft" && !isVertical) {
+        if (event.key === "ArrowRight") {
           event.preventDefault();
-          privateActions.moveFocus(tabIndex - 1);
-        } else if (event.key === "ArrowDown" && isVertical) {
+          actions.moveFocus(tabIndex + 1);
+        } else if (event.key === "ArrowLeft") {
           event.preventDefault();
-          privateActions.moveFocus(tabIndex + 1);
-        } else if (event.key === "ArrowUp" && isVertical) {
-          event.preventDefault();
-          privateActions.moveFocus(tabIndex - 1);
+          actions.moveFocus(tabIndex - 1);
         }
       }),
       /**
@@ -122,9 +82,9 @@ var { actions: privateActions, state: privateState } = store(
        */
       handleTabClick: withSyncEvent((event) => {
         event.preventDefault();
-        const { tabIndex } = privateState;
+        const { tabIndex } = state;
         if (tabIndex !== null) {
-          privateActions.setActiveTab(tabIndex);
+          actions.setActiveTab(tabIndex);
         }
       }),
       /**
@@ -133,7 +93,7 @@ var { actions: privateActions, state: privateState } = store(
        * @param {number} tabIndex The index to move focus to.
        */
       moveFocus: (tabIndex) => {
-        const { tabsList } = privateState;
+        const { tabsList } = state;
         if (!tabsList || tabsList.length === 0) {
           return;
         }
@@ -143,20 +103,20 @@ var { actions: privateActions, state: privateState } = store(
         } else if (newIndex >= tabsList.length) {
           newIndex = 0;
         }
-        const tabId = tabsList[newIndex].id;
+        const tabId = tabsList[newIndex];
         const tabElement = document.getElementById("tab__" + tabId);
         if (tabElement) {
           tabElement.focus();
         }
       },
       /**
-       * Sets the active tab index (internal implementation).
+       * Sets the active tab index.
        *
        * @param {number}  tabIndex    The index of the active tab.
        * @param {boolean} scrollToTab Whether to scroll to the tab element.
        */
       setActiveTab: (tabIndex, scrollToTab = false) => {
-        const { tabsList } = privateState;
+        const { tabsList } = state;
         if (!tabsList || tabsList.length === 0) {
           return;
         }
@@ -169,7 +129,7 @@ var { actions: privateActions, state: privateState } = store(
         const context = getContext();
         context.activeTabIndex = newIndex;
         if (scrollToTab) {
-          const tabId = tabsList[newIndex].id;
+          const tabId = tabsList[newIndex];
           const tabElement = document.getElementById(tabId);
           if (tabElement) {
             setTimeout(() => {
@@ -185,15 +145,15 @@ var { actions: privateActions, state: privateState } = store(
        *
        */
       onTabsInit: () => {
-        const { tabsList } = privateState;
+        const { tabsList } = state;
         if (tabsList.length === 0) {
           return;
         }
         const { hash } = window.location;
         const tabId = hash.replace("#", "");
-        const tabIndex = tabsList.findIndex((t) => t.id === tabId);
+        const tabIndex = tabsList.findIndex((t) => t === tabId);
         if (tabIndex >= 0) {
-          privateActions.setActiveTab(tabIndex, true);
+          actions.setActiveTab(tabIndex, true);
         }
       }
     }
@@ -202,46 +162,4 @@ var { actions: privateActions, state: privateState } = store(
     lock: true
   }
 );
-store("core/tabs", {
-  state: {
-    /**
-     * Gets a contextually aware list of tabs for the current tabs block.
-     * Public API for third-party access.
-     *
-     * @type {Array}
-     */
-    get tabsList() {
-      return createReadOnlyProxy(privateState.tabsList);
-    },
-    /**
-     * Gets the index of the active tab element whether it
-     * is a tab label or tab panel.
-     *
-     * @type {number|null}
-     */
-    get tabIndex() {
-      return privateState.tabIndex;
-    },
-    /**
-     * Whether the tab panel or tab label is the active tab.
-     *
-     * @type {boolean}
-     */
-    get isActiveTab() {
-      return privateState.isActiveTab;
-    }
-  },
-  actions: {
-    /**
-     * Sets the active tab index.
-     * Public API for third-party programmatic tab activation.
-     *
-     * @param {number}  tabIndex    The index of the active tab.
-     * @param {boolean} scrollToTab Whether to scroll to the tab element.
-     */
-    setActiveTab: (tabIndex, scrollToTab = false) => {
-      privateActions.setActiveTab(tabIndex, scrollToTab);
-    }
-  }
-});
 //# sourceMappingURL=view.mjs.map

package/build-module/tabs/view.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/view.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tstore,\n\tgetContext,\n\tgetElement,\n\twithSyncEvent,\n} from '@wordpress/interactivity';\n\nfunction createReadOnlyProxy( obj ) {\n\tconst arrayMutationMethods = new Set( [\n\t\t'push',\n\t\t'pop',\n\t\t'shift',\n\t\t'unshift',\n\t\t'splice',\n\t\t'sort',\n\t\t'reverse',\n\t\t'copyWithin',\n\t\t'fill',\n\t] );\n\n\treturn new Proxy( obj, {\n\t\tget( target, prop ) {\n\t\t\t// If accessing an array mutation method, return a no-op function.\n\t\t\tif ( Array.isArray( target ) && arrayMutationMethods.has( prop ) ) {\n\t\t\t\treturn () => {};\n\t\t\t}\n\n\t\t\tconst value = target[ prop ];\n\t\t\tif ( typeof value === 'object' && value !== null ) {\n\t\t\t\treturn createReadOnlyProxy( value );\n\t\t\t}\n\t\t\treturn value;\n\t\t},\n\t\tset() {\n\t\t\treturn false;\n\t\t},\n\t\tdeleteProperty() {\n\t\t\treturn false;\n\t\t},\n\t} );\n}\n\n// Private store for internal tabs functionality and security.\nconst { actions: privateActions, state: privateState } = store(\n\t'core/tabs/private',\n\t{\n\t\tstate: {\n\t\t\t/**\n\t\t\t * Gets a contextually aware list of tabs for the current tabs block.\n\t\t\t *\n\t\t\t * @type {Array}\n\t\t\t */\n\t\t\tget tabsList() {\n\t\t\t\tconst context = getContext();\n\t\t\t\tconst tabsId = context?.tabsId;\n\t\t\t\tconst tabsList = privateState[ tabsId ];\n\t\t\t\treturn tabsList;\n\t\t\t},\n\t\t\t/**\n\t\t\t * Gets the index of the active tab element whether it\n\t\t\t * is a tab label or tab panel.\n\t\t\t *\n\t\t\t * @type {number|null}\n\t\t\t */\n\t\t\tget tabIndex() {\n\t\t\t\tconst { attributes } = getElement();\n\t\t\t\tconst tabId = attributes?.id?.replace( 'tab__', '' ) || null;\n\t\t\t\tif ( ! tabId ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tconst { tabsList } = privateState;\n\t\t\t\tconst tabIndex = tabsList.findIndex( ( t ) => t.id === tabId );\n\t\t\t\treturn tabIndex;\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether the tab panel or tab label is the active tab.\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tget isActiveTab() {\n\t\t\t\tconst { activeTabIndex } = getContext();\n\t\t\t\tconst { tabIndex } = privateState;\n\t\t\t\treturn activeTabIndex === tabIndex;\n\t\t\t},\n\t\t\t/**\n\t\t\t * The value of the tabindex attribute for tab buttons.\n\t\t\t * Only the active tab should be in the tab sequence.\n\t\t\t *\n\t\t\t * @type {number}\n\t\t\t */\n\t\t\tget tabIndexAttribute() {\n\t\t\t\treturn privateState.isActiveTab ? 0 : -1;\n\t\t\t},\n\t\t},\n\t\tactions: {\n\t\t\t/**\n\t\t\t * Handles the keydown events for the tab label and tabs controller.\n\t\t\t *\n\t\t\t * @param {KeyboardEvent} event The keydown event.\n\t\t\t */\n\t\t\thandleTabKeyDown: withSyncEvent( ( event ) => {\n\t\t\t\tconst context = getContext();\n\t\t\t\tconst { isVertical } = context;\n\t\t\t\tconst { tabIndex } = privateState;\n\n\t\t\t\tif ( tabIndex === null ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( event.key === 'ArrowRight' && ! isVertical ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex + 1 );\n\t\t\t\t} else if ( event.key === 'ArrowLeft' && ! isVertical ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex - 1 );\n\t\t\t\t} else if ( event.key === 'ArrowDown' && isVertical ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex + 1 );\n\t\t\t\t} else if ( event.key === 'ArrowUp' && isVertical ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex - 1 );\n\t\t\t\t}\n\t\t\t} ),\n\t\t\t/**\n\t\t\t * Handles the click event for the tab label.\n\t\t\t *\n\t\t\t * @param {MouseEvent} event The click event.\n\t\t\t */\n\t\t\thandleTabClick: withSyncEvent( ( event ) => {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\tconst { tabIndex } = privateState;\n\t\t\t\tif ( tabIndex !== null ) {\n\t\t\t\t\tprivateActions.setActiveTab( tabIndex );\n\t\t\t\t}\n\t\t\t} ),\n\t\t\t/**\n\t\t\t * Moves focus to a specific tab without activating it.\n\t\t\t *\n\t\t\t * @param {number} tabIndex The index to move focus to.\n\t\t\t */\n\t\t\tmoveFocus: ( tabIndex ) => {\n\t\t\t\tconst { tabsList } = privateState;\n\n\t\t\t\tif ( ! tabsList || tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet newIndex = tabIndex;\n\t\t\t\tif ( newIndex < 0 ) {\n\t\t\t\t\tnewIndex = tabsList.length - 1;\n\t\t\t\t} else if ( newIndex >= tabsList.length ) {\n\t\t\t\t\tnewIndex = 0;\n\t\t\t\t}\n\n\t\t\t\tconst tabId = tabsList[ newIndex ].id;\n\t\t\t\tconst tabElement = document.getElementById( 'tab__' + tabId );\n\t\t\t\tif ( tabElement ) {\n\t\t\t\t\ttabElement.focus();\n\t\t\t\t}\n\t\t\t},\n\t\t\t/**\n\t\t\t * Sets the active tab index (internal implementation).\n\t\t\t *\n\t\t\t * @param {number}  tabIndex    The index of the active tab.\n\t\t\t * @param {boolean} scrollToTab Whether to scroll to the tab element.\n\t\t\t */\n\t\t\tsetActiveTab: ( tabIndex, scrollToTab = false ) => {\n\t\t\t\tconst { tabsList } = privateState;\n\n\t\t\t\tif ( ! tabsList || tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet newIndex = tabIndex;\n\t\t\t\tif ( newIndex < 0 ) {\n\t\t\t\t\tnewIndex = 0;\n\t\t\t\t} else if ( newIndex >= tabsList.length ) {\n\t\t\t\t\tnewIndex = tabsList.length - 1;\n\t\t\t\t}\n\n\t\t\t\tconst context = getContext();\n\t\t\t\tcontext.activeTabIndex = newIndex;\n\n\t\t\t\tif ( scrollToTab ) {\n\t\t\t\t\tconst tabId = tabsList[ newIndex ].id;\n\t\t\t\t\tconst tabElement = document.getElementById( tabId );\n\t\t\t\t\tif ( tabElement ) {\n\t\t\t\t\t\tsetTimeout( () => {\n\t\t\t\t\t\t\ttabElement.scrollIntoView( { behavior: 'smooth' } );\n\t\t\t\t\t\t}, 100 );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tcallbacks: {\n\t\t\t/**\n\t\t\t * When the tabs are initialized, we need to check if there is a hash in the url and if so if it exists in the current tabsList, set the active tab to that index.\n\t\t\t *\n\t\t\t */\n\t\t\tonTabsInit: () => {\n\t\t\t\tconst { tabsList } = privateState;\n\t\t\t\tif ( tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst { hash } = window.location;\n\t\t\t\tconst tabId = hash.replace( '#', '' );\n\t\t\t\tconst tabIndex = tabsList.findIndex( ( t ) => t.id === tabId );\n\t\t\t\t// Check if tabIndex is a positive number and if so we'll auto activate that tab.\n\t\t\t\tif ( tabIndex >= 0 ) {\n\t\t\t\t\tprivateActions.setActiveTab( tabIndex, true );\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\tlock: true,\n\t}\n);\n\n// Public store for third-party extensibility.\nstore( 'core/tabs', {\n\tstate: {\n\t\t/**\n\t\t * Gets a contextually aware list of tabs for the current tabs block.\n\t\t * Public API for third-party access.\n\t\t *\n\t\t * @type {Array}\n\t\t */\n\t\tget tabsList() {\n\t\t\treturn createReadOnlyProxy( privateState.tabsList );\n\t\t},\n\t\t/**\n\t\t * Gets the index of the active tab element whether it\n\t\t * is a tab label or tab panel.\n\t\t *\n\t\t * @type {number|null}\n\t\t */\n\t\tget tabIndex() {\n\t\t\treturn privateState.tabIndex;\n\t\t},\n\t\t/**\n\t\t * Whether the tab panel or tab label is the active tab.\n\t\t *\n\t\t * @type {boolean}\n\t\t */\n\t\tget isActiveTab() {\n\t\t\treturn privateState.isActiveTab;\n\t\t},\n\t},\n\tactions: {\n\t\t/**\n\t\t * Sets the active tab index.\n\t\t * Public API for third-party programmatic tab activation.\n\t\t *\n\t\t * @param {number}  tabIndex    The index of the active tab.\n\t\t * @param {boolean} scrollToTab Whether to scroll to the tab element.\n\t\t */\n\t\tsetActiveTab: ( tabIndex, scrollToTab = false ) => {\n\t\t\tprivateActions.setActiveTab( tabIndex, scrollToTab );\n\t\t},\n\t},\n} );\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tstore,\n\tgetContext,\n\tgetElement,\n\twithSyncEvent,\n} from '@wordpress/interactivity';\n\nconst { actions, state } = store(\n\t'core/tabs',\n\t{\n\t\tstate: {\n\t\t\t/**\n\t\t\t * Gets a contextually aware list of tabs for the current tabs block.\n\t\t\t *\n\t\t\t * @type {Array}\n\t\t\t */\n\t\t\tget tabsList() {\n\t\t\t\tconst context = getContext();\n\t\t\t\tconst tabsId = context?.tabsId;\n\t\t\t\tconst tabsList = state[ tabsId ];\n\t\t\t\treturn tabsList;\n\t\t\t},\n\t\t\t/**\n\t\t\t * Gets the index of the active tab element whether it\n\t\t\t * is a tab label or tab panel.\n\t\t\t *\n\t\t\t * @type {number|null}\n\t\t\t */\n\t\t\tget tabIndex() {\n\t\t\t\tconst { attributes } = getElement();\n\t\t\t\tconst tabId = attributes?.id?.replace( 'tab__', '' ) || null;\n\t\t\t\tif ( ! tabId ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tconst { tabsList } = state;\n\t\t\t\tconst tabIndex = tabsList.findIndex( ( t ) => t === tabId );\n\t\t\t\treturn tabIndex;\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether the tab panel or tab label is the active tab.\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tget isActiveTab() {\n\t\t\t\tconst { activeTabIndex } = getContext();\n\t\t\t\tconst { tabIndex } = state;\n\t\t\t\treturn activeTabIndex === tabIndex;\n\t\t\t},\n\t\t\t/**\n\t\t\t * The value of the tabindex attribute for tab buttons.\n\t\t\t * Only the active tab should be in the tab sequence.\n\t\t\t *\n\t\t\t * @type {number}\n\t\t\t */\n\t\t\tget tabIndexAttribute() {\n\t\t\t\treturn state.isActiveTab ? 0 : -1;\n\t\t\t},\n\t\t},\n\t\tactions: {\n\t\t\t/**\n\t\t\t * Handles the keydown events for the tab label and tabs controller.\n\t\t\t *\n\t\t\t * @param {KeyboardEvent} event The keydown event.\n\t\t\t */\n\t\t\thandleTabKeyDown: withSyncEvent( ( event ) => {\n\t\t\t\tconst { tabIndex } = state;\n\n\t\t\t\tif ( tabIndex === null ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( event.key === 'ArrowRight' ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tactions.moveFocus( tabIndex + 1 );\n\t\t\t\t} else if ( event.key === 'ArrowLeft' ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tactions.moveFocus( tabIndex - 1 );\n\t\t\t\t}\n\t\t\t} ),\n\t\t\t/**\n\t\t\t * Handles the click event for the tab label.\n\t\t\t *\n\t\t\t * @param {MouseEvent} event The click event.\n\t\t\t */\n\t\t\thandleTabClick: withSyncEvent( ( event ) => {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\tconst { tabIndex } = state;\n\t\t\t\tif ( tabIndex !== null ) {\n\t\t\t\t\tactions.setActiveTab( tabIndex );\n\t\t\t\t}\n\t\t\t} ),\n\t\t\t/**\n\t\t\t * Moves focus to a specific tab without activating it.\n\t\t\t *\n\t\t\t * @param {number} tabIndex The index to move focus to.\n\t\t\t */\n\t\t\tmoveFocus: ( tabIndex ) => {\n\t\t\t\tconst { tabsList } = state;\n\n\t\t\t\tif ( ! tabsList || tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet newIndex = tabIndex;\n\t\t\t\tif ( newIndex < 0 ) {\n\t\t\t\t\tnewIndex = tabsList.length - 1;\n\t\t\t\t} else if ( newIndex >= tabsList.length ) {\n\t\t\t\t\tnewIndex = 0;\n\t\t\t\t}\n\n\t\t\t\tconst tabId = tabsList[ newIndex ];\n\t\t\t\tconst tabElement = document.getElementById( 'tab__' + tabId );\n\t\t\t\tif ( tabElement ) {\n\t\t\t\t\ttabElement.focus();\n\t\t\t\t}\n\t\t\t},\n\t\t\t/**\n\t\t\t * Sets the active tab index.\n\t\t\t *\n\t\t\t * @param {number}  tabIndex    The index of the active tab.\n\t\t\t * @param {boolean} scrollToTab Whether to scroll to the tab element.\n\t\t\t */\n\t\t\tsetActiveTab: ( tabIndex, scrollToTab = false ) => {\n\t\t\t\tconst { tabsList } = state;\n\n\t\t\t\tif ( ! tabsList || tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet newIndex = tabIndex;\n\t\t\t\tif ( newIndex < 0 ) {\n\t\t\t\t\tnewIndex = 0;\n\t\t\t\t} else if ( newIndex >= tabsList.length ) {\n\t\t\t\t\tnewIndex = tabsList.length - 1;\n\t\t\t\t}\n\n\t\t\t\tconst context = getContext();\n\t\t\t\tcontext.activeTabIndex = newIndex;\n\n\t\t\t\tif ( scrollToTab ) {\n\t\t\t\t\tconst tabId = tabsList[ newIndex ];\n\t\t\t\t\tconst tabElement = document.getElementById( tabId );\n\t\t\t\t\tif ( tabElement ) {\n\t\t\t\t\t\tsetTimeout( () => {\n\t\t\t\t\t\t\ttabElement.scrollIntoView( { behavior: 'smooth' } );\n\t\t\t\t\t\t}, 100 );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tcallbacks: {\n\t\t\t/**\n\t\t\t * When the tabs are initialized, we need to check if there is a hash in the url and if so if it exists in the current tabsList, set the active tab to that index.\n\t\t\t *\n\t\t\t */\n\t\t\tonTabsInit: () => {\n\t\t\t\tconst { tabsList } = state;\n\t\t\t\tif ( tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst { hash } = window.location;\n\t\t\t\tconst tabId = hash.replace( '#', '' );\n\t\t\t\tconst tabIndex = tabsList.findIndex( ( t ) => t === tabId );\n\t\t\t\t// Check if tabIndex is a positive number and if so we'll auto activate that tab.\n\t\t\t\tif ( tabIndex >= 0 ) {\n\t\t\t\t\tactions.setActiveTab( tabIndex, true );\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\tlock: true,\n\t}\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/template-part/edit/advanced-controls.mjs

@@ -44,7 +44,6 @@ function TemplatePartAdvancedControls({
       /* @__PURE__ */ jsx(
         TextControl,
         {
-          __next40pxDefaultSize: true,
           label: __("Title"),
           value: title,
           onChange: (value) => {

package/build-module/template-part/edit/advanced-controls.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/template-part/edit/advanced-controls.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEntityProp, store as coreStore } from '@wordpress/core-data';\nimport { SelectControl, TextControl } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { TemplatePartImportControls } from './import-controls';\nimport { unlock } from '../../lock-unlock';\n\nconst { HTMLElementControl } = unlock( blockEditorPrivateApis );\n\nexport function TemplatePartAdvancedControls( {\n\ttagName,\n\tsetAttributes,\n\tisEntityAvailable,\n\ttemplatePartId,\n\tdefaultWrapper,\n\thasInnerBlocks,\n\tclientId,\n} ) {\n\tconst [ area, setArea ] = useEntityProp(\n\t\t'postType',\n\t\t'wp_template_part',\n\t\t'area',\n\t\ttemplatePartId\n\t);\n\n\tconst [ title, setTitle ] = useEntityProp(\n\t\t'postType',\n\t\t'wp_template_part',\n\t\t'title',\n\t\ttemplatePartId\n\t);\n\n\tconst defaultTemplatePartAreas = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getCurrentTheme()\n\t\t\t\t?.default_template_part_areas || [],\n\t\t[]\n\t);\n\n\tconst areaOptions = defaultTemplatePartAreas.map(\n\t\t( { label, area: _area } ) => ( {\n\t\t\tlabel,\n\t\t\tvalue: _area,\n\t\t} )\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ isEntityAvailable && (\n\t\t\t\t<>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Title' ) }\n\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tsetTitle( value );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonFocus={ ( event ) => event.target.select() }\n\t\t\t\t\t/>\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Area' ) }\n\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\toptions={ areaOptions }\n\t\t\t\t\t\tvalue={ area }\n\t\t\t\t\t\tonChange={ setArea }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<HTMLElementControl\n\t\t\t\ttagName={ tagName || '' }\n\t\t\t\tonChange={ ( value ) => setAttributes( { tagName: value } ) }\n\t\t\t\tclientId={ clientId }\n\t\t\t\toptions={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: sprintf(\n\t\t\t\t\t\t\t/* translators: %s: HTML tag based on area. */\n\t\t\t\t\t\t\t__( 'Default based on area (%s)' ),\n\t\t\t\t\t\t\t`<${ defaultWrapper }>`\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue: '',\n\t\t\t\t\t},\n\t\t\t\t\t{ label: '<header>', value: 'header' },\n\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t{ label: '<article>', value: 'article' },\n\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t{ label: '<footer>', value: 'footer' },\n\t\t\t\t\t{ label: '<div>', value: 'div' },\n\t\t\t\t] }\n\t\t\t/>\n\t\t\t{ ! hasInnerBlocks && (\n\t\t\t\t<TemplatePartImportControls\n\t\t\t\t\tarea={ area }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe,SAAS,iBAAiB;AAClD,SAAS,eAAe,mBAAmB;AAC3C,SAAS,SAAS,UAAU;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,eAAe,8BAA8B;AAKtD,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AA4CnB,mBACC,KADD;AA1CJ,IAAM,EAAE,mBAAmB,IAAI,OAAQ,sBAAuB;AAEvD,SAAS,6BAA8B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,MAAM,OAAQ,IAAI;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,OAAO,QAAS,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,2BAA2B;AAAA,IAChC,CAAE,WACD,OAAQ,SAAU,EAAE,gBAAgB,GACjC,+BAA+B,CAAC;AAAA,IACpC,CAAC;AAAA,EACF;AAEA,QAAM,cAAc,yBAAyB;AAAA,IAC5C,CAAE,EAAE,OAAO,MAAM,MAAM,OAAS;AAAA,MAC/B;AAAA,MACA,OAAO;AAAA,IACR;AAAA,EACD;AAEA,SACC,iCACG;AAAA,yBACD,iCACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,OAAQ,GAAI,OAAQ;AAAA,UACpB,OAAQ;AAAA,UACR,UAAW,CAAE,UAAW;AACvB,qBAAU,KAAM;AAAA,UACjB;AAAA,UACA,SAAU,CAAE,UAAW,MAAM,OAAO,OAAO;AAAA;AAAA,MAC5C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,OAAQ,GAAI,MAAO;AAAA,UACnB,eAAc;AAAA,UACd,SAAU;AAAA,UACV,OAAQ;AAAA,UACR,UAAW;AAAA;AAAA,MACZ;AAAA,OACD;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,SAAU,WAAW;AAAA,QACrB,UAAW,CAAE,UAAW,cAAe,EAAE,SAAS,MAAM,CAAE;AAAA,QAC1D;AAAA,QACA,SAAU;AAAA,UACT;AAAA,YACC,OAAO;AAAA;AAAA,cAEN,GAAI,4BAA6B;AAAA,cACjC,IAAK,cAAe;AAAA,YACrB;AAAA,YACA,OAAO;AAAA,UACR;AAAA,UACA,EAAE,OAAO,YAAY,OAAO,SAAS;AAAA,UACrC,EAAE,OAAO,UAAU,OAAO,OAAO;AAAA,UACjC,EAAE,OAAO,aAAa,OAAO,UAAU;AAAA,UACvC,EAAE,OAAO,aAAa,OAAO,UAAU;AAAA,UACvC,EAAE,OAAO,WAAW,OAAO,QAAQ;AAAA,UACnC,EAAE,OAAO,YAAY,OAAO,SAAS;AAAA,UACrC,EAAE,OAAO,SAAS,OAAO,MAAM;AAAA,QAChC;AAAA;AAAA,IACD;AAAA,IACE,CAAE,kBACH;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEntityProp, store as coreStore } from '@wordpress/core-data';\nimport { SelectControl, TextControl } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { TemplatePartImportControls } from './import-controls';\nimport { unlock } from '../../lock-unlock';\n\nconst { HTMLElementControl } = unlock( blockEditorPrivateApis );\n\nexport function TemplatePartAdvancedControls( {\n\ttagName,\n\tsetAttributes,\n\tisEntityAvailable,\n\ttemplatePartId,\n\tdefaultWrapper,\n\thasInnerBlocks,\n\tclientId,\n} ) {\n\tconst [ area, setArea ] = useEntityProp(\n\t\t'postType',\n\t\t'wp_template_part',\n\t\t'area',\n\t\ttemplatePartId\n\t);\n\n\tconst [ title, setTitle ] = useEntityProp(\n\t\t'postType',\n\t\t'wp_template_part',\n\t\t'title',\n\t\ttemplatePartId\n\t);\n\n\tconst defaultTemplatePartAreas = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getCurrentTheme()\n\t\t\t\t?.default_template_part_areas || [],\n\t\t[]\n\t);\n\n\tconst areaOptions = defaultTemplatePartAreas.map(\n\t\t( { label, area: _area } ) => ( {\n\t\t\tlabel,\n\t\t\tvalue: _area,\n\t\t} )\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ isEntityAvailable && (\n\t\t\t\t<>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Title' ) }\n\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tsetTitle( value );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonFocus={ ( event ) => event.target.select() }\n\t\t\t\t\t/>\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Area' ) }\n\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\toptions={ areaOptions }\n\t\t\t\t\t\tvalue={ area }\n\t\t\t\t\t\tonChange={ setArea }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<HTMLElementControl\n\t\t\t\ttagName={ tagName || '' }\n\t\t\t\tonChange={ ( value ) => setAttributes( { tagName: value } ) }\n\t\t\t\tclientId={ clientId }\n\t\t\t\toptions={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: sprintf(\n\t\t\t\t\t\t\t/* translators: %s: HTML tag based on area. */\n\t\t\t\t\t\t\t__( 'Default based on area (%s)' ),\n\t\t\t\t\t\t\t`<${ defaultWrapper }>`\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue: '',\n\t\t\t\t\t},\n\t\t\t\t\t{ label: '<header>', value: 'header' },\n\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t{ label: '<article>', value: 'article' },\n\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t{ label: '<footer>', value: 'footer' },\n\t\t\t\t\t{ label: '<div>', value: 'div' },\n\t\t\t\t] }\n\t\t\t/>\n\t\t\t{ ! hasInnerBlocks && (\n\t\t\t\t<TemplatePartImportControls\n\t\t\t\t\tarea={ area }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe,SAAS,iBAAiB;AAClD,SAAS,eAAe,mBAAmB;AAC3C,SAAS,SAAS,UAAU;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,eAAe,8BAA8B;AAKtD,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AA4CnB,mBACC,KADD;AA1CJ,IAAM,EAAE,mBAAmB,IAAI,OAAQ,sBAAuB;AAEvD,SAAS,6BAA8B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,MAAM,OAAQ,IAAI;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,OAAO,QAAS,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,2BAA2B;AAAA,IAChC,CAAE,WACD,OAAQ,SAAU,EAAE,gBAAgB,GACjC,+BAA+B,CAAC;AAAA,IACpC,CAAC;AAAA,EACF;AAEA,QAAM,cAAc,yBAAyB;AAAA,IAC5C,CAAE,EAAE,OAAO,MAAM,MAAM,OAAS;AAAA,MAC/B;AAAA,MACA,OAAO;AAAA,IACR;AAAA,EACD;AAEA,SACC,iCACG;AAAA,yBACD,iCACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,GAAI,OAAQ;AAAA,UACpB,OAAQ;AAAA,UACR,UAAW,CAAE,UAAW;AACvB,qBAAU,KAAM;AAAA,UACjB;AAAA,UACA,SAAU,CAAE,UAAW,MAAM,OAAO,OAAO;AAAA;AAAA,MAC5C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,OAAQ,GAAI,MAAO;AAAA,UACnB,eAAc;AAAA,UACd,SAAU;AAAA,UACV,OAAQ;AAAA,UACR,UAAW;AAAA;AAAA,MACZ;AAAA,OACD;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,SAAU,WAAW;AAAA,QACrB,UAAW,CAAE,UAAW,cAAe,EAAE,SAAS,MAAM,CAAE;AAAA,QAC1D;AAAA,QACA,SAAU;AAAA,UACT;AAAA,YACC,OAAO;AAAA;AAAA,cAEN,GAAI,4BAA6B;AAAA,cACjC,IAAK,cAAe;AAAA,YACrB;AAAA,YACA,OAAO;AAAA,UACR;AAAA,UACA,EAAE,OAAO,YAAY,OAAO,SAAS;AAAA,UACrC,EAAE,OAAO,UAAU,OAAO,OAAO;AAAA,UACjC,EAAE,OAAO,aAAa,OAAO,UAAU;AAAA,UACvC,EAAE,OAAO,aAAa,OAAO,UAAU;AAAA,UACvC,EAAE,OAAO,WAAW,OAAO,QAAQ;AAAA,UACnC,EAAE,OAAO,YAAY,OAAO,SAAS;AAAA,UACrC,EAAE,OAAO,SAAS,OAAO,MAAM;AAAA,QAChC;AAAA;AAAA,IACD;AAAA,IACE,CAAE,kBACH;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
   "names": []
 }

package/build-module/template-part/edit/title-modal.mjs

@@ -33,8 +33,7 @@ function TitleModal({ areaLabel, onClose, onSubmit }) {
             label: __("Name"),
             value: title,
             onChange: setTitle,
-            placeholder: __("Custom Template Part"),
-            __next40pxDefaultSize: true
+            placeholder: __("Custom Template Part")
           }
         ),
         /* @__PURE__ */ jsxs(HStack, { justify: "right", children: [

package/build-module/template-part/edit/title-modal.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/template-part/edit/title-modal.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tTextControl,\n\tButton,\n\tModal,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\nexport default function TitleModal( { areaLabel, onClose, onSubmit } ) {\n\t// Restructure onCreate to set the blocks on local state.\n\t// Add modal to confirm title and trigger onCreate.\n\tconst [ title, setTitle ] = useState( '' );\n\n\tconst submitForCreation = ( event ) => {\n\t\tevent.preventDefault();\n\t\tonSubmit( title );\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ sprintf(\n\t\t\t\t// Translators: %s as template part area title (\"Header\", \"Footer\", etc.).\n\t\t\t\t__( 'Create new %s' ),\n\t\t\t\tareaLabel.toLowerCase()\n\t\t\t) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tfocusOnMount=\"firstContentElement\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t<form onSubmit={ submitForCreation }>\n\t\t\t\t<VStack spacing=\"5\">\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\tonChange={ setTitle }\n\t\t\t\t\t\tplaceholder={ __( 'Custom Template Part' ) }\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t/>\n\t\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\tsetTitle( '' );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tdisabled={ ! title.length }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Create' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAyBF,cAOA,YAPA;AAvBU,SAAR,WAA6B,EAAE,WAAW,SAAS,SAAS,GAAI;AAGtE,QAAM,CAAE,OAAO,QAAS,IAAI,SAAU,EAAG;AAEzC,QAAM,oBAAoB,CAAE,UAAW;AACtC,UAAM,eAAe;AACrB,aAAU,KAAM;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA;AAAA,QAEP,GAAI,eAAgB;AAAA,QACpB,UAAU,YAAY;AAAA,MACvB;AAAA,MACA,gBAAiB;AAAA,MACjB,cAAa;AAAA,MACb,MAAK;AAAA,MAEL,8BAAC,UAAK,UAAW,mBAChB,+BAAC,UAAO,SAAQ,KACf;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR,UAAW;AAAA,YACX,aAAc,GAAI,sBAAuB;AAAA,YACzC,uBAAqB;AAAA;AAAA,QACtB;AAAA,QACA,qBAAC,UAAO,SAAQ,SACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAQ;AAAA,cACR,SAAU,MAAM;AACf,wBAAQ;AACR,yBAAU,EAAG;AAAA,cACd;AAAA,cAEE,aAAI,QAAS;AAAA;AAAA,UAChB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,wBAAsB;AAAA,cACtB,UAAW,CAAE,MAAM;AAAA,cACnB,uBAAqB;AAAA,cAEnB,aAAI,QAAS;AAAA;AAAA,UAChB;AAAA,WACD;AAAA,SACD,GACD;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tTextControl,\n\tButton,\n\tModal,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\nexport default function TitleModal( { areaLabel, onClose, onSubmit } ) {\n\t// Restructure onCreate to set the blocks on local state.\n\t// Add modal to confirm title and trigger onCreate.\n\tconst [ title, setTitle ] = useState( '' );\n\n\tconst submitForCreation = ( event ) => {\n\t\tevent.preventDefault();\n\t\tonSubmit( title );\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ sprintf(\n\t\t\t\t// Translators: %s as template part area title (\"Header\", \"Footer\", etc.).\n\t\t\t\t__( 'Create new %s' ),\n\t\t\t\tareaLabel.toLowerCase()\n\t\t\t) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tfocusOnMount=\"firstContentElement\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t<form onSubmit={ submitForCreation }>\n\t\t\t\t<VStack spacing=\"5\">\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\tonChange={ setTitle }\n\t\t\t\t\t\tplaceholder={ __( 'Custom Template Part' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\tsetTitle( '' );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tdisabled={ ! title.length }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Create' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAyBF,cAMA,YANA;AAvBU,SAAR,WAA6B,EAAE,WAAW,SAAS,SAAS,GAAI;AAGtE,QAAM,CAAE,OAAO,QAAS,IAAI,SAAU,EAAG;AAEzC,QAAM,oBAAoB,CAAE,UAAW;AACtC,UAAM,eAAe;AACrB,aAAU,KAAM;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA;AAAA,QAEP,GAAI,eAAgB;AAAA,QACpB,UAAU,YAAY;AAAA,MACvB;AAAA,MACA,gBAAiB;AAAA,MACjB,cAAa;AAAA,MACb,MAAK;AAAA,MAEL,8BAAC,UAAK,UAAW,mBAChB,+BAAC,UAAO,SAAQ,KACf;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR,UAAW;AAAA,YACX,aAAc,GAAI,sBAAuB;AAAA;AAAA,QAC1C;AAAA,QACA,qBAAC,UAAO,SAAQ,SACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAQ;AAAA,cACR,SAAU,MAAM;AACf,wBAAQ;AACR,yBAAU,EAAG;AAAA,cACd;AAAA,cAEE,aAAI,QAAS;AAAA;AAAA,UAChB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,wBAAsB;AAAA,cACtB,UAAW,CAAE,MAAM;AAAA,cACnB,uBAAqB;AAAA,cAEnB,aAAI,QAAS;AAAA;AAAA,UAChB;AAAA,WACD;AAAA,SACD,GACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/terms-query/edit/inspector-controls/order-control.mjs

@@ -9,11 +9,11 @@ function OrderControl({ orderBy, order, onChange, ...props }) {
       __next40pxDefaultSize: true,
       options: [
         {
-          label: __("Name: A \u2192 Z"),
+          label: __("Name: A → Z"),
           value: "name/asc"
         },
         {
-          label: __("Name: Z \u2192 A"),
+          label: __("Name: Z → A"),
           value: "name/desc"
         },
         {

package/build-module/terms-query/edit/inspector-controls/order-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/terms-query/edit/inspector-controls/order-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\n\nexport default function OrderControl( { orderBy, order, onChange, ...props } ) {\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\toptions={ [\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Name: A \u2192 Z' ),\n\t\t\t\t\tvalue: 'name/asc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Name: Z \u2192 A' ),\n\t\t\t\t\tvalue: 'name/desc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Count, high to low' ),\n\t\t\t\t\tvalue: 'count/desc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Count, low to high' ),\n\t\t\t\t\tvalue: 'count/asc',\n\t\t\t\t},\n\t\t\t] }\n\t\t\tvalue={ orderBy + '/' + order }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\tonChange( newOrderBy, newOrder );\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAI5B;AAFa,SAAR,aAA+B,EAAE,SAAS,OAAO,UAAU,GAAG,MAAM,GAAI;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,SAAU;AAAA,QACT;AAAA,UACC,OAAO,GAAI,kBAAc;AAAA,UACzB,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,kBAAc;AAAA,UACzB,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,oBAAqB;AAAA,UAChC,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,oBAAqB;AAAA,UAChC,OAAO;AAAA,QACR;AAAA,MACD;AAAA,MACA,OAAQ,UAAU,MAAM;AAAA,MACxB,UAAW,CAAE,UAAW;AACvB,cAAM,CAAE,YAAY,QAAS,IAAI,MAAM,MAAO,GAAI;AAClD,iBAAU,YAAY,QAAS;AAAA,MAChC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\n\nexport default function OrderControl( { orderBy, order, onChange, ...props } ) {\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\toptions={ [\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Name: A → Z' ),\n\t\t\t\t\tvalue: 'name/asc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Name: Z → A' ),\n\t\t\t\t\tvalue: 'name/desc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Count, high to low' ),\n\t\t\t\t\tvalue: 'count/desc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Count, low to high' ),\n\t\t\t\t\tvalue: 'count/asc',\n\t\t\t\t},\n\t\t\t] }\n\t\t\tvalue={ orderBy + '/' + order }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\tonChange( newOrderBy, newOrder );\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAI5B;AAFa,SAAR,aAA+B,EAAE,SAAS,OAAO,UAAU,GAAG,MAAM,GAAI;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,SAAU;AAAA,QACT;AAAA,UACC,OAAO,GAAI,aAAc;AAAA,UACzB,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,aAAc;AAAA,UACzB,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,oBAAqB;AAAA,UAChC,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,oBAAqB;AAAA,UAChC,OAAO;AAAA,QACR;AAAA,MACD;AAAA,MACA,OAAQ,UAAU,MAAM;AAAA,MACxB,UAAW,CAAE,UAAW;AACvB,cAAM,CAAE,YAAY,QAAS,IAAI,MAAM,MAAO,GAAI;AAClD,iBAAU,YAAY,QAAS;AAAA,MAChC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
   "names": []
 }

package/build-module/utils/style-state.mjs

@@ -0,0 +1,132 @@
+// packages/block-library/src/utils/style-state.js
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { unlock } from "../lock-unlock.mjs";
+var { cleanEmptyObject, getStyleForState, setStyleForState } = unlock(
+  blockEditorPrivateApis
+);
+function getStateStyle(style, selectedState) {
+  return getStyleForState(style, selectedState) || {};
+}
+function getMappedDimensions(dimensions, dimensionKeyMap = {}) {
+  return Object.fromEntries(
+    Object.entries(dimensions).map(([key, value]) => [
+      dimensionKeyMap[key] || key,
+      value
+    ])
+  );
+}
+function getControlledDimensions(dimensions, dimensionKeys) {
+  if (!dimensionKeys) {
+    return dimensions;
+  }
+  return Object.fromEntries(
+    dimensionKeys.map((key) => [key, dimensions[key]])
+  );
+}
+function getStyleStateKey(selectedState) {
+  return [
+    selectedState?.viewport || "default",
+    selectedState?.pseudo || "default"
+  ].join(":");
+}
+function getStateDimensions(style, selectedState) {
+  return getStateStyle(style, selectedState)?.dimensions || {};
+}
+function getActiveDimensionValue(options = {}) {
+  const {
+    attributes = {},
+    style = attributes?.style,
+    selectedState,
+    hasSelectedStyleState,
+    attributeKey,
+    styleKey = attributeKey,
+    rootValue
+  } = options;
+  if (hasSelectedStyleState) {
+    return getStateDimensions(style, selectedState)?.[styleKey];
+  }
+  if (Object.hasOwn(options, "rootValue")) {
+    return rootValue;
+  }
+  return attributes?.[attributeKey];
+}
+function setStateDimensions(style, selectedState, nextDimensions) {
+  const stateStyle = getStateStyle(style, selectedState);
+  return setStyleForState(
+    style,
+    selectedState,
+    cleanEmptyObject({
+      ...stateStyle,
+      dimensions: cleanEmptyObject({
+        ...stateStyle?.dimensions,
+        ...nextDimensions
+      })
+    })
+  );
+}
+function getDimensionUpdateAttributes({
+  style,
+  selectedState,
+  hasSelectedStyleState,
+  nextDimensions,
+  dimensionKeyMap,
+  dimensionKeys
+}) {
+  const controlledDimensions = getControlledDimensions(
+    nextDimensions,
+    dimensionKeys
+  );
+  if (!hasSelectedStyleState) {
+    return controlledDimensions;
+  }
+  return {
+    style: setStateDimensions(
+      style,
+      selectedState,
+      getMappedDimensions(controlledDimensions, dimensionKeyMap)
+    )
+  };
+}
+function resetDimensions(style, keys) {
+  const dimensionsReset = Object.fromEntries(
+    keys.map((key) => [key, void 0])
+  );
+  return cleanEmptyObject({
+    ...style,
+    dimensions: cleanEmptyObject({
+      ...style?.dimensions,
+      ...dimensionsReset
+    })
+  });
+}
+function resetStateDimensions(style, selectedState, keys) {
+  return setStyleForState(
+    style,
+    selectedState,
+    resetDimensions(getStateStyle(style, selectedState), keys)
+  );
+}
+function getDimensionResetAttributes({
+  attributes = {},
+  style = attributes?.style,
+  selectedState,
+  hasSelectedStyleState,
+  keys,
+  defaultAttributes = {}
+}) {
+  return {
+    ...hasSelectedStyleState ? {} : { ...attributes, ...defaultAttributes },
+    style: hasSelectedStyleState ? resetStateDimensions(style, selectedState, keys) : resetDimensions(style, keys)
+  };
+}
+export {
+  getActiveDimensionValue,
+  getDimensionResetAttributes,
+  getDimensionUpdateAttributes,
+  getStateDimensions,
+  getStyleStateKey,
+  resetDimensions,
+  resetStateDimensions,
+  setStateDimensions
+};
+//# sourceMappingURL=style-state.mjs.map

package/build-module/utils/style-state.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/style-state.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\nconst { cleanEmptyObject, getStyleForState, setStyleForState } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction getStateStyle( style, selectedState ) {\n\treturn getStyleForState( style, selectedState ) || {};\n}\n\nfunction getMappedDimensions( dimensions, dimensionKeyMap = {} ) {\n\treturn Object.fromEntries(\n\t\tObject.entries( dimensions ).map( ( [ key, value ] ) => [\n\t\t\tdimensionKeyMap[ key ] || key,\n\t\t\tvalue,\n\t\t] )\n\t);\n}\n\nfunction getControlledDimensions( dimensions, dimensionKeys ) {\n\tif ( ! dimensionKeys ) {\n\t\treturn dimensions;\n\t}\n\n\treturn Object.fromEntries(\n\t\tdimensionKeys.map( ( key ) => [ key, dimensions[ key ] ] )\n\t);\n}\n\nexport function getStyleStateKey( selectedState ) {\n\treturn [\n\t\tselectedState?.viewport || 'default',\n\t\tselectedState?.pseudo || 'default',\n\t].join( ':' );\n}\n\nexport function getStateDimensions( style, selectedState ) {\n\treturn getStateStyle( style, selectedState )?.dimensions || {};\n}\n\nexport function getActiveDimensionValue( options = {} ) {\n\tconst {\n\t\tattributes = {},\n\t\tstyle = attributes?.style,\n\t\tselectedState,\n\t\thasSelectedStyleState,\n\t\tattributeKey,\n\t\tstyleKey = attributeKey,\n\t\trootValue,\n\t} = options;\n\n\tif ( hasSelectedStyleState ) {\n\t\treturn getStateDimensions( style, selectedState )?.[ styleKey ];\n\t}\n\n\tif ( Object.hasOwn( options, 'rootValue' ) ) {\n\t\treturn rootValue;\n\t}\n\n\treturn attributes?.[ attributeKey ];\n}\n\nexport function setStateDimensions( style, selectedState, nextDimensions ) {\n\tconst stateStyle = getStateStyle( style, selectedState );\n\n\treturn setStyleForState(\n\t\tstyle,\n\t\tselectedState,\n\t\tcleanEmptyObject( {\n\t\t\t...stateStyle,\n\t\t\tdimensions: cleanEmptyObject( {\n\t\t\t\t...stateStyle?.dimensions,\n\t\t\t\t...nextDimensions,\n\t\t\t} ),\n\t\t} )\n\t);\n}\n\nexport function getDimensionUpdateAttributes( {\n\tstyle,\n\tselectedState,\n\thasSelectedStyleState,\n\tnextDimensions,\n\tdimensionKeyMap,\n\tdimensionKeys,\n} ) {\n\tconst controlledDimensions = getControlledDimensions(\n\t\tnextDimensions,\n\t\tdimensionKeys\n\t);\n\n\tif ( ! hasSelectedStyleState ) {\n\t\treturn controlledDimensions;\n\t}\n\n\treturn {\n\t\tstyle: setStateDimensions(\n\t\t\tstyle,\n\t\t\tselectedState,\n\t\t\tgetMappedDimensions( controlledDimensions, dimensionKeyMap )\n\t\t),\n\t};\n}\n\nexport function resetDimensions( style, keys ) {\n\tconst dimensionsReset = Object.fromEntries(\n\t\tkeys.map( ( key ) => [ key, undefined ] )\n\t);\n\n\treturn cleanEmptyObject( {\n\t\t...style,\n\t\tdimensions: cleanEmptyObject( {\n\t\t\t...style?.dimensions,\n\t\t\t...dimensionsReset,\n\t\t} ),\n\t} );\n}\n\nexport function resetStateDimensions( style, selectedState, keys ) {\n\treturn setStyleForState(\n\t\tstyle,\n\t\tselectedState,\n\t\tresetDimensions( getStateStyle( style, selectedState ), keys )\n\t);\n}\n\nexport function getDimensionResetAttributes( {\n\tattributes = {},\n\tstyle = attributes?.style,\n\tselectedState,\n\thasSelectedStyleState,\n\tkeys,\n\tdefaultAttributes = {},\n} ) {\n\treturn {\n\t\t...( hasSelectedStyleState\n\t\t\t? {}\n\t\t\t: { ...attributes, ...defaultAttributes } ),\n\t\tstyle: hasSelectedStyleState\n\t\t\t? resetStateDimensions( style, selectedState, keys )\n\t\t\t: resetDimensions( style, keys ),\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/utils/waveform-player.mjs

@@ -1,11 +1,40 @@
 // packages/block-library/src/utils/waveform-player.js
-import { useRef } from "@wordpress/element";
-import { useRefEffect } from "@wordpress/compose";
+import { useEffect, useRef } from "@wordpress/element";
+import { useEvent, useRefEffect } from "@wordpress/compose";
 import { initWaveformPlayer } from "./waveform-utils.mjs";
 import { jsx } from "react/jsx-runtime";
-function WaveformPlayer({ src, title, artist, image, onEnded }) {
-  const onEndedRef = useRef(onEnded);
-  onEndedRef.current = onEnded;
+var EMPTY_ARTIST_PLACEHOLDER = " ";
+function updatePlayerMetadata(instance, { title, artist, image }) {
+  if (instance.titleEl) {
+    instance.titleEl.textContent = title ?? "";
+  }
+  if (instance.subtitleEl) {
+    instance.subtitleEl.textContent = artist ?? "";
+    instance.subtitleEl.style.display = artist ? "" : "none";
+  }
+  if (instance.artworkEl && image) {
+    instance.artworkEl.src = image;
+  }
+}
+function WaveformPlayer({
+  src,
+  title,
+  artist,
+  image,
+  waveformStyle,
+  onEnded
+}) {
+  const onEndedEvent = useEvent(onEnded);
+  const metadataRef = useRef({ title, artist, image });
+  const playerRef = useRef();
+  const hasImage = !!image;
+  useEffect(() => {
+    metadataRef.current = { title, artist, image };
+    const instance = playerRef.current?.instance;
+    if (instance) {
+      updatePlayerMetadata(instance, { title, artist, image });
+    }
+  }, [title, artist, image]);
   const ref = useRefEffect(
     (element) => {
       if (!src) {
@@ -17,23 +46,27 @@ function WaveformPlayer({ src, title, artist, image, onEnded }) {
         if (cancelled) {
           return;
         }
-        const { destroy } = initWaveformPlayer(element, {
+        const player = initWaveformPlayer(element, {
           src,
-          title,
-          artist,
-          image,
-          onEnded: () => onEndedRef.current?.()
+          ...metadataRef.current,
+          waveformStyle,
+          artist: metadataRef.current.artist || EMPTY_ARTIST_PLACEHOLDER,
+          onEnded: () => onEndedEvent?.()
         });
+        playerRef.current = player;
+        updatePlayerMetadata(player.instance, metadataRef.current);
+        const { destroy } = player;
         playerDestroy = destroy;
       }
       const timeoutId = setTimeout(init, 100);
       return () => {
         cancelled = true;
         clearTimeout(timeoutId);
+        playerRef.current = void 0;
         playerDestroy?.();
       };
     },
-    [src, title, artist, image]
+    [onEndedEvent, src, waveformStyle, hasImage]
   );
   return /* @__PURE__ */ jsx("div", { ref, className: "wp-block-playlist__waveform-player" });
 }