UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 7.37 kB
{ "version": 3, "sources": ["../../src/tab/edit.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\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';\nimport slugFromLabel from './slug-from-label';\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( {\n\tattributes,\n\tclientId,\n\tcontext,\n\tisSelected,\n\tsetAttributes,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst focusRef = useRef();\n\n\tconst { anchor, label } = attributes;\n\n\t// Consume tab indices from context\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;\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-panels 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 tabs-menu.\n\t\tif ( isActiveTab ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );\n\n\t// Use a custom anchor, if set. Otherwise fall back to the slug generated from the label text.\n\tconst tabPanelId = useMemo(\n\t\t() => anchor || slugFromLabel( label, blockIndex ),\n\t\t[ anchor, label, blockIndex ]\n\t);\n\tconst tabLabelId = useMemo( () => `${ tabPanelId }--tab`, [ tabPanelId ] );\n\n\tconst blockProps = useBlockProps( {\n\t\thidden: ! isSelectedTab,\n\t\t'aria-labelledby': tabLabelId,\n\t\tid: tabPanelId,\n\t\trole: 'tabpanel',\n\t\ttabIndex: isSelectedTab ? 0 : -1,\n\t\tclassName: clsx( 'wp-block-tab__editor-content', layoutClassNames ),\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\tattributes={ attributes }\n\t\t\t\tsetAttributes={ setAttributes }\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": "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", "names": ["blockEditorStore", "slugFromLabel", "clsx", "Controls"] }