@wordpress/block-library 9.48.0 → 10.0.0

package/build-module/social-link/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/social-link/edit.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tURLPopover,\n\tURLInput,\n\tuseBlockEditingMode,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useState, useRef, createInterpolateElement } from '@wordpress/element';\nimport {\n\tIcon as WCIcon,\n\tButton,\n\tDropdown,\n\tTextControl,\n\tToolbarButton,\n\tExternalLink,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n} from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { keyboardReturn } from '@wordpress/icons';\nimport { store as blocksStore } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { getSocialService } from './social-list';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst SocialLinkURLPopover = ( {\n\turl,\n\tsetAttributes,\n\tsetPopover,\n\tpopoverAnchor,\n\tclientId,\n} ) => {\n\tconst { removeBlock } = useDispatch( blockEditorStore );\n\treturn (\n\t\t<URLPopover\n\t\t\tanchor={ popoverAnchor }\n\t\t\taria-label={ __( 'Edit social link' ) }\n\t\t\tonClose={ () => {\n\t\t\t\tsetPopover( false );\n\t\t\t\tpopoverAnchor?.focus();\n\t\t\t} }\n\t\t>\n\t\t\t<form\n\t\t\t\tclassName=\"block-editor-url-popover__link-editor\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tsetPopover( false );\n\t\t\t\t\tpopoverAnchor?.focus();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"block-editor-url-input\">\n\t\t\t\t\t<URLInput\n\t\t\t\t\t\tvalue={ url }\n\t\t\t\t\t\tonChange={ ( nextURL ) =>\n\t\t\t\t\t\t\tsetAttributes( { url: nextURL } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tplaceholder={ __( 'Enter social link' ) }\n\t\t\t\t\t\tlabel={ __( 'Enter social link' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tdisableSuggestions\n\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t!! url ||\n\t\t\t\t\t\t\t\tevent.defaultPrevented ||\n\t\t\t\t\t\t\t\t! [ BACKSPACE, DELETE ].includes(\n\t\t\t\t\t\t\t\t\tevent.keyCode\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tremoveBlock( clientId );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Apply' ) }\n\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</URLPopover>\n\t);\n};\n\nconst SocialLinkEdit = ( {\n\tattributes,\n\tcontext,\n\tisSelected,\n\tsetAttributes,\n\tclientId,\n\tname,\n} ) => {\n\tconst { url, service, label = '', rel } = attributes;\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst {\n\t\tshowLabels,\n\t\ticonColor,\n\t\ticonColorValue,\n\t\ticonBackgroundColor,\n\t\ticonBackgroundColorValue,\n\t} = context;\n\tconst [ showURLPopover, setPopover ] = useState( false );\n\tconst wrapperClasses = clsx(\n\t\t'wp-social-link',\n\t\t// Manually adding this class for backwards compatibility of CSS when moving the\n\t\t// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883\n\t\t'wp-block-social-link',\n\t\t'wp-social-link-' + service,\n\t\t{\n\t\t\t'wp-social-link__is-incomplete': ! url,\n\t\t\t[ `has-${ iconColor }-color` ]: iconColor,\n\t\t\t[ `has-${ iconBackgroundColor }-background-color` ]:\n\t\t\t\ticonBackgroundColor,\n\t\t}\n\t);\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst isContentOnlyMode = useBlockEditingMode() === 'contentOnly';\n\n\tconst { activeVariation } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getActiveBlockVariation } = select( blocksStore );\n\t\t\treturn {\n\t\t\t\tactiveVariation: getActiveBlockVariation( name, attributes ),\n\t\t\t};\n\t\t},\n\t\t[ name, attributes ]\n\t);\n\n\tconst { icon, label: socialLinkName } = getSocialService( activeVariation );\n\t// The initial label (ie. the link text) is an empty string.\n\t// We want to prevent empty links so that the link text always fallbacks to\n\t// the social name, even when users enter and save an empty string or only\n\t// spaces. The PHP render callback fallbacks to the social name as well.\n\tconst socialLinkText = label.trim() === '' ? socialLinkName : label;\n\n\tconst ref = useRef();\n\tconst blockProps = useBlockProps( {\n\t\tclassName: 'wp-block-social-link-anchor',\n\t\tref: useMergeRefs( [ setPopoverAnchor, ref ] ),\n\t\tonClick: () => setPopover( true ),\n\t\tonKeyDown: ( event ) => {\n\t\t\tif ( event.keyCode === ENTER ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetPopover( true );\n\t\t\t}\n\t\t},\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t{ isContentOnlyMode && showLabels && (\n\t\t\t\t// Add an extra control to modify the label attribute when content only mode is active.\n\t\t\t\t// With content only mode active, the inspector is hidden, so users need another way\n\t\t\t\t// to edit this attribute.\n\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Text' ) }\n\t\t\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tclassName=\"wp-block-social-link__toolbar_content_text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t'Provide a text label or use the default.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { label: value } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tplaceholder={ socialLinkName }\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</BlockControls>\n\t\t\t) }\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( { label: undefined } );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\thasValue={ () => !! label }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( { label: undefined } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t'The text is visible when enabled from the parent Social Icons block.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { label: value } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tplaceholder={ socialLinkName }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Link relation' ) }\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ta: (\n\t\t\t\t\t\t\t\t<ExternalLink href=\"https://developer.mozilla.org/docs/Web/HTML/Attributes/rel\" />\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\tvalue={ rel || '' }\n\t\t\t\t\tonChange={ ( value ) => setAttributes( { rel: value } ) }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t{ /*\n\t\t\t * Because the `<ul>` element has a role=document, the `<li>` is\n\t\t\t * not semantically correct, so adding role=presentation is cleaner.\n\t\t\t * https://github.com/WordPress/gutenberg/pull/64883#issuecomment-2472874551\n\t\t\t */ }\n\t\t\t<li\n\t\t\t\trole=\"presentation\"\n\t\t\t\tclassName={ wrapperClasses }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: iconColorValue,\n\t\t\t\t\tbackgroundColor: iconBackgroundColorValue,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ /*\n\t\t\t\t * Disable reason: The `button` ARIA role is redundant but\n\t\t\t\t * blockProps has a role of `document` automatically applied\n\t\t\t\t * which breaks the semantics of this button since it removes\n\t\t\t\t * the information about the popover.\n\t\t\t\t */\n\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t<button aria-haspopup=\"dialog\" { ...blockProps } role=\"button\">\n\t\t\t\t\t<WCIcon icon={ icon } />\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={ clsx( 'wp-block-social-link-label', {\n\t\t\t\t\t\t\t'screen-reader-text': ! showLabels,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ socialLinkText }\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t{ isSelected && showURLPopover && (\n\t\t\t\t\t<SocialLinkURLPopover\n\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\t\tsetPopover={ setPopover }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</li>\n\t\t</>\n\t);\n};\n\nexport default SocialLinkEdit;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tURLPopover,\n\tURLInput,\n\tuseBlockEditingMode,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useState, useRef, createInterpolateElement } from '@wordpress/element';\nimport {\n\tIcon as WCIcon,\n\tButton,\n\tDropdown,\n\tTextControl,\n\tToolbarButton,\n\tExternalLink,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n} from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { keyboardReturn } from '@wordpress/icons';\nimport { store as blocksStore } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { getSocialService } from './social-list';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst SocialLinkURLPopover = ( {\n\turl,\n\tsetAttributes,\n\tsetPopover,\n\tpopoverAnchor,\n\tclientId,\n} ) => {\n\tconst { removeBlock } = useDispatch( blockEditorStore );\n\treturn (\n\t\t<URLPopover\n\t\t\tanchor={ popoverAnchor }\n\t\t\taria-label={ __( 'Edit social link' ) }\n\t\t\tonClose={ () => {\n\t\t\t\tsetPopover( false );\n\t\t\t\tpopoverAnchor?.focus();\n\t\t\t} }\n\t\t>\n\t\t\t<form\n\t\t\t\tclassName=\"block-editor-url-popover__link-editor\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tsetPopover( false );\n\t\t\t\t\tpopoverAnchor?.focus();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"block-editor-url-input\">\n\t\t\t\t\t<URLInput\n\t\t\t\t\t\tvalue={ url }\n\t\t\t\t\t\tonChange={ ( nextURL ) =>\n\t\t\t\t\t\t\tsetAttributes( { url: nextURL } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tplaceholder={ __( 'Enter social link' ) }\n\t\t\t\t\t\tlabel={ __( 'Enter social link' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tdisableSuggestions\n\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t!! url ||\n\t\t\t\t\t\t\t\tevent.defaultPrevented ||\n\t\t\t\t\t\t\t\t! [ BACKSPACE, DELETE ].includes(\n\t\t\t\t\t\t\t\t\tevent.keyCode\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tremoveBlock( clientId );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Apply' ) }\n\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</URLPopover>\n\t);\n};\n\nconst SocialLinkEdit = ( {\n\tattributes,\n\tcontext,\n\tisSelected,\n\tsetAttributes,\n\tclientId,\n\tname,\n} ) => {\n\tconst { url, service, label = '', rel } = attributes;\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst {\n\t\tshowLabels,\n\t\ticonColor,\n\t\ticonColorValue,\n\t\ticonBackgroundColor,\n\t\ticonBackgroundColorValue,\n\t} = context;\n\tconst [ showURLPopover, setPopover ] = useState( false );\n\tconst wrapperClasses = clsx(\n\t\t'wp-social-link',\n\t\t// Manually adding this class for backwards compatibility of CSS when moving the\n\t\t// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883\n\t\t'wp-block-social-link',\n\t\t'wp-social-link-' + service,\n\t\t{\n\t\t\t'wp-social-link__is-incomplete': ! url,\n\t\t\t[ `has-${ iconColor }-color` ]: iconColor,\n\t\t\t[ `has-${ iconBackgroundColor }-background-color` ]:\n\t\t\t\ticonBackgroundColor,\n\t\t}\n\t);\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst isContentOnlyMode = useBlockEditingMode() === 'contentOnly';\n\n\tconst { activeVariation } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getActiveBlockVariation } = select( blocksStore );\n\t\t\treturn {\n\t\t\t\tactiveVariation: getActiveBlockVariation( name, attributes ),\n\t\t\t};\n\t\t},\n\t\t[ name, attributes ]\n\t);\n\n\tconst { icon, label: socialLinkName } = getSocialService( activeVariation );\n\t// The initial label (ie. the link text) is an empty string.\n\t// We want to prevent empty links so that the link text always fallbacks to\n\t// the social name, even when users enter and save an empty string or only\n\t// spaces. The PHP render callback fallbacks to the social name as well.\n\tconst socialLinkText = label.trim() === '' ? socialLinkName : label;\n\n\tconst ref = useRef();\n\tconst blockProps = useBlockProps( {\n\t\tclassName: 'wp-block-social-link-anchor',\n\t\tref: useMergeRefs( [ setPopoverAnchor, ref ] ),\n\t\tonClick: () => setPopover( true ),\n\t\tonKeyDown: ( event ) => {\n\t\t\tif ( event.keyCode === ENTER ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetPopover( true );\n\t\t\t}\n\t\t},\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t{ isContentOnlyMode && showLabels && (\n\t\t\t\t// Add an extra control to modify the label attribute when content only mode is active.\n\t\t\t\t// With content only mode active, the inspector is hidden, so users need another way\n\t\t\t\t// to edit this attribute.\n\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Text' ) }\n\t\t\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\t\tclassName=\"wp-block-social-link__toolbar_content_text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t'Provide a text label or use the default.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { label: value } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tplaceholder={ socialLinkName }\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</BlockControls>\n\t\t\t) }\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( { label: undefined } );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\thasValue={ () => !! label }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( { label: undefined } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t'The text is visible when enabled from the parent Social Icons block.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { label: value } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tplaceholder={ socialLinkName }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ __( 'Link relation' ) }\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ta: (\n\t\t\t\t\t\t\t\t<ExternalLink href=\"https://developer.mozilla.org/docs/Web/HTML/Attributes/rel\" />\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\tvalue={ rel || '' }\n\t\t\t\t\tonChange={ ( value ) => setAttributes( { rel: value } ) }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t{ /*\n\t\t\t * Because the `<ul>` element has a role=document, the `<li>` is\n\t\t\t * not semantically correct, so adding role=presentation is cleaner.\n\t\t\t * https://github.com/WordPress/gutenberg/pull/64883#issuecomment-2472874551\n\t\t\t */ }\n\t\t\t<li\n\t\t\t\trole=\"presentation\"\n\t\t\t\tclassName={ wrapperClasses }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: iconColorValue,\n\t\t\t\t\tbackgroundColor: iconBackgroundColorValue,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ /*\n\t\t\t\t * Disable reason: The `button` ARIA role is redundant but\n\t\t\t\t * blockProps has a role of `document` automatically applied\n\t\t\t\t * which breaks the semantics of this button since it removes\n\t\t\t\t * the information about the popover.\n\t\t\t\t */\n\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t<button aria-haspopup=\"dialog\" { ...blockProps } role=\"button\">\n\t\t\t\t\t<WCIcon icon={ icon } />\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={ clsx( 'wp-block-social-link-label', {\n\t\t\t\t\t\t\t'screen-reader-text': ! showLabels,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ socialLinkText }\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t{ isSelected && showURLPopover && (\n\t\t\t\t\t<SocialLinkURLPopover\n\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\t\tsetPopover={ setPopover }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</li>\n\t\t</>\n\t);\n};\n\nexport default SocialLinkEdit;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/tab-list/block.json

@@ -8,23 +8,29 @@
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
-	"allowedBlocks": [ "core/tab" ],
 	"usesContext": [ "core/tabs-list" ],
-	"attributes": {},
+	"attributes": {
+		"tabs": {
+			"type": "array",
+			"source": "query",
+			"selector": "button",
+			"query": {
+				"label": {
+					"type": "string",
+					"source": "html"
+				}
+			},
+			"default": []
+		}
+	},
 	"supports": {
 		"html": false,
-		"reusable": false,
 		"visibility": false,
 		"lock": false,
-		"dimensions": {
-			"aspectRatio": false,
-			"height": false,
-			"minHeight": false,
-			"width": false
-		},
 		"color": {
 			"background": true,
 			"text": true,
+			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -38,30 +44,37 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalSkipSerialization": true
 		},
 		"layout": {
 			"default": {
 				"type": "flex",
-				"flexWrap": "nowrap",
-				"orientation": "horizontal"
+				"flexWrap": "nowrap"
 			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": true,
-			"allowJustification": true,
-			"allowOrientation": true
+			"allowVerticalAlignment": false,
+			"allowOrientation": false,
+			"allowWrap": false
 		},
 		"spacing": {
 			"padding": true,
-			"margin": true,
 			"blockGap": true,
+			"__experimentalSkipSerialization": [ "padding" ],
 			"__experimentalDefaultControls": {
 				"padding": true,
-				"margin": true,
 				"blockGap": true
 			}
 		}
 	},
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./editor.css"
+	"selectors": {
+		"border": ".wp-block-tab-list button",
+		"color": {
+			"background": ".wp-block-tab-list button",
+			"text": ".wp-block-tab-list button"
+		},
+		"spacing": {
+			"padding": ".wp-block-tab-list button"
+		}
+	},
+	"style": "wp-block-tab-list"
 }

package/build-module/tab-list/edit.mjs

@@ -1,31 +1,144 @@
 // packages/block-library/src/tab-list/edit.js
+import clsx from "clsx";
+import { __ } from "@wordpress/i18n";
 import {
   useBlockProps,
-  useInnerBlocksProps,
-  store as blockEditorStore
+  store as blockEditorStore,
+  RichText,
+  __experimentalUseBorderProps as useBorderProps,
+  __experimentalUseColorProps as useColorProps,
+  __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles
 } from "@wordpress/block-editor";
-import { useSelect } from "@wordpress/data";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { useCallback, useEffect, useRef } from "@wordpress/element";
 import AddTabToolbarControl from "../tab-panel/add-tab-toolbar-control.mjs";
 import RemoveTabToolbarControl from "../tab-panel/remove-tab-toolbar-control.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TAB_LIST_TEMPLATE = [["core/tab"], ["core/tab"]];
-function Edit({ clientId }) {
-  const tabsClientId = useSelect(
-    (select) => select(blockEditorStore).getBlockRootClientId(clientId),
+var EMPTY_ARRAY = [];
+function Edit({
+  attributes,
+  clientId,
+  context,
+  __unstableLayoutClassNames: layoutClassNames
+}) {
+  const tabsList = context["core/tabs-list"] || EMPTY_ARRAY;
+  const colorProps = useColorProps(attributes);
+  const borderProps = useBorderProps(attributes);
+  const spacingProps = getSpacingClassesAndStyles(attributes);
+  const { tabsClientId, editorActiveTabIndex, activeTabIndex } = useSelect(
+    (select) => {
+      const { getBlockRootClientId, getBlockAttributes } = select(blockEditorStore);
+      const _tabsClientId = getBlockRootClientId(clientId);
+      const tabsAttributes = _tabsClientId ? getBlockAttributes(_tabsClientId) : {};
+      return {
+        tabsClientId: _tabsClientId,
+        editorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,
+        activeTabIndex: tabsAttributes?.activeTabIndex ?? 0
+      };
+    },
     [clientId]
   );
-  const blockProps = useBlockProps();
-  const innerBlocksProps = useInnerBlocksProps(blockProps, {
-    allowedBlocks: ["core/tab"],
-    orientation: "horizontal",
-    template: TAB_LIST_TEMPLATE,
-    templateLock: false,
-    renderAppender: false
+  const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
+  const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } = useDispatch(blockEditorStore);
+  const handleTabClick = useCallback(
+    (tabIndex) => {
+      if (tabsClientId && tabIndex !== effectiveActiveIndex) {
+        __unstableMarkNextChangeAsNotPersistent();
+        updateBlockAttributes(tabsClientId, {
+          editorActiveTabIndex: tabIndex
+        });
+      }
+    },
+    [
+      tabsClientId,
+      effectiveActiveIndex,
+      updateBlockAttributes,
+      __unstableMarkNextChangeAsNotPersistent
+    ]
+  );
+  const handleLabelChange = useCallback(
+    (tabIndex, newLabel) => {
+      const tab = tabsList[tabIndex];
+      if (tab?.clientId) {
+        updateBlockAttributes(tab.clientId, { label: newLabel });
+      }
+    },
+    [tabsList, updateBlockAttributes]
+  );
+  const menuRef = useRef();
+  const prevTabCountRef = useRef(tabsList.length);
+  useEffect(() => {
+    const prevCount = prevTabCountRef.current;
+    prevTabCountRef.current = tabsList.length;
+    if (!menuRef.current || tabsList.length === prevCount) {
+      return;
+    }
+    const focusButtonAt = (index) => {
+      window.requestAnimationFrame(() => {
+        const buttons = menuRef.current?.querySelectorAll("button");
+        const target = buttons?.[index];
+        if (!target) {
+          return;
+        }
+        const richText = target.querySelector("[contenteditable]");
+        if (richText) {
+          richText.focus();
+        } else {
+          target.focus();
+        }
+      });
+    };
+    if (tabsList.length > prevCount) {
+      focusButtonAt(tabsList.length - 1);
+    } else {
+      focusButtonAt(effectiveActiveIndex);
+    }
+  }, [tabsList.length, effectiveActiveIndex]);
+  const blockProps = useBlockProps({
+    role: "tablist",
+    ref: menuRef,
+    // Applied manually since this block has no inner blocks for the layout
+    // support to add its container classes to.
+    className: layoutClassNames
   });
+  const buttonClassName = clsx(colorProps.className, borderProps.className);
+  const buttonStyle = {
+    ...colorProps.style,
+    ...borderProps.style,
+    ...spacingProps.style
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(AddTabToolbarControl, { tabsClientId }),
     /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId }),
-    /* @__PURE__ */ jsx("div", { ...innerBlocksProps })
+    /* @__PURE__ */ jsx("div", { ...blockProps, children: tabsList.map((tab, index) => {
+      const isActive = index === effectiveActiveIndex;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": isActive,
+          className: buttonClassName || void 0,
+          style: buttonStyle,
+          tabIndex: -1,
+          onClick: (event) => {
+            event.preventDefault();
+            handleTabClick(index);
+          },
+          children: /* @__PURE__ */ jsx(
+            RichText,
+            {
+              tagName: "span",
+              withoutInteractiveFormatting: true,
+              placeholder: __("Tab title"),
+              value: tab.label,
+              onChange: (newLabel) => handleLabelChange(index, newLabel)
+            }
+          )
+        },
+        tab.clientId || index
+      );
+    }) })
   ] });
 }
 var edit_default = Edit;

