@wordpress/block-editor
Version:
8 lines (7 loc) • 6.03 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/block-breadcrumb/index.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { chevronRightSmall, Icon } from '@wordpress/icons';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockTitle from '../block-title';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport { useBlockElementRef } from '../block-list/use-block-props/use-block-refs';\nimport getEditorRegion from '../../utils/get-editor-region';\n\n/**\n * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.\n *\n * @param {Object} props Component props.\n * @param {string} props.rootLabelText Translated label for the root element of the breadcrumb trail.\n * @return {Element} Block Breadcrumb.\n */\nfunction BlockBreadcrumb( { rootLabelText } ) {\n\tconst { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );\n\tconst { clientId, parents, hasSelection } = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetSelectionStart,\n\t\t\tgetSelectedBlockClientId,\n\t\t\tgetEnabledBlockParents,\n\t\t} = unlock( select( blockEditorStore ) );\n\t\tconst selectedBlockClientId = getSelectedBlockClientId();\n\t\treturn {\n\t\t\tparents: getEnabledBlockParents( selectedBlockClientId ),\n\t\t\tclientId: selectedBlockClientId,\n\t\t\thasSelection: !! getSelectionStart().clientId,\n\t\t};\n\t}, [] );\n\n\t// translators: Default label for the Document in the Block Breadcrumb.\n\tconst rootLabel = rootLabelText || _x( 'Document', 'noun, breadcrumb' );\n\n\t// We don't care about this specific ref, but this is a way\n\t// to get a ref within the editor canvas so we can focus it later.\n\tconst blockRef = useRef();\n\tuseBlockElementRef( clientId, blockRef );\n\n\t/*\n\t * Disable reason: The `list` ARIA role is redundant but\n\t * Safari+VoiceOver won't announce the list otherwise.\n\t */\n\t/* eslint-disable jsx-a11y/no-redundant-roles */\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"block-editor-block-breadcrumb\"\n\t\t\trole=\"list\"\n\t\t\taria-label={ __( 'Block breadcrumb' ) }\n\t\t>\n\t\t\t<li\n\t\t\t\tclassName={\n\t\t\t\t\t! hasSelection\n\t\t\t\t\t\t? 'block-editor-block-breadcrumb__current'\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\taria-current={ ! hasSelection ? 'true' : undefined }\n\t\t\t>\n\t\t\t\t{ hasSelection && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tclassName=\"block-editor-block-breadcrumb__button\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t// Find the block editor wrapper for the selected block\n\t\t\t\t\t\t\tconst blockEditor = blockRef.current?.closest(\n\t\t\t\t\t\t\t\t'.editor-styles-wrapper'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tclearSelectedBlock();\n\n\t\t\t\t\t\t\tgetEditorRegion( blockEditor )?.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ rootLabel }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\t{ ! hasSelection && <span>{ rootLabel }</span> }\n\t\t\t\t{ !! clientId && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ chevronRightSmall }\n\t\t\t\t\t\tclassName=\"block-editor-block-breadcrumb__separator\"\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</li>\n\n\t\t\t{ parents.map( ( parentClientId ) => (\n\t\t\t\t<li key={ parentClientId }>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tclassName=\"block-editor-block-breadcrumb__button\"\n\t\t\t\t\t\tonClick={ () => selectBlock( parentClientId ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockTitle\n\t\t\t\t\t\t\tclientId={ parentClientId }\n\t\t\t\t\t\t\tmaximumLength={ 35 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ chevronRightSmall }\n\t\t\t\t\t\tclassName=\"block-editor-block-breadcrumb__separator\"\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t\t{ !! clientId && (\n\t\t\t\t<li\n\t\t\t\t\tclassName=\"block-editor-block-breadcrumb__current\"\n\t\t\t\t\taria-current=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<BlockTitle clientId={ clientId } maximumLength={ 35 } />\n\t\t\t\t</li>\n\t\t\t) }\n\t\t</ul>\n\t\t/* eslint-enable jsx-a11y/no-redundant-roles */\n\t);\n}\n\nexport default BlockBreadcrumb;\n"],
"mappings": ";AAGA,SAAS,cAAc;AACvB,SAAS,WAAW,mBAAmB;AACvC,SAAS,IAAI,UAAU;AACvB,SAAS,mBAAmB,YAAY;AACxC,SAAS,cAAc;AAKvB,OAAO,gBAAgB;AACvB,SAAS,SAAS,wBAAwB;AAC1C,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AA4CzB,SASE,KATF;AAnCH,SAAS,gBAAiB,EAAE,cAAc,GAAI;AAC7C,QAAM,EAAE,aAAa,mBAAmB,IAAI,YAAa,gBAAiB;AAC1E,QAAM,EAAE,UAAU,SAAS,aAAa,IAAI,UAAW,CAAE,WAAY;AACpE,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACD,IAAI,OAAQ,OAAQ,gBAAiB,CAAE;AACvC,UAAM,wBAAwB,yBAAyB;AACvD,WAAO;AAAA,MACN,SAAS,uBAAwB,qBAAsB;AAAA,MACvD,UAAU;AAAA,MACV,cAAc,CAAC,CAAE,kBAAkB,EAAE;AAAA,IACtC;AAAA,EACD,GAAG,CAAC,CAAE;AAGN,QAAM,YAAY,iBAAiB,GAAI,YAAY,kBAAmB;AAItE,QAAM,WAAW,OAAO;AACxB,qBAAoB,UAAU,QAAS;AAOvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAa,GAAI,kBAAmB;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WACC,CAAE,eACC,2CACA;AAAA,YAEJ,gBAAe,CAAE,eAAe,SAAS;AAAA,YAEvC;AAAA,8BACD;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,SAAU,MAAM;AAEf,0BAAM,cAAc,SAAS,SAAS;AAAA,sBACrC;AAAA,oBACD;AAEA,uCAAmB;AAEnB,oCAAiB,WAAY,GAAG,MAAM;AAAA,kBACvC;AAAA,kBAEE;AAAA;AAAA,cACH;AAAA,cAEC,CAAE,gBAAgB,oBAAC,UAAO,qBAAW;AAAA,cACrC,CAAC,CAAE,YACJ;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACX;AAAA;AAAA;AAAA,QAEF;AAAA,QAEE,QAAQ,IAAK,CAAE,mBAChB,qBAAC,QACA;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAU,MAAM,YAAa,cAAe;AAAA,cAE5C;AAAA,gBAAC;AAAA;AAAA,kBACA,UAAW;AAAA,kBACX,eAAgB;AAAA;AAAA,cACjB;AAAA;AAAA,UACD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,MAAO;AAAA,cACP,WAAU;AAAA;AAAA,UACX;AAAA,aAdS,cAeV,CACC;AAAA,QACA,CAAC,CAAE,YACJ;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,gBAAa;AAAA,YAEb,8BAAC,cAAW,UAAsB,eAAgB,IAAK;AAAA;AAAA,QACxD;AAAA;AAAA;AAAA,EAEF;AAGF;AAEA,IAAO,2BAAQ;",
"names": []
}