@wordpress/block-library 9.44.0 → 9.45.0

package/build-module/tabs/edit.mjs

@@ -5,42 +5,35 @@ import {
   BlockContextProvider,
   store as blockEditorStore
 } from "@wordpress/block-editor";
-import { useSelect, useDispatch } from "@wordpress/data";
-import { useMemo, useEffect, useRef } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import { useMemo, useEffect } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import Controls from "./controls.mjs";
+import useTabListSync from "./use-tab-list-sync.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var EMPTY_ARRAY = [];
 var TABS_TEMPLATE = [
   [
-    "core/tabs-menu",
-    {
-      lock: {
-        remove: true
-      }
-    },
+    "core/tab-list",
+    {},
     [
-      ["core/tabs-menu-item", {}],
-      ["core/tabs-menu-item", {}]
+      ["core/tab", {}],
+      ["core/tab", {}]
     ]
   ],
   [
-    "core/tab-panel",
-    {
-      lock: {
-        remove: true
-      }
-    },
+    "core/tab-panels",
+    {},
     [
       [
-        "core/tab",
+        "core/tab-panel",
         {
           label: __("Tab")
         },
         [["core/paragraph"]]
       ],
       [
-        "core/tab",
+        "core/tab-panel",
         {
           label: __("Tab")
         },
@@ -49,102 +42,40 @@ var TABS_TEMPLATE = [
     ]
   ]
 ];
-function Edit({
-  clientId,
-  attributes,
-  setAttributes,
-  __unstableLayoutClassNames: layoutClassNames
-}) {
+function Edit({ clientId, attributes, setAttributes }) {
   const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
   useEffect(() => {
     if (editorActiveTabIndex === void 0) {
       setAttributes({ editorActiveTabIndex: activeTabIndex });
     }
   }, []);
-  const { removeBlock, replaceInnerBlocks } = useDispatch(blockEditorStore);
-  const { tabs, tabPanelClientId, menuItems } = useSelect(
+  const { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(
     (select) => {
       const { getBlocks } = select(blockEditorStore);
       const innerBlocks = getBlocks(clientId);
-      const tabPanel = innerBlocks.find(
-        (block) => block.name === "core/tab-panel"
+      const tabPanelBlocks = innerBlocks.find(
+        (block) => block.name === "core/tab-panels"
       );
-      const tabsMenu = innerBlocks.find(
-        (block) => block.name === "core/tabs-menu"
+      const tabList = innerBlocks.find(
+        (block) => block.name === "core/tab-list"
       );
       return {
-        tabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,
-        tabPanelClientId: tabPanel?.clientId ?? null,
-        menuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY
+        tabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,
+        tabPanelsClientId: tabPanelBlocks?.clientId ?? null,
+        tabs: tabList?.innerBlocks ?? EMPTY_ARRAY,
+        tabListClientId: tabList?.clientId ?? null
       };
     },
     [clientId]
   );
-  const prevSyncStateRef = useRef(null);
-  useEffect(() => {
-    const currentTabs = tabs.map((tab) => ({
-      clientId: tab.clientId
-    }));
-    if (prevSyncStateRef.current === null) {
-      prevSyncStateRef.current = {
-        tabs: currentTabs,
-        menuItems: [...menuItems]
-      };
-      return;
-    }
-    const { tabs: prevTabs, menuItems: prevMenuItems } = prevSyncStateRef.current;
-    const tabsRemoved = currentTabs.length < prevTabs.length;
-    const menuItemsRemoved = menuItems.length < prevMenuItems.length;
-    const menuItemsReordered = !tabsRemoved && !menuItemsRemoved && menuItems.length === prevMenuItems.length && menuItems.some(
-      (m, i) => m.clientId !== prevMenuItems[i]?.clientId
-    );
-    prevSyncStateRef.current = {
-      tabs: currentTabs,
-      menuItems: [...menuItems]
-    };
-    if (menuItemsReordered && tabPanelClientId) {
-      const reorderedTabs = menuItems.map((menuItem) => {
-        const oldIndex = prevMenuItems.findIndex(
-          (pm) => pm.clientId === menuItem.clientId
-        );
-        return oldIndex !== -1 ? tabs[oldIndex] : null;
-      }).filter(Boolean);
-      if (reorderedTabs.length === tabs.length) {
-        replaceInnerBlocks(tabPanelClientId, reorderedTabs, false);
-      }
-      return;
-    }
-    if (!tabsRemoved && !menuItemsRemoved || tabsRemoved && menuItemsRemoved) {
-      return;
-    }
-    const currentTabIds = new Set(currentTabs.map((t) => t.clientId));
-    const currentMenuItemIds = new Set(
-      menuItems.map((m) => m.clientId)
-    );
-    if (tabsRemoved) {
-      const removedIndex = prevTabs.findIndex(
-        (t) => !currentTabIds.has(t.clientId)
-      );
-      if (removedIndex >= 0 && menuItems[removedIndex]) {
-        removeBlock(menuItems[removedIndex].clientId, false);
-        prevSyncStateRef.current.menuItems = prevSyncStateRef.current.menuItems.filter(
-          (_, i) => i !== removedIndex
-        );
-      }
-    } else {
-      const removedIndex = prevMenuItems.findIndex(
-        (m) => !currentMenuItemIds.has(m.clientId)
-      );
-      if (removedIndex >= 0 && tabs[removedIndex]) {
-        removeBlock(tabs[removedIndex].clientId, false);
-        prevSyncStateRef.current.tabs = prevSyncStateRef.current.tabs.filter(
-          (_, i) => i !== removedIndex
-        );
-      }
-    }
-  }, [tabs, tabPanelClientId, menuItems, removeBlock, replaceInnerBlocks]);
+  useTabListSync({
+    tabPanels,
+    tabs,
+    tabPanelsClientId,
+    tabListClientId
+  });
   const contextValue = useMemo(() => {
-    const tabList = tabs.map((tab, index) => ({
+    const tabList = tabPanels.map((tab, index) => ({
       id: tab.attributes.anchor || `tab-${index}`,
       label: tab.attributes.label || "",
       clientId: tab.clientId,
@@ -156,14 +87,12 @@ function Edit({
       "core/tabs-activeTabIndex": activeTabIndex,
       "core/tabs-editorActiveTabIndex": editorActiveTabIndex
     };
-  }, [tabs, anchor, activeTabIndex, editorActiveTabIndex]);
-  const blockProps = useBlockProps({
-    className: layoutClassNames
-  });
+  }, [tabPanels, anchor, activeTabIndex, editorActiveTabIndex]);
+  const blockProps = useBlockProps();
   const innerBlockProps = useInnerBlocksProps(blockProps, {
     __experimentalCaptureToolbars: true,
     template: TABS_TEMPLATE,
-    templateLock: false,
+    templateLock: "all",
     renderAppender: false
   });
   return /* @__PURE__ */ jsx(BlockContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ...innerBlockProps, children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tBlockContextProvider,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst EMPTY_ARRAY = [];\n\nconst TABS_TEMPLATE = [\n\t[\n\t\t'core/tabs-menu',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t\t[\n\t\t\t[ 'core/tabs-menu-item', {} ],\n\t\t\t[ 'core/tabs-menu-item', {} ],\n\t\t],\n\t],\n\t[\n\t\t'core/tab-panel',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t\t[\n\t\t\t[\n\t\t\t\t'core/tab',\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Tab' ),\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/tab',\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Tab' ),\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t],\n\t],\n];\n\nfunction Edit( {\n\tclientId,\n\tattributes,\n\tsetAttributes,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst { anchor, activeTabIndex, editorActiveTabIndex } = attributes;\n\n\t/**\n\t * Initialize editorActiveTabIndex to activeTabIndex on mount.\n\t * This ensures the ephemeral editor state starts at the persisted default.\n\t */\n\tuseEffect( () => {\n\t\tif ( editorActiveTabIndex === undefined ) {\n\t\t\tsetAttributes( { editorActiveTabIndex: activeTabIndex } );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tconst { removeBlock, replaceInnerBlocks } = useDispatch( blockEditorStore );\n\n\tconst { tabs, tabPanelClientId, menuItems } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( clientId );\n\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\t\t\tconst tabsMenu = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tabs-menu'\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ttabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\ttabPanelClientId: tabPanel?.clientId ?? null,\n\t\t\t\tmenuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t/**\n\t * Keep tabs and menu items in sync when either is deleted directly (e.g.\n\t * via the Backspace key or List View).\n\t *\n\t * TODO: This effect only handles deletions. The two lists can get out of\n\t * sync in other cases: if a user pastes a core/tab block into the tab-panel\n\t * (or duplicates one), no corresponding tabs-menu-item is created; if a\n\t * user drags and drops a tabs-menu-item, the tab panel is not copied with\n\t * it. We should extend this effect to handle insertions, detecting when\n\t * tabs.length > menuItems.length and inserting the missing menu\n\t * item(s) at the correct index.\n\t */\n\tconst prevSyncStateRef = useRef( null );\n\tuseEffect( () => {\n\t\tconst currentTabs = tabs.map( ( tab ) => ( {\n\t\t\tclientId: tab.clientId,\n\t\t} ) );\n\n\t\tif ( prevSyncStateRef.current === null ) {\n\t\t\tprevSyncStateRef.current = {\n\t\t\t\ttabs: currentTabs,\n\t\t\t\tmenuItems: [ ...menuItems ],\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\tconst { tabs: prevTabs, menuItems: prevMenuItems } =\n\t\t\tprevSyncStateRef.current;\n\n\t\tconst tabsRemoved = currentTabs.length < prevTabs.length;\n\t\tconst menuItemsRemoved = menuItems.length < prevMenuItems.length;\n\t\tconst menuItemsReordered =\n\t\t\t! tabsRemoved &&\n\t\t\t! menuItemsRemoved &&\n\t\t\tmenuItems.length === prevMenuItems.length &&\n\t\t\tmenuItems.some(\n\t\t\t\t( m, i ) => m.clientId !== prevMenuItems[ i ]?.clientId\n\t\t\t);\n\n\t\t// Update snapshot to the current state.\n\t\t// Snapshot is updated eagerly; post-removal mutations keep it consistent\n\t\t// so the next effect invocation sees a stable baseline.\n\t\tprevSyncStateRef.current = {\n\t\t\ttabs: currentTabs,\n\t\t\tmenuItems: [ ...menuItems ],\n\t\t};\n\n\t\t// When menu items are reordered, move the corresponding tab content\n\t\t// blocks to match the new order.\n\t\tif ( menuItemsReordered && tabPanelClientId ) {\n\t\t\tconst reorderedTabs = menuItems\n\t\t\t\t.map( ( menuItem ) => {\n\t\t\t\t\tconst oldIndex = prevMenuItems.findIndex(\n\t\t\t\t\t\t( pm ) => pm.clientId === menuItem.clientId\n\t\t\t\t\t);\n\t\t\t\t\treturn oldIndex !== -1 ? tabs[ oldIndex ] : null;\n\t\t\t\t} )\n\t\t\t\t.filter( Boolean );\n\t\t\tif ( reorderedTabs.length === tabs.length ) {\n\t\t\t\treplaceInnerBlocks( tabPanelClientId, reorderedTabs, false );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\t// Lists are in sync, nothing changed, or toolbar already removed both.\n\t\tif (\n\t\t\t( ! tabsRemoved && ! menuItemsRemoved ) ||\n\t\t\t( tabsRemoved && menuItemsRemoved )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentTabIds = new Set( currentTabs.map( ( t ) => t.clientId ) );\n\t\tconst currentMenuItemIds = new Set(\n\t\t\tmenuItems.map( ( m ) => m.clientId )\n\t\t);\n\n\t\tif ( tabsRemoved ) {\n\t\t\t// Remove the menu item at the same position.\n\t\t\tconst removedIndex = prevTabs.findIndex(\n\t\t\t\t( t ) => ! currentTabIds.has( t.clientId )\n\t\t\t);\n\t\t\tif ( removedIndex >= 0 && menuItems[ removedIndex ] ) {\n\t\t\t\tremoveBlock( menuItems[ removedIndex ].clientId, false );\n\t\t\t\tprevSyncStateRef.current.menuItems =\n\t\t\t\t\tprevSyncStateRef.current.menuItems.filter(\n\t\t\t\t\t\t( _, i ) => i !== removedIndex\n\t\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\t// Remove the tab at the same position.\n\t\t\tconst removedIndex = prevMenuItems.findIndex(\n\t\t\t\t( m ) => ! currentMenuItemIds.has( m.clientId )\n\t\t\t);\n\t\t\tif ( removedIndex >= 0 && tabs[ removedIndex ] ) {\n\t\t\t\tremoveBlock( tabs[ removedIndex ].clientId, false );\n\t\t\t\tprevSyncStateRef.current.tabs =\n\t\t\t\t\tprevSyncStateRef.current.tabs.filter(\n\t\t\t\t\t\t( _, i ) => i !== removedIndex\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}, [ tabs, tabPanelClientId, menuItems, removeBlock, replaceInnerBlocks ] );\n\n\t/**\n\t * Memoize context value to prevent unnecessary re-renders.\n\t */\n\tconst contextValue = useMemo( () => {\n\t\t/**\n\t\t * Compute tabs list from innerblocks to provide via context.\n\t\t * This traverses the tab-panel block to find all tab blocks\n\t\t * and extracts their label and anchor for the tabs-menu to consume.\n\t\t */\n\t\tconst tabList = tabs.map( ( tab, index ) => ( {\n\t\t\tid: tab.attributes.anchor || `tab-${ index }`,\n\t\t\tlabel: tab.attributes.label || '',\n\t\t\tclientId: tab.clientId,\n\t\t\tindex,\n\t\t} ) );\n\n\t\treturn {\n\t\t\t'core/tabs-list': tabList,\n\t\t\t'core/tabs-id': anchor,\n\t\t\t'core/tabs-activeTabIndex': activeTabIndex,\n\t\t\t'core/tabs-editorActiveTabIndex': editorActiveTabIndex,\n\t\t};\n\t}, [ tabs, anchor, activeTabIndex, editorActiveTabIndex ] );\n\n\t/**\n\t * Block props for the tabs container.\n\t */\n\tconst blockProps = useBlockProps( {\n\t\tclassName: layoutClassNames,\n\t} );\n\n\t/**\n\t * Innerblocks props for the tabs container.\n\t */\n\tconst innerBlockProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalCaptureToolbars: true,\n\t\ttemplate: TABS_TEMPLATE,\n\t\ttemplateLock: false,\n\t\trenderAppender: false,\n\t} );\n\n\treturn (\n\t\t<BlockContextProvider value={ contextValue }>\n\t\t\t<div { ...innerBlockProps }>\n\t\t\t\t<Controls\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t\t{ innerBlockProps.children }\n\t\t\t</div>\n\t\t</BlockContextProvider>\n\t);\n}\n\nexport default Edit;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tBlockContextProvider,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\nimport useTabListSync from './use-tab-list-sync';\n\nconst EMPTY_ARRAY = [];\n\nconst TABS_TEMPLATE = [\n\t[\n\t\t'core/tab-list',\n\t\t{},\n\t\t[\n\t\t\t[ 'core/tab', {} ],\n\t\t\t[ 'core/tab', {} ],\n\t\t],\n\t],\n\t[\n\t\t'core/tab-panels',\n\t\t{},\n\t\t[\n\t\t\t[\n\t\t\t\t'core/tab-panel',\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Tab' ),\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/tab-panel',\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Tab' ),\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t],\n\t],\n];\n\nfunction Edit( { clientId, attributes, setAttributes } ) {\n\tconst { anchor, activeTabIndex, editorActiveTabIndex } = attributes;\n\n\t/**\n\t * Initialize editorActiveTabIndex to activeTabIndex on mount.\n\t * This ensures the ephemeral editor state starts at the persisted default.\n\t */\n\tuseEffect( () => {\n\t\tif ( editorActiveTabIndex === undefined ) {\n\t\t\tsetAttributes( { editorActiveTabIndex: activeTabIndex } );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tconst { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( clientId );\n\n\t\t\tconst tabPanelBlocks = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panels'\n\t\t\t);\n\t\t\tconst tabList = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-list'\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ttabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\ttabPanelsClientId: tabPanelBlocks?.clientId ?? null,\n\t\t\t\ttabs: tabList?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\ttabListClientId: tabList?.clientId ?? null,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tuseTabListSync( {\n\t\ttabPanels,\n\t\ttabs,\n\t\ttabPanelsClientId,\n\t\ttabListClientId,\n\t} );\n\n\t/**\n\t * Memoize context value to prevent unnecessary re-renders.\n\t */\n\tconst contextValue = useMemo( () => {\n\t\t/**\n\t\t * Compute tabs list from innerblocks to provide via context.\n\t\t * This traverses the tab-panel block to find all tab blocks\n\t\t * and extracts their label and anchor for the tab-list to consume.\n\t\t */\n\t\tconst tabList = tabPanels.map( ( tab, index ) => ( {\n\t\t\tid: tab.attributes.anchor || `tab-${ index }`,\n\t\t\tlabel: tab.attributes.label || '',\n\t\t\tclientId: tab.clientId,\n\t\t\tindex,\n\t\t} ) );\n\n\t\treturn {\n\t\t\t'core/tabs-list': tabList,\n\t\t\t'core/tabs-id': anchor,\n\t\t\t'core/tabs-activeTabIndex': activeTabIndex,\n\t\t\t'core/tabs-editorActiveTabIndex': editorActiveTabIndex,\n\t\t};\n\t}, [ tabPanels, anchor, activeTabIndex, editorActiveTabIndex ] );\n\n\tconst blockProps = useBlockProps();\n\n\tconst innerBlockProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalCaptureToolbars: true,\n\t\ttemplate: TABS_TEMPLATE,\n\t\ttemplateLock: 'all',\n\t\trenderAppender: false,\n\t} );\n\n\treturn (\n\t\t<BlockContextProvider value={ contextValue }>\n\t\t\t<div { ...innerBlockProps }>\n\t\t\t\t<Controls\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t\t{ innerBlockProps.children }\n\t\t\t</div>\n\t\t</BlockContextProvider>\n\t);\n}\n\nexport default Edit;\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU;AAKnB,OAAO,cAAc;AACrB,OAAO,oBAAoB;AAgHxB,SACC,KADD;AA9GH,IAAM,cAAc,CAAC;AAErB,IAAM,gBAAgB;AAAA,EACrB;AAAA,IACC;AAAA,IACA,CAAC;AAAA,IACD;AAAA,MACC,CAAE,YAAY,CAAC,CAAE;AAAA,MACjB,CAAE,YAAY,CAAC,CAAE;AAAA,IAClB;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA,CAAC;AAAA,IACD;AAAA,MACC;AAAA,QACC;AAAA,QACA;AAAA,UACC,OAAO,GAAI,KAAM;AAAA,QAClB;AAAA,QACA,CAAE,CAAE,gBAAiB,CAAE;AAAA,MACxB;AAAA,MACA;AAAA,QACC;AAAA,QACA;AAAA,UACC,OAAO,GAAI,KAAM;AAAA,QAClB;AAAA,QACA,CAAE,CAAE,gBAAiB,CAAE;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,SAAS,KAAM,EAAE,UAAU,YAAY,cAAc,GAAI;AACxD,QAAM,EAAE,QAAQ,gBAAgB,qBAAqB,IAAI;AAMzD,YAAW,MAAM;AAChB,QAAK,yBAAyB,QAAY;AACzC,oBAAe,EAAE,sBAAsB,eAAe,CAAE;AAAA,IACzD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,WAAW,mBAAmB,MAAM,gBAAgB,IAAI;AAAA,IAC/D,CAAE,WAAY;AACb,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,QAAS;AAExC,YAAM,iBAAiB,YAAY;AAAA,QAClC,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,UAAU,YAAY;AAAA,QAC3B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AAEA,aAAO;AAAA,QACN,WAAW,gBAAgB,eAAe;AAAA,QAC1C,mBAAmB,gBAAgB,YAAY;AAAA,QAC/C,MAAM,SAAS,eAAe;AAAA,QAC9B,iBAAiB,SAAS,YAAY;AAAA,MACvC;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,iBAAgB;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAKF,QAAM,eAAe,QAAS,MAAM;AAMnC,UAAM,UAAU,UAAU,IAAK,CAAE,KAAK,WAAa;AAAA,MAClD,IAAI,IAAI,WAAW,UAAU,OAAQ,KAAM;AAAA,MAC3C,OAAO,IAAI,WAAW,SAAS;AAAA,MAC/B,UAAU,IAAI;AAAA,MACd;AAAA,IACD,EAAI;AAEJ,WAAO;AAAA,MACN,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,4BAA4B;AAAA,MAC5B,kCAAkC;AAAA,IACnC;AAAA,EACD,GAAG,CAAE,WAAW,QAAQ,gBAAgB,oBAAqB,CAAE;AAE/D,QAAM,aAAa,cAAc;AAEjC,QAAM,kBAAkB,oBAAqB,YAAY;AAAA,IACxD,+BAA+B;AAAA,IAC/B,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EACjB,CAAE;AAEF,SACC,oBAAC,wBAAqB,OAAQ,cAC7B,+BAAC,SAAM,GAAG,iBACT;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACE,gBAAgB;AAAA,KACnB,GACD;AAEF;AAEA,IAAO,eAAQ;",
   "names": []
 }

package/build-module/tabs/index.mjs

@@ -11,22 +11,22 @@ var settings = {
   example: {
     innerBlocks: [
       {
-        name: "core/tabs-menu",
+        name: "core/tab-list",
         innerBlocks: [
           {
-            name: "core/tabs-menu-item",
+            name: "core/tab",
             attributes: { anchor: "tab-1-button" }
           },
           {
-            name: "core/tabs-menu-item",
+            name: "core/tab",
             attributes: { anchor: "tab-2-button" }
           }
         ]
       },
       {
-        name: "core/tab-panel",
+        name: "core/tab-panels",
         innerBlocks: [1, 2].map((index) => ({
-          name: "core/tab",
+          name: "core/tab-panel",
           attributes: {
             anchor: `tab-${index}`,
             label: sprintf(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { tabs as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport save from './save';\nimport metadata from './block.json';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tinnerBlocks: [\n\t\t\t{\n\t\t\t\tname: 'core/tabs-menu',\n\t\t\t\tinnerBlocks: [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'core/tabs-menu-item',\n\t\t\t\t\t\tattributes: { anchor: 'tab-1-button' },\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'core/tabs-menu-item',\n\t\t\t\t\t\tattributes: { anchor: 'tab-2-button' },\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/tab-panel',\n\t\t\t\tinnerBlocks: [ 1, 2 ].map( ( index ) => ( {\n\t\t\t\t\tname: 'core/tab',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tanchor: `tab-${ index }`,\n\t\t\t\t\t\tlabel: sprintf(\n\t\t\t\t\t\t\t/** translators: %s: tab index number */\n\t\t\t\t\t\t\t__( 'Tab %s' ),\n\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tinnerBlocks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: 'core/paragraph',\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tcontent: __(\n\t\t\t\t\t\t\t\t\t'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t} ) ),\n\t\t\t},\n\t\t],\n\t},\n\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { tabs as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport save from './save';\nimport metadata from './block.json';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tinnerBlocks: [\n\t\t\t{\n\t\t\t\tname: 'core/tab-list',\n\t\t\t\tinnerBlocks: [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'core/tab',\n\t\t\t\t\t\tattributes: { anchor: 'tab-1-button' },\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'core/tab',\n\t\t\t\t\t\tattributes: { anchor: 'tab-2-button' },\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/tab-panels',\n\t\t\t\tinnerBlocks: [ 1, 2 ].map( ( index ) => ( {\n\t\t\t\t\tname: 'core/tab-panel',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tanchor: `tab-${ index }`,\n\t\t\t\t\t\tlabel: sprintf(\n\t\t\t\t\t\t\t/** translators: %s: tab index number */\n\t\t\t\t\t\t\t__( 'Tab %s' ),\n\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tinnerBlocks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: 'core/paragraph',\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tcontent: __(\n\t\t\t\t\t\t\t\t\t'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t} ) ),\n\t\t\t},\n\t\t],\n\t},\n\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
   "mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,QAAQ,YAAY;AAK7B,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,cAAc;AAErB,IAAM,EAAE,KAAK,IAAI;AAIV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACR,aAAa;AAAA,MACZ;AAAA,QACC,MAAM;AAAA,QACN,aAAa;AAAA,UACZ;AAAA,YACC,MAAM;AAAA,YACN,YAAY,EAAE,QAAQ,eAAe;AAAA,UACtC;AAAA,UACA;AAAA,YACC,MAAM;AAAA,YACN,YAAY,EAAE,QAAQ,eAAe;AAAA,UACtC;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,QACC,MAAM;AAAA,QACN,aAAa,CAAE,GAAG,CAAE,EAAE,IAAK,CAAE,WAAa;AAAA,UACzC,MAAM;AAAA,UACN,YAAY;AAAA,YACX,QAAQ,OAAQ,KAAM;AAAA,YACtB,OAAO;AAAA;AAAA,cAEN,GAAI,QAAS;AAAA,cACb;AAAA,YACD;AAAA,UACD;AAAA,UACA,aAAa;AAAA,YACZ;AAAA,cACC,MAAM;AAAA,cACN,YAAY;AAAA,gBACX,SAAS;AAAA,kBACR;AAAA,gBACD;AAAA,cACD;AAAA,YACD;AAAA,UACD;AAAA,QACD,EAAI;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
   "names": []
 }

package/build-module/tabs/use-tab-list-sync.mjs

@@ -0,0 +1,169 @@
+// packages/block-library/src/tabs/use-tab-list-sync.js
+import { createBlock } from "@wordpress/blocks";
+import { store as blockEditorStore } from "@wordpress/block-editor";
+import { useDispatch } from "@wordpress/data";
+import { useEffect, useRef } from "@wordpress/element";
+function useTabListSync({
+  tabPanels,
+  tabs,
+  tabPanelsClientId,
+  tabsListClientId
+}) {
+  const {
+    removeBlock,
+    insertBlocks,
+    replaceInnerBlocks,
+    __unstableMarkNextChangeAsNotPersistent
+  } = useDispatch(blockEditorStore);
+  const prevSyncStateRef = useRef(null);
+  useEffect(() => {
+    if (prevSyncStateRef.current === null) {
+      prevSyncStateRef.current = {
+        tabPanels: [...tabPanels],
+        tabs: [...tabs]
+      };
+      return;
+    }
+    const { tabPanels: prevTabPanels, tabs: prevTabs } = prevSyncStateRef.current;
+    const tabPanelCountChange = tabPanels.length - prevTabPanels.length;
+    const tabCountChange = tabs.length - prevTabs.length;
+    const tabPanelsInserted = tabPanelCountChange > 0;
+    const tabsInserted = tabCountChange > 0;
+    if (tabPanelCountChange === tabCountChange) {
+      if (tabPanelCountChange === 0 && tabPanelsClientId && tabs.some((m, i) => m.clientId !== prevTabs[i]?.clientId)) {
+        const reorderedTabPanels = tabs.map((tab) => {
+          const oldIndex = prevTabs.findIndex(
+            (pm) => pm.clientId === tab.clientId
+          );
+          return oldIndex !== -1 ? tabPanels[oldIndex] : null;
+        }).filter(Boolean);
+        if (reorderedTabPanels.length === tabPanels.length) {
+          __unstableMarkNextChangeAsNotPersistent();
+          replaceInnerBlocks(
+            tabPanelsClientId,
+            reorderedTabPanels,
+            false
+          );
+        }
+      }
+      prevSyncStateRef.current = {
+        tabPanels: [...tabPanels],
+        tabs: [...tabs]
+      };
+      return;
+    }
+    if (tabPanelCountChange > 0 && tabCountChange > 0 || tabPanelCountChange < 0 && tabCountChange < 0) {
+      prevSyncStateRef.current = {
+        tabPanels: [...tabPanels],
+        tabs: [...tabs]
+      };
+      return;
+    }
+    if (tabPanelsInserted && !tabsListClientId) {
+      return;
+    }
+    if (tabsInserted && !tabPanelsClientId) {
+      return;
+    }
+    prevSyncStateRef.current = {
+      tabPanels: [...tabPanels],
+      tabs: [...tabs]
+    };
+    const currentTabPanelIds = new Set(
+      tabPanels.map((t) => t.clientId)
+    );
+    const currentTabIds = new Set(tabs.map((m) => m.clientId));
+    if (tabPanelCountChange < 0) {
+      const removedIndices = prevTabPanels.map(
+        (t, i) => !currentTabPanelIds.has(t.clientId) ? i : -1
+      ).filter((i) => i !== -1);
+      const removedSet = new Set(removedIndices);
+      removedIndices.forEach((removedIndex) => {
+        if (tabs[removedIndex]) {
+          __unstableMarkNextChangeAsNotPersistent();
+          removeBlock(tabs[removedIndex].clientId, false);
+        }
+      });
+      prevSyncStateRef.current.tabs = prevSyncStateRef.current.tabs.filter(
+        (_, i) => !removedSet.has(i)
+      );
+    } else if (tabCountChange < 0) {
+      const removedIndices = prevTabs.map(
+        (m, i) => !currentTabIds.has(m.clientId) ? i : -1
+      ).filter((i) => i !== -1);
+      const removedSet = new Set(removedIndices);
+      removedIndices.forEach((removedIndex) => {
+        if (tabPanels[removedIndex]) {
+          __unstableMarkNextChangeAsNotPersistent();
+          removeBlock(tabPanels[removedIndex].clientId, false);
+        }
+      });
+      prevSyncStateRef.current.tabPanels = prevSyncStateRef.current.tabPanels.filter(
+        (_, i) => !removedSet.has(i)
+      );
+    } else if (tabPanelsInserted) {
+      const prevTabPanelIds = new Set(
+        prevTabPanels.map((t) => t.clientId)
+      );
+      const newTabs = tabPanels.map(
+        (tabPanel, tabPanelIndex) => !prevTabPanelIds.has(tabPanel.clientId) ? {
+          tabPanelIndex,
+          block: createBlock("core/tab", {})
+        } : null
+      ).filter(Boolean);
+      if (newTabs.length > 0) {
+        __unstableMarkNextChangeAsNotPersistent();
+        insertBlocks(
+          newTabs.map(({ block }) => block),
+          newTabs[0].tabPanelIndex,
+          tabsListClientId,
+          false
+        );
+        newTabs.forEach(({ tabPanelIndex, block }) => {
+          prevSyncStateRef.current.tabs.splice(tabPanelIndex, 0, {
+            clientId: block.clientId
+          });
+        });
+      }
+    } else if (tabsInserted) {
+      const prevTabIds = new Set(prevTabs.map((m) => m.clientId));
+      const newTabPanels = tabs.map((tab, tabIndex) => {
+        if (prevTabIds.has(tab.clientId)) {
+          return null;
+        }
+        const label = tabPanels[tabIndex - 1]?.attributes?.label ?? tabPanels[tabIndex]?.attributes?.label ?? "";
+        return {
+          tabIndex,
+          block: createBlock("core/tab-panel", { label })
+        };
+      }).filter(Boolean);
+      if (newTabPanels.length > 0) {
+        __unstableMarkNextChangeAsNotPersistent();
+        insertBlocks(
+          newTabPanels.map(({ block }) => block),
+          newTabPanels[0].tabIndex,
+          tabPanelsClientId,
+          false
+        );
+        newTabPanels.forEach(({ tabIndex, block }) => {
+          prevSyncStateRef.current.tabPanels.splice(tabIndex, 0, {
+            clientId: block.clientId
+          });
+        });
+      }
+    }
+  }, [
+    tabPanels,
+    tabs,
+    removeBlock,
+    insertBlocks,
+    replaceInnerBlocks,
+    __unstableMarkNextChangeAsNotPersistent,
+    tabsListClientId,
+    tabPanelsClientId
+  ]);
+}
+export {
+  useTabListSync as default
+};
+//# sourceMappingURL=use-tab-list-sync.mjs.map

package/build-module/tabs/use-tab-list-sync.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tabs/use-tab-list-sync.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Keep tabs and tab panels in sync when the lists change due to direct\n * user actions (deletion, paste, duplicate, drag-and-drop).\n *\n * Deletion: when one side shrinks, remove the counterpart at the same index.\n * Insertion: when one side grows without the other, insert the missing\n * counterpart at the matching index.\n *\n * When both lists change simultaneously (e.g. the \"Add Tab\" toolbar button,\n * which inserts both at once), no action is needed and the effect exits early.\n *\n * @param {Object}      props\n * @param {Array}       props.tabs              Raw core/tab block objects.\n * @param {Array}       props.tabPanels         Raw core/tab-panel block objects.\n * @param {string|null} props.tabPanelsClientId Client ID of the core/tab-panels block.\n * @param {string|null} props.tabsListClientId  Client ID of the core/tab-list block.\n */\nexport default function useTabListSync( {\n\ttabPanels,\n\ttabs,\n\ttabPanelsClientId,\n\ttabsListClientId,\n} ) {\n\tconst {\n\t\tremoveBlock,\n\t\tinsertBlocks,\n\t\treplaceInnerBlocks,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst prevSyncStateRef = useRef( null );\n\tuseEffect( () => {\n\t\tif ( prevSyncStateRef.current === null ) {\n\t\t\tprevSyncStateRef.current = {\n\t\t\t\ttabPanels: [ ...tabPanels ],\n\t\t\t\ttabs: [ ...tabs ],\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\tconst { tabPanels: prevTabPanels, tabs: prevTabs } =\n\t\t\tprevSyncStateRef.current;\n\n\t\tconst tabPanelCountChange = tabPanels.length - prevTabPanels.length;\n\t\tconst tabCountChange = tabs.length - prevTabs.length;\n\n\t\tconst tabPanelsInserted = tabPanelCountChange > 0;\n\t\tconst tabsInserted = tabCountChange > 0;\n\n\t\t// Both sides changed by the same amount.\n\t\t// Covers: no-op re-renders, \"Add Tab\" toolbar, and toolbar-remove.\n\t\t// Also handles drag-and-drop reordering of tabs.\n\t\tif ( tabPanelCountChange === tabCountChange ) {\n\t\t\t// When lengths are equal but order changed, the user reordered tabs\n\t\t\t// via drag-and-drop. Reorder the tab panel blocks to match.\n\t\t\tif (\n\t\t\t\ttabPanelCountChange === 0 &&\n\t\t\t\ttabPanelsClientId &&\n\t\t\t\ttabs.some( ( m, i ) => m.clientId !== prevTabs[ i ]?.clientId )\n\t\t\t) {\n\t\t\t\tconst reorderedTabPanels = tabs\n\t\t\t\t\t.map( ( tab ) => {\n\t\t\t\t\t\tconst oldIndex = prevTabs.findIndex(\n\t\t\t\t\t\t\t( pm ) => pm.clientId === tab.clientId\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn oldIndex !== -1 ? tabPanels[ oldIndex ] : null;\n\t\t\t\t\t} )\n\t\t\t\t\t.filter( Boolean );\n\t\t\t\tif ( reorderedTabPanels.length === tabPanels.length ) {\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\treplaceInnerBlocks(\n\t\t\t\t\t\ttabPanelsClientId,\n\t\t\t\t\t\treorderedTabPanels,\n\t\t\t\t\t\tfalse\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t\tprevSyncStateRef.current = {\n\t\t\t\ttabPanels: [ ...tabPanels ],\n\t\t\t\ttabs: [ ...tabs ],\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\t// Both sides changed in the same direction but by different amounts.\n\t\t// Bail without making a partial fix.\n\t\tif (\n\t\t\t( tabPanelCountChange > 0 && tabCountChange > 0 ) ||\n\t\t\t( tabPanelCountChange < 0 && tabCountChange < 0 )\n\t\t) {\n\t\t\tprevSyncStateRef.current = {\n\t\t\t\ttabPanels: [ ...tabPanels ],\n\t\t\t\ttabs: [ ...tabs ],\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\t// If the required container block isn't available yet, bail without\n\t\t// updating the snapshot so the next render re-evaluates the same count change.\n\t\tif ( tabPanelsInserted && ! tabsListClientId ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( tabsInserted && ! tabPanelsClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update snapshot to the current state.\n\t\tprevSyncStateRef.current = {\n\t\t\ttabPanels: [ ...tabPanels ],\n\t\t\ttabs: [ ...tabs ],\n\t\t};\n\n\t\tconst currentTabPanelIds = new Set(\n\t\t\ttabPanels.map( ( t ) => t.clientId )\n\t\t);\n\t\tconst currentTabIds = new Set( tabs.map( ( m ) => m.clientId ) );\n\n\t\tif ( tabPanelCountChange < 0 ) {\n\t\t\t// Remove the tab at the same position as each deleted tab panel.\n\t\t\tconst removedIndices = prevTabPanels\n\t\t\t\t.map( ( t, i ) =>\n\t\t\t\t\t! currentTabPanelIds.has( t.clientId ) ? i : -1\n\t\t\t\t)\n\t\t\t\t.filter( ( i ) => i !== -1 );\n\t\t\tconst removedSet = new Set( removedIndices );\n\t\t\tremovedIndices.forEach( ( removedIndex ) => {\n\t\t\t\tif ( tabs[ removedIndex ] ) {\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tremoveBlock( tabs[ removedIndex ].clientId, false );\n\t\t\t\t}\n\t\t\t} );\n\t\t\tprevSyncStateRef.current.tabs =\n\t\t\t\tprevSyncStateRef.current.tabs.filter(\n\t\t\t\t\t( _, i ) => ! removedSet.has( i )\n\t\t\t\t);\n\t\t} else if ( tabCountChange < 0 ) {\n\t\t\t// Remove the tab panel at the same position as each deleted tab.\n\t\t\tconst removedIndices = prevTabs\n\t\t\t\t.map( ( m, i ) =>\n\t\t\t\t\t! currentTabIds.has( m.clientId ) ? i : -1\n\t\t\t\t)\n\t\t\t\t.filter( ( i ) => i !== -1 );\n\t\t\tconst removedSet = new Set( removedIndices );\n\t\t\tremovedIndices.forEach( ( removedIndex ) => {\n\t\t\t\tif ( tabPanels[ removedIndex ] ) {\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tremoveBlock( tabPanels[ removedIndex ].clientId, false );\n\t\t\t\t}\n\t\t\t} );\n\t\t\tprevSyncStateRef.current.tabPanels =\n\t\t\t\tprevSyncStateRef.current.tabPanels.filter(\n\t\t\t\t\t( _, i ) => ! removedSet.has( i )\n\t\t\t\t);\n\t\t} else if ( tabPanelsInserted ) {\n\t\t\t// A tab panel was pasted or duplicated \u2014 insert a matching tab.\n\t\t\tconst prevTabPanelIds = new Set(\n\t\t\t\tprevTabPanels.map( ( t ) => t.clientId )\n\t\t\t);\n\t\t\tconst newTabs = tabPanels\n\t\t\t\t.map( ( tabPanel, tabPanelIndex ) =>\n\t\t\t\t\t! prevTabPanelIds.has( tabPanel.clientId )\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\ttabPanelIndex,\n\t\t\t\t\t\t\t\tblock: createBlock( 'core/tab', {} ),\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: null\n\t\t\t\t)\n\t\t\t\t.filter( Boolean );\n\n\t\t\tif ( newTabs.length > 0 ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tinsertBlocks(\n\t\t\t\t\tnewTabs.map( ( { block } ) => block ),\n\t\t\t\t\tnewTabs[ 0 ].tabPanelIndex,\n\t\t\t\t\ttabsListClientId,\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\tnewTabs.forEach( ( { tabPanelIndex, block } ) => {\n\t\t\t\t\tprevSyncStateRef.current.tabs.splice( tabPanelIndex, 0, {\n\t\t\t\t\t\tclientId: block.clientId,\n\t\t\t\t\t} );\n\t\t\t\t} );\n\t\t\t}\n\t\t} else if ( tabsInserted ) {\n\t\t\t// A tab was pasted or duplicated \u2014 insert a matching tab panels,\n\t\t\t// copying the label from the adjacent tab panel.\n\t\t\tconst prevTabIds = new Set( prevTabs.map( ( m ) => m.clientId ) );\n\t\t\tconst newTabPanels = tabs\n\t\t\t\t.map( ( tab, tabIndex ) => {\n\t\t\t\t\tif ( prevTabIds.has( tab.clientId ) ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\tconst label =\n\t\t\t\t\t\ttabPanels[ tabIndex - 1 ]?.attributes?.label ??\n\t\t\t\t\t\ttabPanels[ tabIndex ]?.attributes?.label ??\n\t\t\t\t\t\t'';\n\t\t\t\t\treturn {\n\t\t\t\t\t\ttabIndex,\n\t\t\t\t\t\tblock: createBlock( 'core/tab-panel', { label } ),\n\t\t\t\t\t};\n\t\t\t\t} )\n\t\t\t\t.filter( Boolean );\n\n\t\t\tif ( newTabPanels.length > 0 ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tinsertBlocks(\n\t\t\t\t\tnewTabPanels.map( ( { block } ) => block ),\n\t\t\t\t\tnewTabPanels[ 0 ].tabIndex,\n\t\t\t\t\ttabPanelsClientId,\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\tnewTabPanels.forEach( ( { tabIndex, block } ) => {\n\t\t\t\t\tprevSyncStateRef.current.tabPanels.splice( tabIndex, 0, {\n\t\t\t\t\t\tclientId: block.clientId,\n\t\t\t\t\t} );\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\t}, [\n\t\ttabPanels,\n\t\ttabs,\n\t\tremoveBlock,\n\t\tinsertBlocks,\n\t\treplaceInnerBlocks,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\ttabsListClientId,\n\t\ttabPanelsClientId,\n\t] );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -123,7 +123,7 @@ function IncludeControl({
       onInputChange: debouncedSearch,
       suggestions,
       onChange: onTermChange,
-      __experimentalShowHowTo: false,
+      help: "",
       ...props
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/terms-query/edit/inspector-controls/include-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { FormTokenField } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,name',\n\tcontext: 'view',\n};\n\nexport default function IncludeControl( {\n\tvalue: include,\n\ttaxonomy,\n\tonChange,\n\t...props\n} ) {\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ value, setValue ] = useState( EMPTY_ARRAY );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\n\tconst { searchResults, searchHasResolved } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! search ) {\n\t\t\t\treturn { searchResults: EMPTY_ARRAY, searchHasResolved: true };\n\t\t\t}\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst selectorArgs = [\n\t\t\t\t'taxonomy',\n\t\t\t\ttaxonomy,\n\t\t\t\t{\n\t\t\t\t\t...BASE_QUERY,\n\t\t\t\t\tsearch,\n\t\t\t\t\torderby: 'name',\n\t\t\t\t\texclude: include,\n\t\t\t\t\tper_page: 20,\n\t\t\t\t},\n\t\t\t];\n\t\t\treturn {\n\t\t\t\tsearchResults: getEntityRecords( ...selectorArgs ),\n\t\t\t\tsearchHasResolved: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\tselectorArgs\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ search, taxonomy, include ]\n\t);\n\n\tconst currentTerms = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! include?.length ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'taxonomy', taxonomy, {\n\t\t\t\t...BASE_QUERY,\n\t\t\t\tinclude,\n\t\t\t\tper_page: include.length,\n\t\t\t} );\n\t\t},\n\t\t[ include, taxonomy ]\n\t);\n\n\t// Update the `value` state only after the selectors are resolved\n\t// to avoid emptying the input when we're changing terms.\n\tuseEffect( () => {\n\t\tif ( ! include?.length ) {\n\t\t\tsetValue( EMPTY_ARRAY );\n\t\t}\n\t\tif ( ! currentTerms?.length ) {\n\t\t\treturn;\n\t\t}\n\t\t// Returns only the existing entity ids. This prevents the component\n\t\t// from crashing in the editor, when non existing ids are provided.\n\t\tconst sanitizedValue = include.reduce( ( accumulator, id ) => {\n\t\t\tconst entity = currentTerms.find( ( term ) => term.id === id );\n\t\t\tif ( entity ) {\n\t\t\t\taccumulator.push( {\n\t\t\t\t\tid,\n\t\t\t\t\tvalue: decodeEntities( entity.name ),\n\t\t\t\t} );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, [] );\n\t\tsetValue( sanitizedValue );\n\t}, [ include, currentTerms ] );\n\n\tconst entitiesInfo = useMemo( () => {\n\t\tif ( ! searchResults?.length ) {\n\t\t\treturn { names: EMPTY_ARRAY, mapByName: {} };\n\t\t}\n\t\tconst names = [];\n\t\tconst mapByName = {};\n\t\tsearchResults.forEach( ( result ) => {\n\t\t\tconst decodedName = decodeEntities( result.name );\n\t\t\tnames.push( decodedName );\n\t\t\tmapByName[ decodedName ] = result;\n\t\t} );\n\t\treturn { names, mapByName };\n\t}, [ searchResults ] );\n\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tsetSuggestions( entitiesInfo.names );\n\t}, [ entitiesInfo.names, searchHasResolved ] );\n\n\tconst getIdByValue = ( entitiesMappedByName, entity ) =>\n\t\tentity?.id || entitiesMappedByName?.[ entity ]?.id;\n\n\tconst onTermChange = ( newValue ) => {\n\t\tconst ids = Array.from(\n\t\t\tnewValue.reduce( ( accumulator, entity ) => {\n\t\t\t\t// Verify that new values point to existing entities.\n\t\t\t\tconst id = getIdByValue( entitiesInfo.mapByName, entity );\n\t\t\t\tif ( id ) {\n\t\t\t\t\taccumulator.add( id );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t}, new Set() )\n\t\t);\n\t\tsetSuggestions( EMPTY_ARRAY );\n\t\tonChange( ids );\n\t};\n\n\treturn (\n\t\t<FormTokenField\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ value }\n\t\t\tonInputChange={ debouncedSearch }\n\t\t\tsuggestions={ suggestions }\n\t\t\tonChange={ onTermChange }\n\t\t\t__experimentalShowHowTo={ false }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { FormTokenField } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,name',\n\tcontext: 'view',\n};\n\nexport default function IncludeControl( {\n\tvalue: include,\n\ttaxonomy,\n\tonChange,\n\t...props\n} ) {\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ value, setValue ] = useState( EMPTY_ARRAY );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\n\tconst { searchResults, searchHasResolved } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! search ) {\n\t\t\t\treturn { searchResults: EMPTY_ARRAY, searchHasResolved: true };\n\t\t\t}\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst selectorArgs = [\n\t\t\t\t'taxonomy',\n\t\t\t\ttaxonomy,\n\t\t\t\t{\n\t\t\t\t\t...BASE_QUERY,\n\t\t\t\t\tsearch,\n\t\t\t\t\torderby: 'name',\n\t\t\t\t\texclude: include,\n\t\t\t\t\tper_page: 20,\n\t\t\t\t},\n\t\t\t];\n\t\t\treturn {\n\t\t\t\tsearchResults: getEntityRecords( ...selectorArgs ),\n\t\t\t\tsearchHasResolved: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\tselectorArgs\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ search, taxonomy, include ]\n\t);\n\n\tconst currentTerms = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! include?.length ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'taxonomy', taxonomy, {\n\t\t\t\t...BASE_QUERY,\n\t\t\t\tinclude,\n\t\t\t\tper_page: include.length,\n\t\t\t} );\n\t\t},\n\t\t[ include, taxonomy ]\n\t);\n\n\t// Update the `value` state only after the selectors are resolved\n\t// to avoid emptying the input when we're changing terms.\n\tuseEffect( () => {\n\t\tif ( ! include?.length ) {\n\t\t\tsetValue( EMPTY_ARRAY );\n\t\t}\n\t\tif ( ! currentTerms?.length ) {\n\t\t\treturn;\n\t\t}\n\t\t// Returns only the existing entity ids. This prevents the component\n\t\t// from crashing in the editor, when non existing ids are provided.\n\t\tconst sanitizedValue = include.reduce( ( accumulator, id ) => {\n\t\t\tconst entity = currentTerms.find( ( term ) => term.id === id );\n\t\t\tif ( entity ) {\n\t\t\t\taccumulator.push( {\n\t\t\t\t\tid,\n\t\t\t\t\tvalue: decodeEntities( entity.name ),\n\t\t\t\t} );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, [] );\n\t\tsetValue( sanitizedValue );\n\t}, [ include, currentTerms ] );\n\n\tconst entitiesInfo = useMemo( () => {\n\t\tif ( ! searchResults?.length ) {\n\t\t\treturn { names: EMPTY_ARRAY, mapByName: {} };\n\t\t}\n\t\tconst names = [];\n\t\tconst mapByName = {};\n\t\tsearchResults.forEach( ( result ) => {\n\t\t\tconst decodedName = decodeEntities( result.name );\n\t\t\tnames.push( decodedName );\n\t\t\tmapByName[ decodedName ] = result;\n\t\t} );\n\t\treturn { names, mapByName };\n\t}, [ searchResults ] );\n\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tsetSuggestions( entitiesInfo.names );\n\t}, [ entitiesInfo.names, searchHasResolved ] );\n\n\tconst getIdByValue = ( entitiesMappedByName, entity ) =>\n\t\tentity?.id || entitiesMappedByName?.[ entity ]?.id;\n\n\tconst onTermChange = ( newValue ) => {\n\t\tconst ids = Array.from(\n\t\t\tnewValue.reduce( ( accumulator, entity ) => {\n\t\t\t\t// Verify that new values point to existing entities.\n\t\t\t\tconst id = getIdByValue( entitiesInfo.mapByName, entity );\n\t\t\t\tif ( id ) {\n\t\t\t\t\taccumulator.add( id );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t}, new Set() )\n\t\t);\n\t\tsetSuggestions( EMPTY_ARRAY );\n\t\tonChange( ids );\n\t};\n\n\treturn (\n\t\t<FormTokenField\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ value }\n\t\t\tonInputChange={ debouncedSearch }\n\t\t\tsuggestions={ suggestions }\n\t\t\tonChange={ onTermChange }\n\t\t\thelp=\"\"\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/video/tracks-editor.mjs

@@ -28,7 +28,7 @@ import { useState, useRef, useEffect } from "@wordpress/element";
 import { getFilename } from "@wordpress/url";
 import { unlock } from "../lock-unlock.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var { Badge } = unlock(componentsPrivateApis);
+var { Badge: WCBadge } = unlock(componentsPrivateApis);
 var ALLOWED_TYPES = ["text/vtt"];
 var DEFAULT_KIND = "subtitles";
 var KIND_OPTIONS = [
@@ -54,7 +54,7 @@ function TrackList({ tracks, onEditPress }) {
         children: [
           /* @__PURE__ */ jsx("span", { children: track.label }),
           /* @__PURE__ */ jsxs(HStack, { justify: "flex-end", children: [
-            track.default && /* @__PURE__ */ jsx(Badge, { children: __("Default") }),
+            track.default && /* @__PURE__ */ jsx(WCBadge, { children: __("Default") }),
             /* @__PURE__ */ jsx(
               Button,
               {