UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 4.04 kB
{ "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. 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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,oBAA4B;AAC5B,0BAGO;AACP,wBAA4C;AAC5C,kBAAuC;AAuEnC;AA5DW,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,yBAAa,oBAAAA,KAAiB;AAElC,QAAM,EAAE,mBAAmB,UAAU,gBAAgB,QAAI;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,oBAAAA,KAAiB;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,uBAAmB,2BAAa,kBAAkB;AAAA,MACvD,WAAO,gBAAI,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,4CAAC,qCAAc,OAAM,SACpB,sDAAC,kCACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,UAAO,gBAAI,SAAU;AAAA;AAAA,EACtB,GACD,GACD;AAEF;", "names": ["blockEditorStore"] }