@wordpress/block-editor
Version:
8 lines (7 loc) • 7.51 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/block-list/zoom-out-separator.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nexport function ZoomOutSeparator( {\n\tclientId,\n\trootClientId = '',\n\tposition = 'top',\n} ) {\n\tconst [ isDraggedOver, setIsDraggedOver ] = useState( false );\n\tconst {\n\t\tsectionRootClientId,\n\t\tsectionClientIds,\n\t\tinsertionPoint,\n\t\tblockInsertionPointVisible,\n\t\tblockInsertionPoint,\n\t\tblocksBeingDragged,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetInsertionPoint,\n\t\t\tgetBlockOrder,\n\t\t\tgetSectionRootClientId,\n\t\t\tisBlockInsertionPointVisible,\n\t\t\tgetBlockInsertionPoint,\n\t\t\tgetDraggedBlockClientIds,\n\t\t} = unlock( select( blockEditorStore ) );\n\n\t\tconst root = getSectionRootClientId();\n\t\tconst sectionRootClientIds = getBlockOrder( root );\n\t\treturn {\n\t\t\tsectionRootClientId: root,\n\t\t\tsectionClientIds: sectionRootClientIds,\n\t\t\tinsertionPoint: getInsertionPoint(),\n\t\t\tblockInsertionPoint: getBlockInsertionPoint(),\n\t\t\tblockInsertionPointVisible: isBlockInsertionPointVisible(),\n\t\t\tblocksBeingDragged: getDraggedBlockClientIds(),\n\t\t};\n\t}, [] );\n\n\tconst isReducedMotion = useReducedMotion();\n\n\tif ( ! clientId ) {\n\t\treturn;\n\t}\n\n\tlet isVisible = false;\n\n\tconst isSectionBlock =\n\t\trootClientId === sectionRootClientId &&\n\t\tsectionClientIds &&\n\t\tsectionClientIds.includes( clientId );\n\n\tif ( ! isSectionBlock ) {\n\t\treturn null;\n\t}\n\n\tconst hasTopInsertionPoint =\n\t\tinsertionPoint?.index === 0 &&\n\t\tclientId === sectionClientIds[ insertionPoint.index ];\n\tconst hasBottomInsertionPoint =\n\t\tinsertionPoint &&\n\t\tinsertionPoint.hasOwnProperty( 'index' ) &&\n\t\tclientId === sectionClientIds[ insertionPoint.index - 1 ];\n\n\t// We want to show the zoom out separator in either of these conditions:\n\t// 1. If the inserter has an insertion index set\n\t// 2. We are dragging a pattern over an insertion point\n\tif ( position === 'top' ) {\n\t\tisVisible =\n\t\t\thasTopInsertionPoint ||\n\t\t\t( blockInsertionPointVisible &&\n\t\t\t\tblockInsertionPoint.index === 0 &&\n\t\t\t\tclientId === sectionClientIds[ blockInsertionPoint.index ] );\n\t}\n\n\tif ( position === 'bottom' ) {\n\t\tisVisible =\n\t\t\thasBottomInsertionPoint ||\n\t\t\t( blockInsertionPointVisible &&\n\t\t\t\tclientId ===\n\t\t\t\t\tsectionClientIds[ blockInsertionPoint.index - 1 ] );\n\t}\n\n\tconst blockBeingDraggedClientId = blocksBeingDragged[ 0 ];\n\n\tconst isCurrentBlockBeingDragged = blocksBeingDragged.includes( clientId );\n\n\tconst blockBeingDraggedIndex = sectionClientIds.indexOf(\n\t\tblockBeingDraggedClientId\n\t);\n\tconst blockBeingDraggedPreviousSiblingClientId =\n\t\tblockBeingDraggedIndex > 0\n\t\t\t? sectionClientIds[ blockBeingDraggedIndex - 1 ]\n\t\t\t: null;\n\n\tconst isCurrentBlockPreviousSiblingOfBlockBeingDragged =\n\t\tblockBeingDraggedPreviousSiblingClientId === clientId;\n\n\t// The separators are visually top/bottom of the block, but in actual fact\n\t// the \"top\" separator is the \"bottom\" separator of the previous block.\n\t// Therefore, this logic hides the separator if the current block is being dragged\n\t// or if the current block is the previous sibling of the block being dragged.\n\tif (\n\t\tisCurrentBlockBeingDragged ||\n\t\tisCurrentBlockPreviousSiblingOfBlockBeingDragged\n\t) {\n\t\tisVisible = false;\n\t}\n\n\treturn (\n\t\t<AnimatePresence>\n\t\t\t{ isVisible && (\n\t\t\t\t<motion.div\n\t\t\t\t\tinitial={ { height: 0 } }\n\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t// Use a height equal to that of the zoom out frame size.\n\t\t\t\t\t\theight: 'calc(1 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)',\n\t\t\t\t\t} }\n\t\t\t\t\texit={ { height: 0 } }\n\t\t\t\t\ttransition={ {\n\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\tduration: isReducedMotion ? 0 : 0.2,\n\t\t\t\t\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t\t\t\t\t} }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'block-editor-block-list__zoom-out-separator',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-dragged-over': isDraggedOver,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tdata-is-insertion-point=\"true\"\n\t\t\t\t\tonDragOver={ () => setIsDraggedOver( true ) }\n\t\t\t\t\tonDragLeave={ () => setIsDraggedOver( false ) }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\texit={ { opacity: 0, transition: { delay: -0.125 } } }\n\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\tease: 'linear',\n\t\t\t\t\t\t\tduration: 0.1,\n\t\t\t\t\t\t\tdelay: 0.125,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Drop pattern.' ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</AnimatePresence>\n\t);\n}\n"],
"mappings": "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",
"names": []
}