Drag and drop: allow dragging to the beginning and end of a document (#…

…56070) * Try passing in a ref to allow dragging to the top and bottom of the editor canvas * Update naming * Implement in the site editor * Fix gap between post title and top of iframe * Add __unstable prefix in useInnerBlocksProps * Fix typo in comment
WordPress · Nov 17, 2023 · 178ca84 · 178ca84
1 parent 802c7a5
commit 178ca84
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -169,8 +169,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
-		options;
+	const {
+		__unstableDisableLayoutClassNames,
+		__unstableDisableDropZone,
+		__unstableDropZoneElement,
+	} = options;
 	const {
 		clientId,
 		layout = null,
@@ -211,6 +214,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {
+		dropZoneElement: __unstableDropZoneElement,
 		rootClientId: clientId,
 	} );
 

diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -127,7 +127,8 @@ export function getDropTargetPosition(
 
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
- * @property {string} rootClientId The root client id for the block list.
+ * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
+ * @property {string}       rootClientId    The root client id for the block list.
  */
 
 /**
@@ -136,6 +137,7 @@ export function getDropTargetPosition(
  * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
  */
 export default function useBlockDropZone( {
+	dropZoneElement,
 	// An undefined value represents a top-level block. Default to an empty
 	// string for this so that `targetRootClientId` can be easily compared to
 	// values returned by the `getRootBlockClientId` selector, which also uses
@@ -235,6 +237,7 @@ export default function useBlockDropZone( {
 	);
 
 	return useDropZone( {
+		dropZoneElement,
 		isDisabled,
 		onDrop: onBlockDrop,
 		onDragOver( event ) {

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -411,6 +411,13 @@ export default function VisualEditor( { styles } ) {
 										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
 								layout={ blockListLayout }
+								__unstableDropZoneElement={
+									// When iframed, pass in the html element of the iframe to
+									// ensure the drop zone extends to the edges of the iframe.
+									isToBeIframed
+										? ref.current?.parentNode
+										: ref.current
+								}
 							/>
 						</RecursionProvider>
 					</BlockCanvas>

diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -134,6 +134,12 @@ export default function SiteEditorCanvas() {
 													isTemplateTypeNavigation,
 											}
 										) }
+										__unstableDropZoneElement={
+											// Pass in the html element of the iframe to ensure that
+											// the drop zone extends to the very edges of the iframe,
+											// even if the template is shorter than the viewport.
+											contentRef.current?.parentNode
+										}
 										layout={ LAYOUT }
 										renderAppender={ showBlockAppender }
 									/>