package/build-module/tab-list/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-list/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';\n\nconst TAB_LIST_TEMPLATE = [ [ 'core/tab' ], [ 'core/tab' ] ];\n\nfunction Edit( { clientId } ) {\n\tconst tabsClientId = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlockRootClientId( clientId ),\n\t\t[ clientId ]\n\t);\n\n\tconst blockProps = useBlockProps();\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\tallowedBlocks: [ 'core/tab' ],\n\t\torientation: 'horizontal',\n\t\ttemplate: TAB_LIST_TEMPLATE,\n\t\ttemplateLock: false,\n\t\trenderAppender: false,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<div { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n\nexport default Edit;\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,iBAAiB;AAK1B,OAAO,0BAA0B;AACjC,OAAO,6BAA6B;AAsBlC,mBACC,KADD;AApBF,IAAM,oBAAoB,CAAE,CAAE,UAAW,GAAG,CAAE,UAAW,CAAE;AAE3D,SAAS,KAAM,EAAE,SAAS,GAAI;AAC7B,QAAM,eAAe;AAAA,IACpB,CAAE,WACD,OAAQ,gBAAiB,EAAE,qBAAsB,QAAS;AAAA,IAC3D,CAAE,QAAS;AAAA,EACZ;AAEA,QAAM,aAAa,cAAc;AAEjC,QAAM,mBAAmB,oBAAqB,YAAY;AAAA,IACzD,eAAe,CAAE,UAAW;AAAA,IAC5B,aAAa;AAAA,IACb,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EACjB,CAAE;AAEF,SACC,iCACC;AAAA,wBAAC,wBAAqB,cAA8B;AAAA,IACpD,oBAAC,2BAAwB,cAA8B;AAAA,IACvD,oBAAC,SAAM,GAAG,kBAAmB;AAAA,KAC9B;AAEF;AAEA,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\t__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';\n\nconst EMPTY_ARRAY = [];\n\nfunction Edit( {\n\tattributes,\n\tclientId,\n\tcontext,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;\n\n\tconst colorProps = useColorProps( attributes );\n\tconst borderProps = useBorderProps( attributes );\n\tconst spacingProps = getSpacingClassesAndStyles( attributes );\n\n\tconst { tabsClientId, editorActiveTabIndex, activeTabIndex } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockRootClientId, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\tconst _tabsClientId = getBlockRootClientId( clientId );\n\t\t\tconst tabsAttributes = _tabsClientId\n\t\t\t\t? getBlockAttributes( _tabsClientId )\n\t\t\t\t: {};\n\n\t\t\treturn {\n\t\t\t\ttabsClientId: _tabsClientId,\n\t\t\t\teditorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,\n\t\t\t\tactiveTabIndex: tabsAttributes?.activeTabIndex ?? 0,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;\n\n\tconst { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst handleTabClick = useCallback(\n\t\t( tabIndex ) => {\n\t\t\tif ( tabsClientId && tabIndex !== effectiveActiveIndex ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: tabIndex,\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\ttabsClientId,\n\t\t\teffectiveActiveIndex,\n\t\t\tupdateBlockAttributes,\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t]\n\t);\n\n\tconst handleLabelChange = useCallback(\n\t\t( tabIndex, newLabel ) => {\n\t\t\tconst tab = tabsList[ tabIndex ];\n\t\t\tif ( tab?.clientId ) {\n\t\t\t\tupdateBlockAttributes( tab.clientId, { label: newLabel } );\n\t\t\t}\n\t\t},\n\t\t[ tabsList, updateBlockAttributes ]\n\t);\n\n\tconst menuRef = useRef();\n\tconst prevTabCountRef = useRef( tabsList.length );\n\n\t// When tabs are added or removed, focus the appropriate button.\n\tuseEffect( () => {\n\t\tconst prevCount = prevTabCountRef.current;\n\t\tprevTabCountRef.current = tabsList.length;\n\n\t\tif ( ! menuRef.current || tabsList.length === prevCount ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst focusButtonAt = ( index ) => {\n\t\t\twindow.requestAnimationFrame( () => {\n\t\t\t\tconst buttons = menuRef.current?.querySelectorAll( 'button' );\n\t\t\t\tconst target = buttons?.[ index ];\n\t\t\t\tif ( ! target ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst richText = target.querySelector( '[contenteditable]' );\n\t\t\t\tif ( richText ) {\n\t\t\t\t\trichText.focus();\n\t\t\t\t} else {\n\t\t\t\t\ttarget.focus();\n\t\t\t\t}\n\t\t\t} );\n\t\t};\n\n\t\tif ( tabsList.length > prevCount ) {\n\t\t\t// Tab added — focus the last (newly added) button.\n\t\t\tfocusButtonAt( tabsList.length - 1 );\n\t\t} else {\n\t\t\t// Tab removed — focus the new active button.\n\t\t\tfocusButtonAt( effectiveActiveIndex );\n\t\t}\n\t}, [ tabsList.length, effectiveActiveIndex ] );\n\n\tconst blockProps = useBlockProps( {\n\t\trole: 'tablist',\n\t\tref: menuRef,\n\t\t// Applied manually since this block has no inner blocks for the layout\n\t\t// support to add its container classes to.\n\t\tclassName: layoutClassNames,\n\t} );\n\n\tconst buttonClassName = clsx( colorProps.className, borderProps.className );\n\n\tconst buttonStyle = {\n\t\t...colorProps.style,\n\t\t...borderProps.style,\n\t\t...spacingProps.style,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<div { ...blockProps }>\n\t\t\t\t{ tabsList.map( ( tab, index ) => {\n\t\t\t\t\tconst isActive = index === effectiveActiveIndex;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={ tab.clientId || index }\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-selected={ isActive }\n\t\t\t\t\t\t\tclassName={ buttonClassName || undefined }\n\t\t\t\t\t\t\tstyle={ buttonStyle }\n\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\thandleTabClick( index );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RichText\n\t\t\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\t\t\tplaceholder={ __( 'Tab title' ) }\n\t\t\t\t\t\t\t\tvalue={ tab.label }\n\t\t\t\t\t\t\t\tonChange={ ( newLabel ) =>\n\t\t\t\t\t\t\t\t\thandleLabelChange( index, newLabel )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Edit;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,gCAAgC;AAAA,EAChC,+BAA+B;AAAA,EAC/B,4CAA4C;AAAA,OACtC;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,aAAa,WAAW,cAAc;AAK/C,OAAO,0BAA0B;AACjC,OAAO,6BAA6B;AAyHlC,mBACC,KADD;AAvHF,IAAM,cAAc,CAAC;AAErB,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,4BAA4B;AAC7B,GAAI;AACH,QAAM,WAAW,QAAS,gBAAiB,KAAK;AAEhD,QAAM,aAAa,cAAe,UAAW;AAC7C,QAAM,cAAc,eAAgB,UAAW;AAC/C,QAAM,eAAe,2BAA4B,UAAW;AAE5D,QAAM,EAAE,cAAc,sBAAsB,eAAe,IAAI;AAAA,IAC9D,CAAE,WAAY;AACb,YAAM,EAAE,sBAAsB,mBAAmB,IAChD,OAAQ,gBAAiB;AAE1B,YAAM,gBAAgB,qBAAsB,QAAS;AACrD,YAAM,iBAAiB,gBACpB,mBAAoB,aAAc,IAClC,CAAC;AAEJ,aAAO;AAAA,QACN,cAAc;AAAA,QACd,sBAAsB,gBAAgB;AAAA,QACtC,gBAAgB,gBAAgB,kBAAkB;AAAA,MACnD;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,QAAM,uBAAuB,wBAAwB;AAErD,QAAM,EAAE,yCAAyC,sBAAsB,IACtE,YAAa,gBAAiB;AAE/B,QAAM,iBAAiB;AAAA,IACtB,CAAE,aAAc;AACf,UAAK,gBAAgB,aAAa,sBAAuB;AACxD,gDAAwC;AACxC,8BAAuB,cAAc;AAAA,UACpC,sBAAsB;AAAA,QACvB,CAAE;AAAA,MACH;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,oBAAoB;AAAA,IACzB,CAAE,UAAU,aAAc;AACzB,YAAM,MAAM,SAAU,QAAS;AAC/B,UAAK,KAAK,UAAW;AACpB,8BAAuB,IAAI,UAAU,EAAE,OAAO,SAAS,CAAE;AAAA,MAC1D;AAAA,IACD;AAAA,IACA,CAAE,UAAU,qBAAsB;AAAA,EACnC;AAEA,QAAM,UAAU,OAAO;AACvB,QAAM,kBAAkB,OAAQ,SAAS,MAAO;AAGhD,YAAW,MAAM;AAChB,UAAM,YAAY,gBAAgB;AAClC,oBAAgB,UAAU,SAAS;AAEnC,QAAK,CAAE,QAAQ,WAAW,SAAS,WAAW,WAAY;AACzD;AAAA,IACD;AAEA,UAAM,gBAAgB,CAAE,UAAW;AAClC,aAAO,sBAAuB,MAAM;AACnC,cAAM,UAAU,QAAQ,SAAS,iBAAkB,QAAS;AAC5D,cAAM,SAAS,UAAW,KAAM;AAChC,YAAK,CAAE,QAAS;AACf;AAAA,QACD;AACA,cAAM,WAAW,OAAO,cAAe,mBAAoB;AAC3D,YAAK,UAAW;AACf,mBAAS,MAAM;AAAA,QAChB,OAAO;AACN,iBAAO,MAAM;AAAA,QACd;AAAA,MACD,CAAE;AAAA,IACH;AAEA,QAAK,SAAS,SAAS,WAAY;AAElC,oBAAe,SAAS,SAAS,CAAE;AAAA,IACpC,OAAO;AAEN,oBAAe,oBAAqB;AAAA,IACrC;AAAA,EACD,GAAG,CAAE,SAAS,QAAQ,oBAAqB,CAAE;AAE7C,QAAM,aAAa,cAAe;AAAA,IACjC,MAAM;AAAA,IACN,KAAK;AAAA;AAAA;AAAA,IAGL,WAAW;AAAA,EACZ,CAAE;AAEF,QAAM,kBAAkB,KAAM,WAAW,WAAW,YAAY,SAAU;AAE1E,QAAM,cAAc;AAAA,IACnB,GAAG,WAAW;AAAA,IACd,GAAG,YAAY;AAAA,IACf,GAAG,aAAa;AAAA,EACjB;AAEA,SACC,iCACC;AAAA,wBAAC,wBAAqB,cAA8B;AAAA,IACpD,oBAAC,2BAAwB,cAA8B;AAAA,IACvD,oBAAC,SAAM,GAAG,YACP,mBAAS,IAAK,CAAE,KAAK,UAAW;AACjC,YAAM,WAAW,UAAU;AAC3B,aACC;AAAA,QAAC;AAAA;AAAA,UAEA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,iBAAgB;AAAA,UAChB,WAAY,mBAAmB;AAAA,UAC/B,OAAQ;AAAA,UACR,UAAW;AAAA,UACX,SAAU,CAAE,UAAW;AACtB,kBAAM,eAAe;AACrB,2BAAgB,KAAM;AAAA,UACvB;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,SAAQ;AAAA,cACR,8BAA4B;AAAA,cAC5B,aAAc,GAAI,WAAY;AAAA,cAC9B,OAAQ,IAAI;AAAA,cACZ,UAAW,CAAE,aACZ,kBAAmB,OAAO,QAAS;AAAA;AAAA,UAErC;AAAA;AAAA,QApBM,IAAI,YAAY;AAAA,MAqBvB;AAAA,IAEF,CAAE,GACH;AAAA,KACD;AAEF;AAEA,IAAO,eAAQ;",
   "names": []
 }

package/build-module/tab-list/init.mjs

@@ -0,0 +1,7 @@
+// packages/block-library/src/tab-list/init.js
+import { init } from "./index.mjs";
+var init_default = init();
+export {
+  init_default as default
+};
+//# sourceMappingURL=init.mjs.map

package/build-module/tab-list/init.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-list/init.js"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { init } from './';\n\nexport default init();\n"],
+  "mappings": ";AAGA,SAAS,YAAY;AAErB,IAAO,eAAQ,KAAK;",
+  "names": []
+}

package/build-module/tab-list/save.mjs

@@ -1,12 +1,37 @@
 // packages/block-library/src/tab-list/save.js
-import { useBlockProps, useInnerBlocksProps } from "@wordpress/block-editor";
+import clsx from "clsx";
+import {
+  useBlockProps,
+  __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+  __experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+  __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles
+} from "@wordpress/block-editor";
 import { jsx } from "react/jsx-runtime";
-function save() {
+function save({ attributes }) {
+  const { tabs } = attributes;
   const blockProps = useBlockProps.save({
     role: "tablist"
   });
-  const innerBlocksProps = useInnerBlocksProps.save(blockProps);
-  return /* @__PURE__ */ jsx("div", { ...innerBlocksProps });
+  const colorProps = getColorClassesAndStyles(attributes);
+  const borderProps = getBorderClassesAndStyles(attributes);
+  const spacingProps = getSpacingClassesAndStyles(attributes);
+  const buttonClassName = clsx(colorProps.className, borderProps.className);
+  const buttonStyle = {
+    ...colorProps.style,
+    ...borderProps.style,
+    ...spacingProps.style
+  };
+  return /* @__PURE__ */ jsx("div", { ...blockProps, children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: buttonClassName || void 0,
+      style: buttonStyle,
+      type: "button",
+      role: "tab",
+      children: tab.label
+    },
+    index
+  )) });
 }
 export {
   save as default

package/build-module/tab-list/save.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-list/save.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\n\nexport default function save() {\n\tconst blockProps = useBlockProps.save( {\n\t\trole: 'tablist',\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps.save( blockProps );\n\n\treturn <div { ...innerBlocksProps } />;\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe,2BAA2B;AAS3C;AAPO,SAAR,OAAwB;AAC9B,QAAM,aAAa,cAAc,KAAM;AAAA,IACtC,MAAM;AAAA,EACP,CAAE;AAEF,QAAM,mBAAmB,oBAAoB,KAAM,UAAW;AAE9D,SAAO,oBAAC,SAAM,GAAG,kBAAmB;AACrC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n\t__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,\n} from '@wordpress/block-editor';\n\nexport default function save( { attributes } ) {\n\tconst { tabs } = attributes;\n\tconst blockProps = useBlockProps.save( {\n\t\trole: 'tablist',\n\t} );\n\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\tconst spacingProps = getSpacingClassesAndStyles( attributes );\n\n\tconst buttonClassName = clsx( colorProps.className, borderProps.className );\n\n\tconst buttonStyle = {\n\t\t...colorProps.style,\n\t\t...borderProps.style,\n\t\t...spacingProps.style,\n\t};\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ tabs.map( ( tab, index ) => (\n\t\t\t\t<button\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tclassName={ buttonClassName || undefined }\n\t\t\t\t\tstyle={ buttonStyle }\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t>\n\t\t\t\t\t{ tab.label }\n\t\t\t\t</button>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,EAC3C,0CAA0C;AAAA,EAC1C,4CAA4C;AAAA,OACtC;AAuBH;AArBW,SAAR,KAAuB,EAAE,WAAW,GAAI;AAC9C,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,aAAa,cAAc,KAAM;AAAA,IACtC,MAAM;AAAA,EACP,CAAE;AAEF,QAAM,aAAa,yBAA0B,UAAW;AACxD,QAAM,cAAc,0BAA2B,UAAW;AAC1D,QAAM,eAAe,2BAA4B,UAAW;AAE5D,QAAM,kBAAkB,KAAM,WAAW,WAAW,YAAY,SAAU;AAE1E,QAAM,cAAc;AAAA,IACnB,GAAG,WAAW;AAAA,IACd,GAAG,YAAY;AAAA,IACf,GAAG,aAAa;AAAA,EACjB;AAEA,SACC,oBAAC,SAAM,GAAG,YACP,eAAK,IAAK,CAAE,KAAK,UAClB;AAAA,IAAC;AAAA;AAAA,MAEA,WAAY,mBAAmB;AAAA,MAC/B,OAAQ;AAAA,MACR,MAAK;AAAA,MACL,MAAK;AAAA,MAEH,cAAI;AAAA;AAAA,IANA;AAAA,EAOP,CACC,GACH;AAEF;",
   "names": []
 }

package/build-module/tab-panel/add-tab-toolbar-control.mjs

@@ -9,13 +9,19 @@ import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
 import { useDispatch, useSelect } from "@wordpress/data";
 import { jsx } from "react/jsx-runtime";
 function AddTabToolbarControl({ tabsClientId }) {
-  const { insertBlock } = useDispatch(blockEditorStore);
-  const { tabPanelsClientId, tabsListClientId } = useSelect(
+  const {
+    insertBlock,
+    updateBlockAttributes,
+    selectBlock,
+    __unstableMarkNextChangeAsNotPersistent
+  } = useDispatch(blockEditorStore);
+  const { tabPanelsClientId, tabCount, tabListClientId } = useSelect(
     (select) => {
       if (!tabsClientId) {
         return {
           tabPanelsClientId: null,
-          tabsListClientId: null
+          tabCount: 0,
+          tabListClientId: null
         };
       }
       const { getBlocks } = select(blockEditorStore);
@@ -28,7 +34,8 @@ function AddTabToolbarControl({ tabsClientId }) {
       );
       return {
         tabPanelsClientId: tabPanels?.clientId || null,
-        tabsListClientId: tabList?.clientId || null
+        tabCount: tabPanels?.innerBlocks?.length || 0,
+        tabListClientId: tabList?.clientId || null
       };
     },
     [tabsClientId]
@@ -40,10 +47,14 @@ function AddTabToolbarControl({ tabsClientId }) {
     const newTabPanelBlock = createBlock("core/tab-panel", {
       label: __("Tab")
     });
-    insertBlock(newTabPanelBlock, void 0, tabPanelsClientId);
-    if (tabsListClientId) {
-      const newTabBlock = createBlock("core/tab", {});
-      insertBlock(newTabBlock, void 0, tabsListClientId);
+    insertBlock(newTabPanelBlock, void 0, tabPanelsClientId, false);
+    const newIndex = tabCount;
+    __unstableMarkNextChangeAsNotPersistent();
+    updateBlockAttributes(tabsClientId, {
+      editorActiveTabIndex: newIndex
+    });
+    if (tabListClientId) {
+      selectBlock(tabListClientId);
     }
   };
   return /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(

package/build-module/tab-panel/add-tab-toolbar-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-panel/add-tab-toolbar-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { createBlock } from '@wordpress/blocks';\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Add tab\" button in the block toolbar for the tabs block.\n * Inserts a new core/tab-panel into the tab-panels and a new core/tab\n * into the tab-list, keeping both in sync.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function AddTabToolbarControl( { tabsClientId } ) {\n\tconst { insertBlock } = useDispatch( blockEditorStore );\n\n\tconst { tabPanelsClientId, tabsListClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\ttabPanelsClientId: null,\n\t\t\t\t\ttabsListClientId: null,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\tconst tabPanels = 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\t\t\treturn {\n\t\t\t\ttabPanelsClientId: tabPanels?.clientId || null,\n\t\t\t\ttabsListClientId: tabList?.clientId || null,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst addTab = () => {\n\t\tif ( ! tabPanelsClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newTabPanelBlock = createBlock( 'core/tab-panel', {\n\t\t\tlabel: __( 'Tab' ),\n\t\t} );\n\t\tinsertBlock( newTabPanelBlock, undefined, tabPanelsClientId );\n\n\t\t// Insert a corresponding tab into the tab-list.\n\t\tif ( tabsListClientId ) {\n\t\t\tconst newTabBlock = createBlock( 'core/tab', {} );\n\t\t\tinsertBlock( newTabBlock, undefined, tabsListClientId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tonClick={ addTab }\n\t\t\t\t\ttext={ __( 'Add tab' ) }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,aAAa,iBAAiB;AA0DnC;AA/CW,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM,EAAE,YAAY,IAAI,YAAa,gBAAiB;AAEtD,QAAM,EAAE,mBAAmB,iBAAiB,IAAI;AAAA,IAC/C,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,mBAAmB;AAAA,UACnB,kBAAkB;AAAA,QACnB;AAAA,MACD;AACA,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,YAAa;AAC5C,YAAM,YAAY,YAAY;AAAA,QAC7B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,UAAU,YAAY;AAAA,QAC3B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,aAAO;AAAA,QACN,mBAAmB,WAAW,YAAY;AAAA,QAC1C,kBAAkB,SAAS,YAAY;AAAA,MACxC;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,SAAS,MAAM;AACpB,QAAK,CAAE,mBAAoB;AAC1B;AAAA,IACD;AAEA,UAAM,mBAAmB,YAAa,kBAAkB;AAAA,MACvD,OAAO,GAAI,KAAM;AAAA,IAClB,CAAE;AACF,gBAAa,kBAAkB,QAAW,iBAAkB;AAG5D,QAAK,kBAAmB;AACvB,YAAM,cAAc,YAAa,YAAY,CAAC,CAAE;AAChD,kBAAa,aAAa,QAAW,gBAAiB;AAAA,IACvD;AAAA,EACD;AAEA,SACC,oBAAC,iBAAc,OAAM,SACpB,8BAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,MAAO,GAAI,SAAU;AAAA;AAAA,EACtB,GACD,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { createBlock } from '@wordpress/blocks';\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Add tab\" button in the block toolbar for the tabs block.\n * Inserts a new core/tab-panel into the tab-panels. The tab-list items\n * attribute is kept in sync automatically via useTabListItemsSync.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function AddTabToolbarControl( { tabsClientId } ) {\n\tconst {\n\t\tinsertBlock,\n\t\tupdateBlockAttributes,\n\t\tselectBlock,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst { tabPanelsClientId, tabCount, tabListClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\ttabPanelsClientId: null,\n\t\t\t\t\ttabCount: 0,\n\t\t\t\t\ttabListClientId: null,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\tconst tabPanels = 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\t\t\treturn {\n\t\t\t\ttabPanelsClientId: tabPanels?.clientId || null,\n\t\t\t\ttabCount: tabPanels?.innerBlocks?.length || 0,\n\t\t\t\ttabListClientId: tabList?.clientId || null,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst addTab = () => {\n\t\tif ( ! tabPanelsClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newTabPanelBlock = createBlock( 'core/tab-panel', {\n\t\t\tlabel: __( 'Tab' ),\n\t\t} );\n\t\tinsertBlock( newTabPanelBlock, undefined, tabPanelsClientId, false );\n\n\t\t// Switch editor active tab to the new tab.\n\t\tconst newIndex = tabCount;\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\teditorActiveTabIndex: newIndex,\n\t\t} );\n\n\t\t// Select the tab-list block so focus stays in the menu area.\n\t\tif ( tabListClientId ) {\n\t\t\tselectBlock( tabListClientId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tonClick={ addTab }\n\t\t\t\t\ttext={ __( 'Add tab' ) }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,aAAa,iBAAiB;AAuEnC;AA5DW,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,YAAa,gBAAiB;AAElC,QAAM,EAAE,mBAAmB,UAAU,gBAAgB,IAAI;AAAA,IACxD,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,mBAAmB;AAAA,UACnB,UAAU;AAAA,UACV,iBAAiB;AAAA,QAClB;AAAA,MACD;AACA,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,YAAa;AAC5C,YAAM,YAAY,YAAY;AAAA,QAC7B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,UAAU,YAAY;AAAA,QAC3B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,aAAO;AAAA,QACN,mBAAmB,WAAW,YAAY;AAAA,QAC1C,UAAU,WAAW,aAAa,UAAU;AAAA,QAC5C,iBAAiB,SAAS,YAAY;AAAA,MACvC;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,SAAS,MAAM;AACpB,QAAK,CAAE,mBAAoB;AAC1B;AAAA,IACD;AAEA,UAAM,mBAAmB,YAAa,kBAAkB;AAAA,MACvD,OAAO,GAAI,KAAM;AAAA,IAClB,CAAE;AACF,gBAAa,kBAAkB,QAAW,mBAAmB,KAAM;AAGnE,UAAM,WAAW;AACjB,4CAAwC;AACxC,0BAAuB,cAAc;AAAA,MACpC,sBAAsB;AAAA,IACvB,CAAE;AAGF,QAAK,iBAAkB;AACtB,kBAAa,eAAgB;AAAA,IAC9B;AAAA,EACD;AAEA,SACC,oBAAC,iBAAc,OAAM,SACpB,8BAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,MAAO,GAAI,SAAU;AAAA;AAAA,EACtB,GACD,GACD;AAEF;",
   "names": []
 }

package/build-module/tab-panel/block.json

@@ -22,7 +22,6 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
-		"reusable": false,
 		"color": {
 			"background": true,
 			"text": true,
@@ -34,8 +33,7 @@
 		"layout": true,
 		"spacing": {
 			"blockGap": true,
-			"padding": true,
-			"margin": false
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
@@ -45,12 +43,10 @@
 				"__experimentalFontFamily": true
 			}
 		},
-		"renaming": true,
 		"visibility": false
 	},
 	"providesContext": {
 		"core/tab-label": "label"
 	},
-	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css"
+	"style": "wp-block-tab-panel"
 }

package/build-module/tab-panel/edit.mjs

@@ -6,7 +6,7 @@ import {
   store as blockEditorStore
 } from "@wordpress/block-editor";
 import { useSelect, useDispatch } from "@wordpress/data";
-import { useMemo, useRef, useEffect } from "@wordpress/element";
+import { useMemo, useEffect } from "@wordpress/element";
 import Controls from "./controls.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TEMPLATE = [
@@ -17,19 +17,10 @@ var TEMPLATE = [
     }
   ]
 ];
-var { cancelAnimationFrame } = window;
 function Edit({ clientId, context, isSelected }) {
-  const focusRef = useRef();
   const activeTabIndex = context["core/tabs-activeTabIndex"];
   const editorActiveTabIndex = context["core/tabs-editorActiveTabIndex"];
   const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
-  useEffect(() => {
-    return () => {
-      if (focusRef.current) {
-        cancelAnimationFrame(focusRef.current);
-      }
-    };
-  }, []);
   const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
     (select) => {
       const {

package/build-module/tab-panel/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-panel/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst TEMPLATE = [\n\t[\n\t\t'core/paragraph',\n\t\t{\n\t\t\tplaceholder: __( 'Type / to choose a block' ),\n\t\t},\n\t],\n];\n\nconst { cancelAnimationFrame } = window;\n\nexport default function Edit( { clientId, context, isSelected } ) {\n\tconst focusRef = useRef();\n\n\t// Consume tab indices from context\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ];\n\tconst editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];\n\tconst effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;\n\n\t// Clean up animation frames on unmount.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( focusRef.current ) {\n\t\t\t\tcancelAnimationFrame( focusRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockIndex,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\t// Get the tab-panel parent first\n\t\t\tconst tabPanelsClientId = getBlockRootClientId( clientId );\n\t\t\t// Then get the tabs parent\n\t\t\tconst _tabsClientId = getBlockRootClientId( tabPanelsClientId );\n\n\t\t\t// Get data about this instance of core/tab.\n\t\t\tconst _blockIndex = getBlockIndex( clientId );\n\t\t\tconst _hasInnerBlocksSelected = hasSelectedInnerBlock(\n\t\t\t\tclientId,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tblockIndex: _blockIndex,\n\t\t\t\thasInnerBlocksSelected: _hasInnerBlocksSelected,\n\t\t\t\ttabsClientId: _tabsClientId,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Sync editorActiveTabIndex when this tab is selected directly\n\tuseEffect( () => {\n\t\t// Only update if this tab is selected and not already the active index\n\t\tconst isTabSelected = isSelected || hasInnerBlocksSelected;\n\t\tif (\n\t\t\tisTabSelected &&\n\t\t\ttabsClientId &&\n\t\t\teffectiveActiveIndex !== blockIndex\n\t\t) {\n\t\t\t// Mark as non-persistent so it doesn't add to undo history\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\teditorActiveTabIndex: blockIndex,\n\t\t\t} );\n\t\t}\n\t}, [\n\t\tisSelected,\n\t\thasInnerBlocksSelected,\n\t\ttabsClientId,\n\t\teffectiveActiveIndex,\n\t\tblockIndex,\n\t\tupdateBlockAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t] );\n\n\t// Determine if this is the currently active tab (for editor visibility)\n\tconst isActiveTab = effectiveActiveIndex === blockIndex;\n\n\t// Determine if this is the default tab (for the \"Default Tab\" toggle in controls)\n\tconst isDefaultTab = activeTabIndex === blockIndex;\n\n\t/**\n\t * This hook determines if the current tab panel should be visible.\n\t * This is true if it is the editor active tab, or if it is selected directly.\n\t */\n\tconst isSelectedTab = useMemo( () => {\n\t\t// Show if this tab is directly selected or has selected inner blocks\n\t\tif ( isSelected || hasInnerBlocksSelected ) {\n\t\t\treturn true;\n\t\t}\n\t\t// Always show the active tab (at effectiveActiveIndex) regardless of other selection state.\n\t\t// This ensures the tab panel remains visible when editing labels in tab-list.\n\t\tif ( isActiveTab ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );\n\n\tconst blockProps = useBlockProps( {\n\t\thidden: ! isSelectedTab,\n\t\ttabIndex: isSelectedTab ? 0 : -1,\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\n\treturn (\n\t\t<section { ...innerBlocksProps }>\n\t\t\t<Controls\n\t\t\t\ttabsClientId={ tabsClientId }\n\t\t\t\tblockIndex={ blockIndex }\n\t\t\t\tisDefaultTab={ isDefaultTab }\n\t\t\t/>\n\t\t\t{ isSelectedTab && innerBlocksProps.children }\n\t\t</section>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,SAAS,QAAQ,iBAAiB;AAK3C,OAAO,cAAc;AAwHnB,SACC,KADD;AAtHF,IAAM,WAAW;AAAA,EAChB;AAAA,IACC;AAAA,IACA;AAAA,MACC,aAAa,GAAI,0BAA2B;AAAA,IAC7C;AAAA,EACD;AACD;AAEA,IAAM,EAAE,qBAAqB,IAAI;AAElB,SAAR,KAAuB,EAAE,UAAU,SAAS,WAAW,GAAI;AACjE,QAAM,WAAW,OAAO;AAGxB,QAAM,iBAAiB,QAAS,0BAA2B;AAC3D,QAAM,uBAAuB,QAAS,gCAAiC;AACvE,QAAM,uBAAuB,wBAAwB;AAGrD,YAAW,MAAM;AAChB,WAAO,MAAM;AACZ,UAAK,SAAS,SAAU;AACvB,6BAAsB,SAAS,OAAQ;AAAA,MACxC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,YAAY,wBAAwB,aAAa,IAAI;AAAA,IAC5D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAG7B,YAAM,oBAAoB,qBAAsB,QAAS;AAEzD,YAAM,gBAAgB,qBAAsB,iBAAkB;AAG9D,YAAM,cAAc,cAAe,QAAS;AAC5C,YAAM,0BAA0B;AAAA,QAC/B;AAAA,QACA;AAAA,MACD;AAEA,aAAO;AAAA,QACN,YAAY;AAAA,QACZ,wBAAwB;AAAA,QACxB,cAAc;AAAA,MACf;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,QAAM,EAAE,uBAAuB,wCAAwC,IACtE,YAAa,gBAAiB;AAG/B,YAAW,MAAM;AAEhB,UAAM,gBAAgB,cAAc;AACpC,QACC,iBACA,gBACA,yBAAyB,YACxB;AAED,8CAAwC;AACxC,4BAAuB,cAAc;AAAA,QACpC,sBAAsB;AAAA,MACvB,CAAE;AAAA,IACH;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAGF,QAAM,cAAc,yBAAyB;AAG7C,QAAM,eAAe,mBAAmB;AAMxC,QAAM,gBAAgB,QAAS,MAAM;AAEpC,QAAK,cAAc,wBAAyB;AAC3C,aAAO;AAAA,IACR;AAGA,QAAK,aAAc;AAClB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,EACR,GAAG,CAAE,YAAY,wBAAwB,WAAY,CAAE;AAEvD,QAAM,aAAa,cAAe;AAAA,IACjC,QAAQ,CAAE;AAAA,IACV,UAAU,gBAAgB,IAAI;AAAA,EAC/B,CAAE;AAEF,QAAM,mBAAmB,oBAAqB,YAAY;AAAA,IACzD,UAAU;AAAA,EACX,CAAE;AAEF,SACC,qBAAC,aAAU,GAAG,kBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACE,iBAAiB,iBAAiB;AAAA,KACrC;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst TEMPLATE = [\n\t[\n\t\t'core/paragraph',\n\t\t{\n\t\t\tplaceholder: __( 'Type / to choose a block' ),\n\t\t},\n\t],\n];\n\nexport default function Edit( { clientId, context, isSelected } ) {\n\t// Consume tab indices from context\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ];\n\tconst editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];\n\tconst effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;\n\n\tconst { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockIndex,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\t// Get the tab-panel parent first\n\t\t\tconst tabPanelsClientId = getBlockRootClientId( clientId );\n\t\t\t// Then get the tabs parent\n\t\t\tconst _tabsClientId = getBlockRootClientId( tabPanelsClientId );\n\n\t\t\t// Get data about this instance of core/tab.\n\t\t\tconst _blockIndex = getBlockIndex( clientId );\n\t\t\tconst _hasInnerBlocksSelected = hasSelectedInnerBlock(\n\t\t\t\tclientId,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tblockIndex: _blockIndex,\n\t\t\t\thasInnerBlocksSelected: _hasInnerBlocksSelected,\n\t\t\t\ttabsClientId: _tabsClientId,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Sync editorActiveTabIndex when this tab is selected directly\n\tuseEffect( () => {\n\t\t// Only update if this tab is selected and not already the active index\n\t\tconst isTabSelected = isSelected || hasInnerBlocksSelected;\n\t\tif (\n\t\t\tisTabSelected &&\n\t\t\ttabsClientId &&\n\t\t\teffectiveActiveIndex !== blockIndex\n\t\t) {\n\t\t\t// Mark as non-persistent so it doesn't add to undo history\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\teditorActiveTabIndex: blockIndex,\n\t\t\t} );\n\t\t}\n\t}, [\n\t\tisSelected,\n\t\thasInnerBlocksSelected,\n\t\ttabsClientId,\n\t\teffectiveActiveIndex,\n\t\tblockIndex,\n\t\tupdateBlockAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t] );\n\n\t// Determine if this is the currently active tab (for editor visibility)\n\tconst isActiveTab = effectiveActiveIndex === blockIndex;\n\n\t// Determine if this is the default tab (for the \"Default Tab\" toggle in controls)\n\tconst isDefaultTab = activeTabIndex === blockIndex;\n\n\t/**\n\t * This hook determines if the current tab panel should be visible.\n\t * This is true if it is the editor active tab, or if it is selected directly.\n\t */\n\tconst isSelectedTab = useMemo( () => {\n\t\t// Show if this tab is directly selected or has selected inner blocks\n\t\tif ( isSelected || hasInnerBlocksSelected ) {\n\t\t\treturn true;\n\t\t}\n\t\t// Always show the active tab (at effectiveActiveIndex) regardless of other selection state.\n\t\t// This ensures the tab panel remains visible when editing labels in tab-list.\n\t\tif ( isActiveTab ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );\n\n\tconst blockProps = useBlockProps( {\n\t\thidden: ! isSelectedTab,\n\t\ttabIndex: isSelectedTab ? 0 : -1,\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\n\treturn (\n\t\t<section { ...innerBlocksProps }>\n\t\t\t<Controls\n\t\t\t\ttabsClientId={ tabsClientId }\n\t\t\t\tblockIndex={ blockIndex }\n\t\t\t\tisDefaultTab={ isDefaultTab }\n\t\t\t/>\n\t\t\t{ isSelectedTab && innerBlocksProps.children }\n\t\t</section>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,SAAS,iBAAiB;AAKnC,OAAO,cAAc;AA2GnB,SACC,KADD;AAzGF,IAAM,WAAW;AAAA,EAChB;AAAA,IACC;AAAA,IACA;AAAA,MACC,aAAa,GAAI,0BAA2B;AAAA,IAC7C;AAAA,EACD;AACD;AAEe,SAAR,KAAuB,EAAE,UAAU,SAAS,WAAW,GAAI;AAEjE,QAAM,iBAAiB,QAAS,0BAA2B;AAC3D,QAAM,uBAAuB,QAAS,gCAAiC;AACvE,QAAM,uBAAuB,wBAAwB;AAErD,QAAM,EAAE,YAAY,wBAAwB,aAAa,IAAI;AAAA,IAC5D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAG7B,YAAM,oBAAoB,qBAAsB,QAAS;AAEzD,YAAM,gBAAgB,qBAAsB,iBAAkB;AAG9D,YAAM,cAAc,cAAe,QAAS;AAC5C,YAAM,0BAA0B;AAAA,QAC/B;AAAA,QACA;AAAA,MACD;AAEA,aAAO;AAAA,QACN,YAAY;AAAA,QACZ,wBAAwB;AAAA,QACxB,cAAc;AAAA,MACf;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,QAAM,EAAE,uBAAuB,wCAAwC,IACtE,YAAa,gBAAiB;AAG/B,YAAW,MAAM;AAEhB,UAAM,gBAAgB,cAAc;AACpC,QACC,iBACA,gBACA,yBAAyB,YACxB;AAED,8CAAwC;AACxC,4BAAuB,cAAc;AAAA,QACpC,sBAAsB;AAAA,MACvB,CAAE;AAAA,IACH;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAGF,QAAM,cAAc,yBAAyB;AAG7C,QAAM,eAAe,mBAAmB;AAMxC,QAAM,gBAAgB,QAAS,MAAM;AAEpC,QAAK,cAAc,wBAAyB;AAC3C,aAAO;AAAA,IACR;AAGA,QAAK,aAAc;AAClB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,EACR,GAAG,CAAE,YAAY,wBAAwB,WAAY,CAAE;AAEvD,QAAM,aAAa,cAAe;AAAA,IACjC,QAAQ,CAAE;AAAA,IACV,UAAU,gBAAgB,IAAI;AAAA,EAC/B,CAAE;AAEF,QAAM,mBAAmB,oBAAqB,YAAY;AAAA,IACzD,UAAU;AAAA,EACX,CAAE;AAEF,SACC,qBAAC,aAAU,GAAG,kBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACE,iBAAiB,iBAAiB;AAAA,KACrC;AAEF;",
   "names": []
 }