@wordpress/block-editor
Version:
8 lines (7 loc) • 12.5 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/block-tools/insertion-point.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseRef,\n\tcreateContext,\n\tuseContext,\n\tuseCallback,\n} from '@wordpress/element';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { useReducedMotion } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\nimport BlockPopoverInbetween from '../block-popover/inbetween';\nimport BlockDropZonePopover from '../block-popover/drop-zone';\nimport { unlock } from '../../lock-unlock';\n\nexport const InsertionPointOpenRef = createContext();\nInsertionPointOpenRef.displayName = 'InsertionPointOpenRefContext';\n\nfunction InbetweenInsertionPointPopover( {\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n\toperation = 'insert',\n\tnearestSide = 'right',\n} ) {\n\tconst { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );\n\tconst openRef = useContext( InsertionPointOpenRef );\n\tconst ref = useRef();\n\tconst {\n\t\torientation,\n\t\tpreviousClientId,\n\t\tnextClientId,\n\t\trootClientId,\n\t\tisInserterShown,\n\t\tisDistractionFree,\n\t\tisZoomOutMode,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetBlockOrder,\n\t\t\tgetBlockListSettings,\n\t\t\tgetBlockInsertionPoint,\n\t\t\tisBlockBeingDragged,\n\t\t\tgetPreviousBlockClientId,\n\t\t\tgetNextBlockClientId,\n\t\t\tgetSettings,\n\t\t\tisZoomOut,\n\t\t} = unlock( select( blockEditorStore ) );\n\t\tconst insertionPoint = getBlockInsertionPoint();\n\t\tconst order = getBlockOrder( insertionPoint.rootClientId );\n\n\t\tif ( ! order.length ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tlet _previousClientId = order[ insertionPoint.index - 1 ];\n\t\tlet _nextClientId = order[ insertionPoint.index ];\n\n\t\twhile ( isBlockBeingDragged( _previousClientId ) ) {\n\t\t\t_previousClientId = getPreviousBlockClientId( _previousClientId );\n\t\t}\n\n\t\twhile ( isBlockBeingDragged( _nextClientId ) ) {\n\t\t\t_nextClientId = getNextBlockClientId( _nextClientId );\n\t\t}\n\n\t\tconst settings = getSettings();\n\n\t\treturn {\n\t\t\tpreviousClientId: _previousClientId,\n\t\t\tnextClientId: _nextClientId,\n\t\t\torientation:\n\t\t\t\tgetBlockListSettings( insertionPoint.rootClientId )\n\t\t\t\t\t?.orientation || 'vertical',\n\t\t\trootClientId: insertionPoint.rootClientId,\n\t\t\tisDistractionFree: settings.isDistractionFree,\n\t\t\tisInserterShown: insertionPoint?.__unstableWithInserter,\n\t\t\tisZoomOutMode: isZoomOut(),\n\t\t};\n\t}, [] );\n\tconst { getBlockEditingMode } = useSelect( blockEditorStore );\n\n\tconst disableMotion = useReducedMotion();\n\n\tfunction onClick( event ) {\n\t\tif (\n\t\t\tevent.target === ref.current &&\n\t\t\tnextClientId &&\n\t\t\tgetBlockEditingMode( nextClientId ) !== 'disabled'\n\t\t) {\n\t\t\tselectBlock( nextClientId, -1 );\n\t\t}\n\t}\n\n\tfunction maybeHideInserterPoint( event ) {\n\t\t// Only hide the inserter if it's triggered on the wrapper,\n\t\t// and the inserter is not open.\n\t\tif ( event.target === ref.current && ! openRef.current ) {\n\t\t\thideInsertionPoint();\n\t\t}\n\t}\n\n\tfunction onFocus( event ) {\n\t\t// Only handle click on the wrapper specifically, and not an event\n\t\t// bubbled from the inserter itself.\n\t\tif ( event.target !== ref.current ) {\n\t\t\topenRef.current = true;\n\t\t}\n\t}\n\n\t// Reset the insertion point reference when the Inserter unmounts,\n\t// avoids stale references when `onSelectOrClose` is not called.\n\t// See: https://github.com/WordPress/gutenberg/issues/65598#issuecomment-3249229264.\n\tconst maybeResetOpenRef = useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node && openRef.current ) {\n\t\t\t\topenRef.current = false;\n\t\t\t}\n\t\t},\n\t\t[ openRef ]\n\t);\n\n\tconst lineVariants = {\n\t\t// Initial position starts from the center and invisible.\n\t\tstart: {\n\t\t\topacity: 0,\n\t\t\tscale: 0,\n\t\t},\n\t\t// The line expands to fill the container. If the inserter is visible it\n\t\t// is delayed so it appears orchestrated.\n\t\trest: {\n\t\t\topacity: 1,\n\t\t\tscale: 1,\n\t\t\ttransition: { delay: isInserterShown ? 0.5 : 0, type: 'tween' },\n\t\t},\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\tscale: 1,\n\t\t\ttransition: { delay: 0.5, type: 'tween' },\n\t\t},\n\t};\n\n\tconst inserterVariants = {\n\t\tstart: {\n\t\t\tscale: disableMotion ? 1 : 0,\n\t\t},\n\t\trest: {\n\t\t\tscale: 1,\n\t\t\ttransition: { delay: 0.4, type: 'tween' },\n\t\t},\n\t};\n\n\tif ( isDistractionFree ) {\n\t\treturn null;\n\t}\n\n\t// Zoom out mode should only show the insertion point for the insert operation.\n\t// Other operations such as \"group\" are when the editor tries to create a row\n\t// block by grouping the block being dragged with the block it's being dropped\n\t// onto.\n\tif ( isZoomOutMode && operation !== 'insert' ) {\n\t\treturn null;\n\t}\n\n\tconst orientationClassname =\n\t\torientation === 'horizontal' || operation === 'group'\n\t\t\t? 'is-horizontal'\n\t\t\t: 'is-vertical';\n\n\tconst className = clsx(\n\t\t'block-editor-block-list__insertion-point',\n\t\torientationClassname\n\t);\n\n\treturn (\n\t\t<BlockPopoverInbetween\n\t\t\tpreviousClientId={ previousClientId }\n\t\t\tnextClientId={ nextClientId }\n\t\t\t__unstablePopoverSlot={ __unstablePopoverSlot }\n\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\toperation={ operation }\n\t\t\tnearestSide={ nearestSide }\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tlayout={ ! disableMotion }\n\t\t\t\tinitial={ disableMotion ? 'rest' : 'start' }\n\t\t\t\tanimate=\"rest\"\n\t\t\t\twhileHover=\"hover\"\n\t\t\t\twhileTap=\"pressed\"\n\t\t\t\texit=\"start\"\n\t\t\t\tref={ ref }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tonFocus={ onFocus }\n\t\t\t\tclassName={ clsx( className, {\n\t\t\t\t\t'is-with-inserter': isInserterShown,\n\t\t\t\t} ) }\n\t\t\t\tonHoverEnd={ maybeHideInserterPoint }\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ lineVariants }\n\t\t\t\t\tclassName=\"block-editor-block-list__insertion-point-indicator\"\n\t\t\t\t\tdata-testid=\"block-list-insertion-point-indicator\"\n\t\t\t\t/>\n\t\t\t\t{ isInserterShown && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tvariants={ inserterVariants }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'block-editor-block-list__insertion-point-inserter'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Inserter\n\t\t\t\t\t\t\tref={ maybeResetOpenRef }\n\t\t\t\t\t\t\tposition=\"bottom center\"\n\t\t\t\t\t\t\tclientId={ nextClientId }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\t__experimentalIsQuick\n\t\t\t\t\t\t\tonToggle={ ( isOpen ) => {\n\t\t\t\t\t\t\t\topenRef.current = isOpen;\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectOrClose={ () => {\n\t\t\t\t\t\t\t\topenRef.current = false;\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</motion.div>\n\t\t</BlockPopoverInbetween>\n\t);\n}\n\nexport default function InsertionPoint( props ) {\n\tconst { insertionPoint, isVisible, isBlockListEmpty } = 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 blockInsertionPoint = getBlockInsertionPoint();\n\t\t\treturn {\n\t\t\t\tinsertionPoint: blockInsertionPoint,\n\t\t\t\tisVisible: isBlockInsertionPointVisible(),\n\t\t\t\tisBlockListEmpty:\n\t\t\t\t\tgetBlockCount( blockInsertionPoint?.rootClientId ) === 0,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tif (\n\t\t! isVisible ||\n\t\t// Don't render the insertion point if the block list is empty.\n\t\t// The insertion point will be represented by the appender instead.\n\t\tisBlockListEmpty\n\t) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Render a popover that overlays the block when the desired operation is to replace it.\n\t * Otherwise, render a popover in between blocks for the indication of inserting between them.\n\t */\n\treturn insertionPoint.operation === 'replace' ? (\n\t\t<BlockDropZonePopover\n\t\t\t// Force remount to trigger the animation.\n\t\t\tkey={ `${ insertionPoint.rootClientId }-${ insertionPoint.index }` }\n\t\t\t{ ...props }\n\t\t/>\n\t) : (\n\t\t<InbetweenInsertionPointPopover\n\t\t\toperation={ insertionPoint.operation }\n\t\t\tnearestSide={ insertionPoint.nearestSide }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAuC;AACvC,qBAKO;AACP,wBAA2C;AAC3C,qBAAiC;AAKjC,sBAAqB;AACrB,mBAA0C;AAC1C,uBAAkC;AAClC,uBAAiC;AACjC,yBAAuB;AAwKpB;AAtKI,IAAM,4BAAwB,8BAAc;AACnD,sBAAsB,cAAc;AAEpC,SAAS,+BAAgC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AACf,GAAI;AACH,QAAM,EAAE,aAAa,mBAAmB,QAAI,yBAAa,aAAAA,KAAiB;AAC1E,QAAM,cAAU,2BAAY,qBAAsB;AAClD,QAAM,UAAM,uBAAO;AACnB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,uBAAW,CAAE,WAAY;AAC5B,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,QAAI,2BAAQ,OAAQ,aAAAA,KAAiB,CAAE;AACvC,UAAM,iBAAiB,uBAAuB;AAC9C,UAAM,QAAQ,cAAe,eAAe,YAAa;AAEzD,QAAK,CAAE,MAAM,QAAS;AACrB,aAAO,CAAC;AAAA,IACT;AAEA,QAAI,oBAAoB,MAAO,eAAe,QAAQ,CAAE;AACxD,QAAI,gBAAgB,MAAO,eAAe,KAAM;AAEhD,WAAQ,oBAAqB,iBAAkB,GAAI;AAClD,0BAAoB,yBAA0B,iBAAkB;AAAA,IACjE;AAEA,WAAQ,oBAAqB,aAAc,GAAI;AAC9C,sBAAgB,qBAAsB,aAAc;AAAA,IACrD;AAEA,UAAM,WAAW,YAAY;AAE7B,WAAO;AAAA,MACN,kBAAkB;AAAA,MAClB,cAAc;AAAA,MACd,aACC,qBAAsB,eAAe,YAAa,GAC/C,eAAe;AAAA,MACnB,cAAc,eAAe;AAAA,MAC7B,mBAAmB,SAAS;AAAA,MAC5B,iBAAiB,gBAAgB;AAAA,MACjC,eAAe,UAAU;AAAA,IAC1B;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,EAAE,oBAAoB,QAAI,uBAAW,aAAAA,KAAiB;AAE5D,QAAM,oBAAgB,iCAAiB;AAEvC,WAAS,QAAS,OAAQ;AACzB,QACC,MAAM,WAAW,IAAI,WACrB,gBACA,oBAAqB,YAAa,MAAM,YACvC;AACD,kBAAa,cAAc,EAAG;AAAA,IAC/B;AAAA,EACD;AAEA,WAAS,uBAAwB,OAAQ;AAGxC,QAAK,MAAM,WAAW,IAAI,WAAW,CAAE,QAAQ,SAAU;AACxD,yBAAmB;AAAA,IACpB;AAAA,EACD;AAEA,WAAS,QAAS,OAAQ;AAGzB,QAAK,MAAM,WAAW,IAAI,SAAU;AACnC,cAAQ,UAAU;AAAA,IACnB;AAAA,EACD;AAKA,QAAM,wBAAoB;AAAA,IACzB,CAAE,SAAU;AACX,UAAK,CAAE,QAAQ,QAAQ,SAAU;AAChC,gBAAQ,UAAU;AAAA,MACnB;AAAA,IACD;AAAA,IACA,CAAE,OAAQ;AAAA,EACX;AAEA,QAAM,eAAe;AAAA;AAAA,IAEpB,OAAO;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,IACR;AAAA;AAAA;AAAA,IAGA,MAAM;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY,EAAE,OAAO,kBAAkB,MAAM,GAAG,MAAM,QAAQ;AAAA,IAC/D;AAAA,IACA,OAAO;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY,EAAE,OAAO,KAAK,MAAM,QAAQ;AAAA,IACzC;AAAA,EACD;AAEA,QAAM,mBAAmB;AAAA,IACxB,OAAO;AAAA,MACN,OAAO,gBAAgB,IAAI;AAAA,IAC5B;AAAA,IACA,MAAM;AAAA,MACL,OAAO;AAAA,MACP,YAAY,EAAE,OAAO,KAAK,MAAM,QAAQ;AAAA,IACzC;AAAA,EACD;AAEA,MAAK,mBAAoB;AACxB,WAAO;AAAA,EACR;AAMA,MAAK,iBAAiB,cAAc,UAAW;AAC9C,WAAO;AAAA,EACR;AAEA,QAAM,uBACL,gBAAgB,gBAAgB,cAAc,UAC3C,kBACA;AAEJ,QAAM,gBAAY,YAAAC;AAAA,IACjB;AAAA,IACA;AAAA,EACD;AAEA,SACC;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,QAAC,kBAAAC,iBAAO;AAAA,QAAP;AAAA,UACA,QAAS,CAAE;AAAA,UACX,SAAU,gBAAgB,SAAS;AAAA,UACnC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL;AAAA,UACA,UAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,eAAY,YAAAF,SAAM,WAAW;AAAA,YAC5B,oBAAoB;AAAA,UACrB,CAAE;AAAA,UACF,YAAa;AAAA,UAEb;AAAA;AAAA,cAAC,kBAAAE,iBAAO;AAAA,cAAP;AAAA,gBACA,UAAW;AAAA,gBACX,WAAU;AAAA,gBACV,eAAY;AAAA;AAAA,YACb;AAAA,YACE,mBACD;AAAA,cAAC,kBAAAA,iBAAO;AAAA,cAAP;AAAA,gBACA,UAAW;AAAA,gBACX,eAAY,YAAAF;AAAA,kBACX;AAAA,gBACD;AAAA,gBAEA;AAAA,kBAAC,gBAAAG;AAAA,kBAAA;AAAA,oBACA,KAAM;AAAA,oBACN,UAAS;AAAA,oBACT,UAAW;AAAA,oBACX;AAAA,oBACA,uBAAqB;AAAA,oBACrB,UAAW,CAAE,WAAY;AACxB,8BAAQ,UAAU;AAAA,oBACnB;AAAA,oBACA,iBAAkB,MAAM;AACvB,8BAAQ,UAAU;AAAA,oBACnB;AAAA;AAAA,gBACD;AAAA;AAAA,YACD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;AAEe,SAAR,eAAiC,OAAQ;AAC/C,QAAM,EAAE,gBAAgB,WAAW,iBAAiB,QAAI;AAAA,IACvD,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,aAAAJ,KAAiB;AAC7B,YAAM,sBAAsB,uBAAuB;AACnD,aAAO;AAAA,QACN,gBAAgB;AAAA,QAChB,WAAW,6BAA6B;AAAA,QACxC,kBACC,cAAe,qBAAqB,YAAa,MAAM;AAAA,MACzD;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,MACC,CAAE;AAAA;AAAA,EAGF,kBACC;AACD,WAAO;AAAA,EACR;AAMA,SAAO,eAAe,cAAc,YACnC;AAAA,IAAC,iBAAAK;AAAA,IAAA;AAAA,MAGE,GAAG;AAAA;AAAA,IADC,GAAI,eAAe,YAAa,IAAK,eAAe,KAAM;AAAA,EAEjE,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,eAAe;AAAA,MAC3B,aAAc,eAAe;AAAA,MAC3B,GAAG;AAAA;AAAA,EACN;AAEF;",
"names": ["blockEditorStore", "clsx", "BlockPopoverInbetween", "motion", "Inserter", "BlockDropZonePopover"]
}