@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 11.4 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/tabs-menu/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\tBlockContextProvider,\n\t__experimentalUseBlockPreview as useBlockPreview,\n\tstore as blockEditorStore,\n\tuseBlockEditContext,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tmemo,\n\tuseMemo,\n\tuseState,\n\tuseEffect,\n\tuseCallback,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';\n\nconst TABS_MENU_ITEM_TEMPLATE = [ [ 'core/tabs-menu-item', {} ] ];\n\n/**\n * Preview component for non-active tab menu items.\n * Uses useBlockPreview to cache the rendering.\n *\n * @param {Object} props Component props.\n * @param {Array} props.blocks The blocks to preview.\n * @param {string} props.blockContextId The context ID for this block.\n * @param {boolean} props.isHidden Whether the preview is hidden.\n * @param {Function} props.setActiveBlockContextId Callback to set the active context ID.\n */\nfunction TabsMenuItemPreview( {\n\tblocks,\n\tblockContextId,\n\tisHidden,\n\tsetActiveBlockContextId,\n} ) {\n\tconst blockPreviewProps = useBlockPreview( { blocks } );\n\n\tconst handleOnClick = () => {\n\t\tsetActiveBlockContextId( blockContextId );\n\t};\n\n\tconst style = {\n\t\tdisplay: isHidden ? 'none' : 'flex',\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...blockPreviewProps }\n\t\t\ttabIndex={ 0 }\n\t\t\trole=\"button\"\n\t\t\tonClick={ handleOnClick }\n\t\t\tonKeyDown={ handleOnClick }\n\t\t\tstyle={ style }\n\t\t/>\n\t);\n}\n\nconst MemoizedTabsMenuItemPreview = memo( TabsMenuItemPreview );\n\n/**\n * The actual editable inner blocks for the active tab item.\n *\n * @param {Object} props Component props.\n * @param {Object} props.wrapperProps Props to pass to the wrapper element.\n * @param {Object} props.layout The layout object to pass to inner blocks.\n */\nfunction TabsMenuItemTemplateBlocks( { wrapperProps = {}, layout } ) {\n\tconst innerBlocksProps = useInnerBlocksProps( wrapperProps, {\n\t\ttemplate: TABS_MENU_ITEM_TEMPLATE,\n\t\ttemplateLock: 'all',\n\t\trenderAppender: false,\n\t\tlayout,\n\t} );\n\treturn innerBlocksProps.children;\n}\n\nfunction Edit( {\n\tcontext,\n\tclientId,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\t// Get the layout from block edit context to pass to inner blocks.\n\t// This ensures the correct orientation is used from the start.\n\tconst { layout } = useBlockEditContext();\n\n\tconst tabsId = context[ 'core/tabs-id' ] || null;\n\tconst tabsList = context[ 'core/tabs-list' ] || [];\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;\n\tconst editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];\n\n\t// Memoize effectiveActiveIndex to ensure it updates when context changes\n\tconst effectiveActiveIndex = useMemo( () => {\n\t\treturn editorActiveTabIndex ?? activeTabIndex;\n\t}, [ editorActiveTabIndex, activeTabIndex ] );\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\t// Track which tab context is \"active\" for editing (shows real inner blocks)\n\tconst [ activeBlockContextId, setActiveBlockContextId ] = useState( null );\n\n\t// Get the inner blocks (the single tabs-menu-item template)\n\tconst { blocks, tabsClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks, getBlockRootClientId } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tblocks: getBlocks( clientId ),\n\t\t\t\ttabsClientId: getBlockRootClientId( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Build block contexts for each tab\n\tconst blockContexts = useMemo( () => {\n\t\treturn tabsList.map( ( tab, index ) => ( {\n\t\t\t'core/tabs-menu-item-index': index,\n\t\t\t'core/tabs-menu-item-id': tab.id || `tab-${ index }`,\n\t\t\t'core/tabs-menu-item-label': tab.label || '',\n\t\t\t'core/tabs-menu-item-clientId': tab.clientId,\n\t\t\t// Pass through parent context\n\t\t\t'core/tabs-id': tabsId,\n\t\t\t'core/tabs-list': tabsList,\n\t\t\t'core/tabs-activeTabIndex': activeTabIndex,\n\t\t\t'core/tabs-editorActiveTabIndex': editorActiveTabIndex,\n\t\t} ) );\n\t}, [ tabsList, tabsId, activeTabIndex, editorActiveTabIndex ] );\n\n\t// Generate a unique ID for each block context\n\tconst getContextId = useCallback( ( blockContext ) => {\n\t\treturn `tab-context-${ blockContext[ 'core/tabs-menu-item-index' ] }`;\n\t}, [] );\n\n\t// Set the first tab as active by default\n\tuseEffect( () => {\n\t\tif ( blockContexts.length > 0 && activeBlockContextId === null ) {\n\t\t\tsetActiveBlockContextId( getContextId( blockContexts[ 0 ] ) );\n\t\t}\n\t}, [ blockContexts, activeBlockContextId, getContextId ] );\n\n\t// Update active context when editorActiveTabIndex changes\n\tuseEffect( () => {\n\t\tif (\n\t\t\tblockContexts.length > 0 &&\n\t\t\teffectiveActiveIndex < blockContexts.length\n\t\t) {\n\t\t\tconst newContextId = getContextId(\n\t\t\t\tblockContexts[ effectiveActiveIndex ]\n\t\t\t);\n\t\t\tsetActiveBlockContextId( ( prevId ) =>\n\t\t\t\tprevId !== newContextId ? newContextId : prevId\n\t\t\t);\n\t\t}\n\t}, [ effectiveActiveIndex, blockContexts, getContextId ] );\n\n\t// Handle tab click to update parent tabs block's editorActiveTabIndex\n\tconst handleTabContextClick = useCallback(\n\t\t( index ) => {\n\t\t\tif ( tabsClientId && index !== effectiveActiveIndex ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: index,\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 blockProps = useBlockProps( {\n\t\tclassName: clsx( layoutClassNames ),\n\t\trole: 'tablist',\n\t} );\n\n\t// If no tabs exist yet, show placeholder\n\tif ( tabsList.length === 0 ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t<span className=\"tabs__tab-label tabs__tab-label--placeholder\">\n\t\t\t\t\t\t{ __( 'Add tabs to display menu' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\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{ blockContexts.map( ( blockContext, index ) => {\n\t\t\t\t\tconst contextId = getContextId( blockContext );\n\t\t\t\t\tconst isVisible = contextId === activeBlockContextId;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<BlockContextProvider\n\t\t\t\t\t\t\tkey={ contextId }\n\t\t\t\t\t\t\tvalue={ blockContext }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isVisible ? (\n\t\t\t\t\t\t\t\t<TabsMenuItemTemplateBlocks\n\t\t\t\t\t\t\t\t\twrapperProps={ {\n\t\t\t\t\t\t\t\t\t\tonClick: () =>\n\t\t\t\t\t\t\t\t\t\t\thandleTabContextClick( index ),\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null }\n\t\t\t\t\t\t\t<MemoizedTabsMenuItemPreview\n\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\tblockContextId={ contextId }\n\t\t\t\t\t\t\t\tsetActiveBlockContextId={ ( id ) => {\n\t\t\t\t\t\t\t\t\tsetActiveBlockContextId( id );\n\t\t\t\t\t\t\t\t\thandleTabContextClick( index );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tisHidden={ isVisible }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</BlockContextProvider>\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": "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",
"names": []
}