UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 4.74 kB
{ "version": 3, "sources": ["../../../src/components/block-list-appender/index.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { getDefaultBlockName } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport DefaultBlockAppender from '../default-block-appender';\nimport ButtonBlockAppender from '../button-block-appender';\nimport { store as blockEditorStore } from '../../store';\n\nfunction DefaultAppender( { rootClientId } ) {\n\tconst canInsertDefaultBlock = useSelect( ( select ) =>\n\t\tselect( blockEditorStore ).canInsertBlockType(\n\t\t\tgetDefaultBlockName(),\n\t\t\trootClientId\n\t\t)\n\t);\n\n\tif ( canInsertDefaultBlock ) {\n\t\t// Render the default block appender if the context supports use\n\t\t// of the default appender.\n\t\treturn <DefaultBlockAppender rootClientId={ rootClientId } />;\n\t}\n\n\t// Fallback in case the default block can't be inserted.\n\treturn (\n\t\t<ButtonBlockAppender\n\t\t\trootClientId={ rootClientId }\n\t\t\tclassName=\"block-list-appender__toggle\"\n\t\t/>\n\t);\n}\n\nexport default function BlockListAppender( {\n\trootClientId,\n\tCustomAppender,\n\tclassName,\n\ttagName: TagName = 'div',\n} ) {\n\tconst isDragOver = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockInsertionPoint,\n\t\t\t\tisBlockInsertionPointVisible,\n\t\t\t\tgetBlockCount,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst insertionPoint = getBlockInsertionPoint();\n\t\t\t// Ideally we should also check for `isDragging` but currently it\n\t\t\t// requires a lot more setup. We can revisit this once we refactor\n\t\t\t// the DnD utility hooks.\n\t\t\treturn (\n\t\t\t\tisBlockInsertionPointVisible() &&\n\t\t\t\trootClientId === insertionPoint?.rootClientId &&\n\t\t\t\tgetBlockCount( rootClientId ) === 0\n\t\t\t);\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\treturn (\n\t\t<TagName\n\t\t\t// A `tabIndex` is used on the wrapping `div` element in order to\n\t\t\t// force a focus event to occur when an appender `button` element\n\t\t\t// is clicked. In some browsers (Firefox, Safari), button clicks do\n\t\t\t// not emit a focus event, which could cause this event to propagate\n\t\t\t// unexpectedly. The `tabIndex` ensures that the interaction is\n\t\t\t// captured as a focus, without also adding an extra tab stop.\n\t\t\t//\n\t\t\t// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t\t\ttabIndex={ -1 }\n\t\t\tclassName={ clsx( 'block-list-appender wp-block', className, {\n\t\t\t\t'is-drag-over': isDragOver,\n\t\t\t} ) }\n\t\t\t// Needed in case the whole editor is content editable (for multi\n\t\t\t// selection). It fixes an edge case where ArrowDown and ArrowRight\n\t\t\t// should collapse the selection to the end of that selection and\n\t\t\t// not into the appender.\n\t\t\tcontentEditable={ false }\n\t\t\t// The appender exists to let you add the first Paragraph before\n\t\t\t// any is inserted. To that end, this appender should visually be\n\t\t\t// presented as a block. That means theme CSS should style it as if\n\t\t\t// it were an empty paragraph block. That means a `wp-block` class to\n\t\t\t// ensure the width is correct, and a [data-block] attribute to ensure\n\t\t\t// the correct margin is applied, especially for classic themes which\n\t\t\t// have commonly targeted that attribute for margins.\n\t\t\tdata-block\n\t\t>\n\t\t\t{ CustomAppender ? (\n\t\t\t\t<CustomAppender />\n\t\t\t) : (\n\t\t\t\t<DefaultAppender rootClientId={ rootClientId } />\n\t\t\t) }\n\t\t</TagName>\n\t);\n}\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAA0B;AAC1B,oBAAoC;AAKpC,oCAAiC;AACjC,mCAAgC;AAChC,mBAA0C;AAajC;AAXT,SAAS,gBAAiB,EAAE,aAAa,GAAI;AAC5C,QAAM,4BAAwB;AAAA,IAAW,CAAE,WAC1C,OAAQ,aAAAA,KAAiB,EAAE;AAAA,UAC1B,mCAAoB;AAAA,MACpB;AAAA,IACD;AAAA,EACD;AAEA,MAAK,uBAAwB;AAG5B,WAAO,4CAAC,8BAAAC,SAAA,EAAqB,cAA8B;AAAA,EAC5D;AAGA,SACC;AAAA,IAAC,6BAAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,WAAU;AAAA;AAAA,EACX;AAEF;AAEe,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,UAAU;AACpB,GAAI;AACH,QAAM,iBAAa;AAAA,IAClB,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,aAAAF,KAAiB;AAC7B,YAAM,iBAAiB,uBAAuB;AAI9C,aACC,6BAA6B,KAC7B,iBAAiB,gBAAgB,gBACjC,cAAe,YAAa,MAAM;AAAA,IAEpC;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MASA,UAAW;AAAA,MACX,eAAY,YAAAG,SAAM,gCAAgC,WAAW;AAAA,QAC5D,gBAAgB;AAAA,MACjB,CAAE;AAAA,MAKF,iBAAkB;AAAA,MAQlB,cAAU;AAAA,MAER,2BACD,4CAAC,kBAAe,IAEhB,4CAAC,mBAAgB,cAA8B;AAAA;AAAA,EAEjD;AAEF;", "names": ["blockEditorStore", "DefaultBlockAppender", "ButtonBlockAppender", "clsx"] }