prep build 11/15

packages/block-editor/src/components/block-lock/modal.js

@@ -24,7 +24,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 // Entity based blocks which allow edit locking
-const ALLOWS_EDIT_LOCKING = [ 'core/block', 'core/navigation' ];
+const ALLOWS_EDIT_LOCKING = [ 'core/navigation' ];
 
 function getTemplateLockValue( lock ) {
 	// Prevents all operations.

packages/block-editor/src/components/block-mover/README.md

@@ -1,12 +1,10 @@
-# Block mover
+# BlockMover
 
-Block movers allow moving blocks inside the editor using up and down buttons.
+BlockMover component allows moving blocks inside the editor using up and down buttons.
 
 ![Block mover screenshot](https://make.wordpress.org/core/files/2020/08/block-mover-screenshot.png)
 
-## Development guidelines
-
-### Usage
+## Usage
 
 Shows the block mover buttons in the block toolbar.
 
@@ -15,13 +13,22 @@ import { BlockMover } from '@wordpress/block-editor';
 const MyMover = () => <BlockMover clientIds={ [ clientId ] } />;
 ```
 
-### Props
+## Props
 
-#### clientIds
+### clientIds
 
-Blocks IDs
+The IDs of the blocks to move.
 
 -   Type: `Array`
+-   Required: Yes
+
+### hideDragHandle
+
+If this property is true, the drag handle is hidden.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
 
 ## Related components
 

packages/block-editor/src/components/block-mover/stories/index.story.js

@@ -14,6 +14,7 @@ import BlockMover from '../';
 import { ExperimentalBlockEditorProvider } from '../../provider';
 import { store as blockEditorStore } from '../../../store';
 
+// For the purpose of this story, we need to register the core blocks samples.
 registerCoreBlocks();
 const blocks = [
 	// vertical
@@ -30,81 +31,82 @@ const blocks = [
 	] ),
 ];
 
-function Provider( { children } ) {
-	const wrapperStyle = { margin: '24px', position: 'relative' };
-
-	return (
-		<div style={ wrapperStyle }>
+/**
+ * BlockMover component allows moving blocks inside the editor using up and down buttons.
+ */
+const meta = {
+	title: 'BlockEditor/BlockMover',
+	component: BlockMover,
+	parameters: {
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	decorators: [
+		( Story ) => (
 			<ExperimentalBlockEditorProvider value={ blocks }>
-				{ children }
+				<Toolbar label="Block Mover">
+					<Story />
+				</Toolbar>
 			</ExperimentalBlockEditorProvider>
-		</div>
-	);
-}
-
-function BlockMoverStory() {
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
-
-	useEffect( () => {
-		/**
-		 * This shouldn't be needed but unfortunatley
-		 * the layout orientation is not declarative, we need
-		 *  to render the blocks to update the block settings in the state.
-		 */
-		updateBlockListSettings( blocks[ 1 ].clientId, {
-			orientation: 'horizontal',
-		} );
-	}, [] );
-
-	return (
-		<div>
-			<p>The mover by default is vertical</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 0 ].innerBlocks[ 1 ].clientId ]
-							: []
-					}
-				/>
-			</Toolbar>
-
-			<p style={ { marginTop: 36 } }>
-				But it can also accommodate horizontal blocks.
-			</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ]
-							: []
-					}
-				/>
-			</Toolbar>
+		),
+	],
+	argTypes: {
+		clientIds: {
+			control: {
+				type: 'none',
+			},
+			description: 'The client IDs of the blocks to move.',
+		},
+		hideDragHandle: {
+			control: {
+				type: 'boolean',
+			},
+			description: 'If this property is true, the drag handle is hidden.',
+		},
+	},
+};
+export default meta;
 
-			<p style={ { marginTop: 36 } }>We can also hide the drag handle.</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 1 ].innerBlocks[ 0 ].clientId ]
-							: []
-					}
-					hideDragHandle
-				/>
-			</Toolbar>
-		</div>
-	);
-}
+export const Default = {
+	args: {
+		clientIds: [ blocks[ 0 ].innerBlocks[ 1 ].clientId ],
+	},
+};
 
-export default {
-	title: 'BlockEditor/BlockMover',
+/**
+ * This story shows the block mover with horizontal orientation.
+ * It is necessary to render the blocks to update the block settings in the state.
+ */
+export const Horizontal = {
+	decorators: [
+		( Story ) => {
+			const { updateBlockListSettings } = useDispatch( blockEditorStore );
+			useEffect( () => {
+				/**
+				 * This shouldn't be needed but unfortunately
+				 * the layout orientation is not declarative, we need
+				 * to render the blocks to update the block settings in the state.
+				 */
+				updateBlockListSettings( blocks[ 1 ].clientId, {
+					orientation: 'horizontal',
+				} );
+			}, [] );
+			return <Story />;
+		},
+	],
+	args: {
+		clientIds: [ blocks[ 1 ].innerBlocks[ 1 ].clientId ],
+	},
+	parameters: {
+		docs: { canvas: { sourceState: 'hidden' } },
+	},
 };
 
-export const _default = () => {
-	return (
-		<Provider>
-			<BlockMoverStory />
-		</Provider>
-	);
+/**
+ * You can hide the drag handle by `hideDragHandle` attribute.
+ */
+export const HideDragHandle = {
+	args: {
+		...Default.args,
+		hideDragHandle: true,
+	},
 };

packages/block-editor/src/components/inserter-draggable-blocks/index.js

@@ -29,6 +29,15 @@ const InserterDraggableBlocks = ( {
 		blocks,
 	};
 
+	const blocksContainMedia =
+		blocks.filter(
+			( block ) =>
+				( block.name === 'core/image' ||
+					block.name === 'core/audio' ||
+					block.name === 'core/video' ) &&
+				( block.attributes.url || block.attributes.src )
+		).length > 0;
+
 	const blockTypeIcon = useSelect(
 		( select ) => {
 			const { getBlockType } = select( blocksStore );
@@ -63,7 +72,7 @@ const InserterDraggableBlocks = ( {
 						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 						: blocks;
 				event.dataTransfer.setData(
-					'text/html',
+					blocksContainMedia ? 'default' : 'text/html',
 					serialize( parsedBlocks )
 				);
 			} }

packages/block-editor/src/components/media-placeholder/index.js

@@ -288,8 +288,10 @@ export function MediaPlaceholder( {
 		}
 	}
 
-	async function onHTMLDrop( HTML ) {
-		const blocks = pasteHandler( { HTML } );
+	async function onDrop( event ) {
+		const blocks = pasteHandler( {
+			HTML: event.dataTransfer?.getData( 'default' ),
+		} );
 		return await handleBlocksDrop( blocks );
 	}
 
@@ -379,9 +381,7 @@ export function MediaPlaceholder( {
 			return null;
 		}
 
-		return (
-			<DropZone onFilesDrop={ onFilesUpload } onHTMLDrop={ onHTMLDrop } />
-		);
+		return <DropZone onFilesDrop={ onFilesUpload } onDrop={ onDrop } />;
 	};
 
 	const renderCancelLink = () => {

packages/block-library/src/block-keyboard-shortcuts/index.js

@@ -90,22 +90,36 @@ function BlockKeyboardShortcuts() {
 				},
 			} );
 		} );
-	}, [] );
+	}, [ registerShortcut ] );
 
 	useShortcut(
 		'core/block-editor/transform-heading-to-paragraph',
 		( event ) => handleTransformHeadingAndParagraph( event, 0 )
 	);
-
-	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-		//the loop is based off on a constant therefore
-		//the hook will execute the same way every time
-		//eslint-disable-next-line react-hooks/rules-of-hooks
-		useShortcut(
-			`core/block-editor/transform-paragraph-to-heading-${ level }`,
-			( event ) => handleTransformHeadingAndParagraph( event, level )
-		);
-	} );
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-1',
+		( event ) => handleTransformHeadingAndParagraph( event, 1 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-2',
+		( event ) => handleTransformHeadingAndParagraph( event, 2 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-3',
+		( event ) => handleTransformHeadingAndParagraph( event, 3 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-4',
+		( event ) => handleTransformHeadingAndParagraph( event, 4 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-5',
+		( event ) => handleTransformHeadingAndParagraph( event, 5 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-6',
+		( event ) => handleTransformHeadingAndParagraph( event, 6 )
+	);
 
 	return null;
 }

packages/components/CHANGELOG.md

@@ -10,6 +10,7 @@
 
 -   `Popover`: Fix missing label of the headerTitle Close button ([#66813](https://github.com/WordPress/gutenberg/pull/66813)).
 -   `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)).
