@wordpress/block-editor 14.6.0 → 14.7.1-next.082ed6819.0

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -46,18 +46,18 @@ export default function useInspectorControlsTabs( blockName ) {
 
 	// List View Tab: If there are any fills for the list group add that tab.
 	const listViewDisabled = useIsListViewTabDisabled( blockName );
-	const listFills = useSlotFills( listGroup.Slot.__unstableName );
+	const listFills = useSlotFills( listGroup.name );
 	const hasListFills = ! listViewDisabled && !! listFills && listFills.length;
 
 	// Styles Tab: Add this tab if there are any fills for block supports
 	// e.g. border, color, spacing, typography, etc.
 	const styleFills = [
-		...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( effectsGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( borderGroup.name ) || [] ),
+		...( useSlotFills( colorGroup.name ) || [] ),
+		...( useSlotFills( dimensionsGroup.name ) || [] ),
+		...( useSlotFills( stylesGroup.name ) || [] ),
+		...( useSlotFills( typographyGroup.name ) || [] ),
+		...( useSlotFills( effectsGroup.name ) || [] ),
 	];
 	const hasStyleFills = styleFills.length;
 
@@ -67,12 +67,12 @@ export default function useInspectorControlsTabs( blockName ) {
 	// the advanced controls slot as well to ensure they are rendered.
 	const advancedFills = [
 		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
-		...( useSlotFills( bindingsGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( bindingsGroup.name ) || [] ),
 	];
 
 	const settingsFills = [
-		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( defaultGroup.name ) || [] ),
+		...( useSlotFills( positionGroup.name ) || [] ),
 		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 

package/src/components/media-placeholder/index.js

@@ -239,7 +239,7 @@ export function MediaPlaceholder( {
 				( block.name === 'core/image' ||
 					block.name === 'core/audio' ||
 					block.name === 'core/video' ) &&
-				block.attributes.url
+				( block.attributes.url || block.attributes.src )
 					? [ block ]
 					: recursivelyFindMediaFromBlocks( block.innerBlocks )
 			);
@@ -252,33 +252,37 @@ export function MediaPlaceholder( {
 		}
 
 		const uploadedMediaList = await Promise.all(
-			mediaBlocks.map( ( block ) =>
-				block.attributes.id
-					? block.attributes
-					: new Promise( ( resolve, reject ) => {
-							window
-								.fetch( block.attributes.url )
-								.then( ( response ) => response.blob() )
-								.then( ( blob ) =>
-									mediaUpload( {
-										filesList: [ blob ],
-										additionalData: {
-											title: block.attributes.title,
-											alt_text: block.attributes.alt,
-											caption: block.attributes.caption,
-										},
-										onFileChange: ( [ media ] ) => {
-											if ( media.id ) {
-												resolve( media );
-											}
-										},
-										allowedTypes,
-										onError: reject,
-									} )
-								)
-								.catch( () => resolve( block.attributes.url ) );
-					  } )
-			)
+			mediaBlocks.map( ( block ) => {
+				const blockType = block.name.split( '/' )[ 1 ];
+				if ( block.attributes.id ) {
+					block.attributes.type = blockType;
+					return block.attributes;
+				}
+				return new Promise( ( resolve, reject ) => {
+					window
+						.fetch( block.attributes.url )
+						.then( ( response ) => response.blob() )
+						.then( ( blob ) =>
+							mediaUpload( {
+								filesList: [ blob ],
+								additionalData: {
+									title: block.attributes.title,
+									alt_text: block.attributes.alt,
+									caption: block.attributes.caption,
+									type: blockType,
+								},
+								onFileChange: ( [ media ] ) => {
+									if ( media.id ) {
+										resolve( media );
+									}
+								},
+								allowedTypes,
+								onError: reject,
+							} )
+						)
+						.catch( () => resolve( block.attributes.url ) );
+				} );
+			} )
 		).catch( ( err ) => onError( err ) );
 
 		if ( multiple ) {
@@ -288,8 +292,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 );
 	}
 
@@ -317,20 +323,20 @@ export function MediaPlaceholder( {
 
 			if ( instructions === undefined && mediaUpload ) {
 				instructions = __(
-					'Upload a media file or pick one from your media library.'
+					'Drag and drop an image or video, upload, or choose from your library.'
 				);
 
 				if ( isAudio ) {
 					instructions = __(
-						'Upload or drag an audio file here, or pick one from your library.'
+						'Drag and drop an audio file, upload, or choose from your library.'
 					);
 				} else if ( isImage ) {
 					instructions = __(
-						'Upload or drag an image file here, or pick one from your library.'
+						'Drag and drop an image, upload, or choose from your library.'
 					);
 				} else if ( isVideo ) {
 					instructions = __(
-						'Upload or drag a video file here, or pick one from your library.'
+						'Drag and drop a video, upload, or choose from your library.'
 					);
 				}
 			}
@@ -379,9 +385,7 @@ export function MediaPlaceholder( {
 			return null;
 		}
 
-		return (
-			<DropZone onFilesDrop={ onFilesUpload } onHTMLDrop={ onHTMLDrop } />
-		);
+		return <DropZone onFilesDrop={ onFilesUpload } onDrop={ onDrop } />;
 	};
 
 	const renderCancelLink = () => {

package/src/components/provider/test/use-block-sync.js

@@ -22,7 +22,9 @@ jest.mock( '../../../store/actions', () => {
 		...actions,
 		resetBlocks: jest.fn( actions.resetBlocks ),
 		replaceInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
-		setHasControlledInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
+		setHasControlledInnerBlocks: jest.fn(
+			actions.setHasControlledInnerBlocks
+		),
 	};
 } );
 

package/src/components/rich-text/content.scss

@@ -13,16 +13,6 @@
 	&:focus {
 		// Removes outline added by the browser.
 		outline: none;
-
-		[data-rich-text-format-boundary] {
-			border-radius: $radius-small;
-		}
-	}
-}
-
-.block-editor-rich-text__editable {
-	> p:first-child {
-		margin-top: 0;
 	}
 }
 
@@ -40,3 +30,18 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		background: rgb(255, 255, 0);
 	}
 }
+
+[data-rich-text-comment],
+[data-rich-text-format-boundary] {
+	border-radius: $radius-small;
+}
+
+[data-rich-text-comment] {
+	background-color: currentColor;
+
+	span {
+		filter: invert(100%);
+		color: currentColor;
+		padding: 0 2px;
+	}
+}

package/src/components/rich-text/index.js

@@ -233,7 +233,14 @@ export function RichTextWrapper(
 				bindingsLabel: _bindingsLabel,
 			};
 		},
-		[ blockBindings, identifier, blockName, blockContext, adjustedValue ]
+		[
+			blockBindings,
+			identifier,
+			blockName,
+			adjustedValue,
+			clientId,
+			blockContext,
+		]
 	);
 
 	const shouldDisableEditing = readOnly || disableBoundBlock;

package/src/components/tabbed-sidebar/index.js

@@ -33,7 +33,7 @@ function TabbedSidebar(
 						icon={ closeSmall }
 						label={ closeButtonLabel }
 						onClick={ () => onClose() }
-						size="small"
+						size="compact"
 					/>
 
 					<Tabs.TabList

package/src/components/tabbed-sidebar/style.scss

@@ -11,7 +11,7 @@
 	border-bottom: $border-width solid $gray-300;
 	display: flex;
 	justify-content: space-between;
-	padding-right: $grid-unit-15;
+	padding-right: $grid-unit-10;
 }
 
 

package/src/components/url-input/index.js

@@ -533,10 +533,9 @@ class URLInput extends Component {
 			<Popover placement="bottom" focusOnMount={ false }>
 				<div
 					{ ...suggestionsListProps }
-					className={ clsx(
-						'block-editor-url-input__suggestions',
-						`${ className }__suggestions`
-					) }
+					className={ clsx( 'block-editor-url-input__suggestions', {
+						[ `${ className }__suggestions` ]: className,
+					} ) }
 				>
 					{ suggestions.map( ( suggestion, index ) => (
 						<Button