+-   `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)).
 
 ### Enhancements
 

packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx

@@ -34,22 +34,34 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 
 	const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
 		( name, ref ) => {
+			const slot = slots.get( name );
+			if ( ! slot ) {
+				return;
+			}
+
 			// Make sure we're not unregistering a slot registered by another element
 			// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
-			if ( slots.get( name )?.ref === ref ) {
-				slots.delete( name );
+			if ( slot.ref !== ref ) {
+				return;
 			}
+
+			slots.delete( name );
 		};
 
 	const updateSlot: SlotFillBubblesVirtuallyContext[ 'updateSlot' ] = (
 		name,
+		ref,
 		fillProps
 	) => {
 		const slot = slots.get( name );
 		if ( ! slot ) {
 			return;
 		}
 
+		if ( slot.ref !== ref ) {
+			return;
+		}
+
 		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
 			return;
 		}
@@ -69,20 +81,18 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 		fills.set( name, [ ...( fills.get( name ) || [] ), ref ] );
 	};
 
-	const unregisterFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (
-		name,
-		ref
-	) => {
-		const fillsForName = fills.get( name );
-		if ( ! fillsForName ) {
-			return;
-		}
+	const unregisterFill: SlotFillBubblesVirtuallyContext[ 'unregisterFill' ] =
+		( name, ref ) => {
+			const fillsForName = fills.get( name );
+			if ( ! fillsForName ) {
+				return;
+			}
 
-		fills.set(
-			name,
-			fillsForName.filter( ( fillRef ) => fillRef !== ref )
-		);
-	};
+			fills.set(
+				name,
+				fillsForName.filter( ( fillRef ) => fillRef !== ref )
+			);
+		};
 
 	return {
 		slots,