@wordpress/block-library 7.11.0 → 7.13.0

package/src/group/editor.scss

@@ -24,7 +24,7 @@
 }
 
 // Affect the appender of the Row and Stack variants.
-.is-layout-flex.block-editor-block-list__block .block-list-appender:only-child {
+.wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child {
 	gap: inherit;
 
 	&,
@@ -42,9 +42,9 @@
 		border: $border-width dashed currentColor;
 		opacity: 0.4;
 		border-radius: $radius-block-ui;
-		flex: 1;
+		flex: 1 0 $grid-unit-60;
 		pointer-events: none;
-		min-height: $grid-unit-60;
+		min-height: $grid-unit-60 - $border-width - $border-width;
 	}
 
 	// Let the parent be selectable in the placeholder area.
@@ -53,3 +53,28 @@
 		pointer-events: all;
 	}
 }
+
+// Show an unselected empty group button as a dashed outline instead of the appender button.
+// This effectively adds a selectable-to-delete state.
+.is-layout-flow.block-editor-block-list__block:not(.is-selected) {
+	> .block-list-appender:only-child {
+		pointer-events: none;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			border: $border-width dashed currentColor;
+			opacity: 0.4;
+			border-radius: $radius-block-ui;
+			pointer-events: none;
+		}
+
+		.block-editor-inserter {
+			visibility: hidden;
+		}
+	}
+}

package/src/group/transforms.js

@@ -47,6 +47,13 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( attributes, innerBlocks ) => innerBlocks,
+		},
+	],
 };
 
 export default transforms;

package/src/group/variations.js

@@ -8,13 +8,14 @@ const variations = [
 	{
 		name: 'group',
 		title: __( 'Group' ),
-		description: __( 'Gather blocks in a layout container.' ),
-		attributes: { layout: { type: 'default' } },
+		description: __( 'Gather blocks in a container.' ),
+		attributes: { layout: { type: 'constrained' } },
 		scope: [ 'transform' ],
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
 			! blockAttributes.layout?.type ||
-			blockAttributes.layout?.type === 'default',
+			blockAttributes.layout?.type === 'default' ||
+			blockAttributes.layout?.type === 'constrained',
 		icon: group,
 	},
 	{

package/src/heading/block.json

@@ -31,6 +31,7 @@
 		"anchor": true,
 		"className": false,
 		"color": {
+			"gradients": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
@@ -38,7 +39,8 @@
 			}
 		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,

package/src/heading/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -46,8 +45,11 @@ const migrateCustomColors = ( attributes ) => {
 			text: attributes.customTextColor,
 		},
 	};
+
+	const { customTextColor, ...restAttributes } = attributes;
+
 	return {
-		...omit( attributes, [ 'customTextColor' ] ),
+		...restAttributes,
 		style,
 	};
 };

package/src/home-link/edit.js

@@ -6,31 +6,29 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
 
 const preventDefault = ( event ) => event.preventDefault();
 
-export default function HomeEdit( {
-	attributes,
-	setAttributes,
-	context,
-	clientId,
-} ) {
-	const { homeUrl } = useSelect(
-		( select ) => {
-			const {
-				getUnstableBase, // Site index.
-			} = select( coreStore );
-			return {
-				homeUrl: getUnstableBase()?.home,
-			};
-		},
-		[ clientId ]
-	);
+export default function HomeEdit( { attributes, setAttributes, context } ) {
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
@@ -50,9 +48,10 @@ export default function HomeEdit( {
 
 	useEffect( () => {
 		if ( label === undefined ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { label: __( 'Home' ) } );
 		}
-	}, [ clientId, label ] );
+	}, [ label ] );
 
 	return (
 		<>

package/src/home-link/index.php

@@ -89,7 +89,7 @@ function block_core_home_link_build_css_font_sizes( $context ) {
  * Builds an array with classes and style for the li wrapper
  *
  * @param  array $context    Home link block context.
- * @return array The li wrapper attributes.
+ * @return string The li wrapper attributes.
  */
 function block_core_home_link_build_li_wrapper_attributes( $context ) {
 	$colors          = block_core_home_link_build_css_colors( $context );
@@ -125,24 +125,15 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context );
-
 	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
 
-	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content" rel="home"' . $aria_current;
-
-	// Start appending HTML attributes to anchor tag.
-	$html .= ' href="' . esc_url( home_url() ) . '"';
-
-	// End appending HTML attributes to anchor tag.
-	$html .= '>';
-
-	if ( isset( $attributes['label'] ) ) {
-		$html .= wp_kses_post( $attributes['label'] );
-	}
-
-	$html .= '</a></li>';
-	return $html;
+	return sprintf(
+		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" "rel="home"%3$s>%4$s</a><li>',
+		block_core_home_link_build_li_wrapper_attributes( $block->context ),
+		esc_url( home_url() ),
+		$aria_current,
+		wp_kses_post( $attributes['label'] )
+	);
 }
 
 /**

package/src/image/block.json

@@ -16,31 +16,36 @@
 			"type": "string",
 			"source": "attribute",
 			"selector": "img",
-			"attribute": "src"
+			"attribute": "src",
+			"__experimentalRole": "content"
 		},
 		"alt": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "img",
 			"attribute": "alt",
-			"default": ""
+			"default": "",
+			"__experimentalRole": "content"
 		},
 		"caption": {
 			"type": "string",
 			"source": "html",
-			"selector": "figcaption"
+			"selector": "figcaption",
+			"__experimentalRole": "content"
 		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "img",
-			"attribute": "title"
+			"attribute": "title",
+			"__experimentalRole": "content"
 		},
 		"href": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure > a",
-			"attribute": "href"
+			"attribute": "href",
+			"__experimentalRole": "content"
 		},
 		"rel": {
 			"type": "string",
@@ -55,7 +60,8 @@
 			"attribute": "class"
 		},
 		"id": {
-			"type": "number"
+			"type": "number",
+			"__experimentalRole": "content"
 		},
 		"width": {
 			"type": "number"
@@ -79,7 +85,7 @@
 	"supports": {
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": "img",
+			"__experimentalDuotone": "img, .components-placeholder",
 			"text": false,
 			"background": false
 		},

package/src/image/edit.js

@@ -8,7 +8,7 @@ import { get, has, isEmpty, omit, pick } from 'lodash';
  * WordPress dependencies
  */
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { withNotices } from '@wordpress/components';
+import { withNotices, Placeholder } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
 	BlockAlignmentControl,
@@ -28,6 +28,23 @@ import { image as icon } from '@wordpress/icons';
  */
 import Image from './image';
 
+// Much of this description is duplicated from MediaPlaceholder.
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+			icon={ icon }
+			label={ __( 'Image' ) }
+			instructions={ __(
+				'Upload an image file, pick one from your media library, or add one with a URL.'
+			) }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
+
 /**
  * Module constants
  */
@@ -344,6 +361,7 @@ export function ImageEdit( {
 				onSelectURL={ onSelectURL }
 				notices={ noticeUI }
 				onError={ onUploadError }
+				placeholder={ placeholder }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ { id, src } }

package/src/image/editor.scss

@@ -1,3 +1,40 @@
+// Provide special styling for the placeholder.
+// @todo: this particular minimal style of placeholder could be componentized further.
+.wp-block-image.wp-block-image {
+	// Show Placeholder style on-select.
+	&.is-selected .components-placeholder {
+		// Block UI appearance.
+		color: $gray-900;
+		background-color: $white;
+		box-shadow: inset 0 0 0 $border-width $gray-900;
+		border: none;
+
+		// Disable any duotone filter applied in the selected state.
+		filter: none;
+
+		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
+		border-radius: $radius-block-ui;
+
+		> svg {
+			opacity: 0;
+		}
+
+		.components-placeholder__illustration {
+			display: none;
+		}
+	}
+
+	// Remove the transition while we still have a legacy placeholder style.
+	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
+	// parent border that may get applied when you deselect.
+	.components-placeholder__label,
+	.components-placeholder__instructions,
+	.components-button {
+		transition: none;
+	}
+}
+
+
 figure.wp-block-image:not(.wp-block) {
 	margin: 0;
 }
@@ -14,13 +51,12 @@ figure.wp-block-image:not(.wp-block) {
 		display: inline;
 	}
 
-	// Shown while image is being uploaded
+	// Shown while image is being uploaded.
 	.components-spinner {
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		margin-top: -9px;
-		margin-left: -9px;
+		transform: translate(-50%, -50%);
 	}
 }
 

package/src/image/index.php

@@ -20,7 +20,7 @@ function render_block_core_image( $attributes, $content ) {
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
 		$data_id_attribute = 'data-id="' . esc_attr( $attributes['data-id'] ) . '"';
-		if ( false === strpos( $content, $data_id_attribute ) ) {
+		if ( ! str_contains( $content, $data_id_attribute ) ) {
 			$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
 		}
 	}

package/src/image/test/edit.native.js

@@ -7,6 +7,7 @@ import {
 	initializeEditor,
 	getEditorHtml,
 	render,
+	waitFor,
 } from 'test/helpers';
 import { Image } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -40,16 +41,6 @@ sendMediaUpload.mockImplementation( ( payload ) => {
 	uploadCallBack( payload );
 } );
 
-/**
- * Immediately invoke delayed functions. A better alternative would be using
- * fake timers and test the delay itself. However, fake timers does not work
- * with our custom waitFor implementation.
- */
-jest.mock( 'lodash', () => {
-	const actual = jest.requireActual( 'lodash' );
-	return { ...actual, delay: ( cb ) => cb() };
-} );
-
 function mockGetMedia( media ) {
 	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
 }
@@ -157,6 +148,9 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		await waitFor(
+			() => new Promise( ( resolve ) => setTimeout( resolve, 100 ) )
+		);
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
 <figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
@@ -183,6 +177,7 @@ describe( 'Image Block', () => {
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
+		await waitFor( () => screen.getByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );
@@ -191,6 +186,7 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		await waitFor( () => screen.getByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );

package/src/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { Platform } from 'react-native';
-import { sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -41,6 +40,7 @@ import * as mediaText from './media-text';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
+import * as listItem from './list-item';
 import * as missing from './missing';
 import * as more from './more';
 import * as nextpage from './nextpage';
@@ -75,6 +75,7 @@ export const coreBlocks = [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -159,16 +160,22 @@ export const registerBlock = ( block ) => {
 const registerBlockVariations = ( block ) => {
 	const { metadata, settings, name } = block;
 
-	sortBy( settings.variations, 'title' ).forEach( ( v ) => {
-		registerBlockType( `${ name }-${ v.name }`, {
-			...metadata,
-			name: `${ name }-${ v.name }`,
-			...settings,
-			icon: v.icon(),
-			title: v.title,
-			variations: [],
+	if ( ! settings.variations ) {
+		return;
+	}
+
+	[ ...settings.variations ]
+		.sort( ( a, b ) => a.title.localeCompare( b.title ) )
+		.forEach( ( v ) => {
+			registerBlockType( `${ name }-${ v.name }`, {
+				...metadata,
+				name: `${ name }-${ v.name }`,
+				...settings,
+				icon: v.icon(),
+				title: v.title,
+				variations: [],
+			} );
 		} );
-	} );
 };
 
 // Only enable code block for development
@@ -179,6 +186,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
+// To be removed once List V2 is released on the web editor.
+function listCheck( listBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableListBlockV2 ) {
+		listBlock.settings = listBlock?.settingsV2;
+	}
+	return listBlock;
+}
+
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -230,9 +245,11 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
+ * @param {Object} [blocksFlags] Experimental flags
+ *
  *
  */
-export const registerCoreBlocks = () => {
+export const registerCoreBlocks = ( blocksFlags ) => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -244,7 +261,8 @@ export const registerCoreBlocks = () => {
 		video,
 		nextpage,
 		separator,
-		list,
+		listCheck( list, blocksFlags ),
+		listItem,
 		quote,
 		mediaText,
 		preformatted,

package/src/latest-posts/editor.scss

@@ -3,6 +3,11 @@
 	&.is-grid {
 		padding-left: 0;
 	}
+
+	// Apply overflow for post items, so any floated featured images won't crop the focus style.
+	> li {
+		overflow: hidden;
+	}
 }
 
 .wp-block-latest-posts li a > div {

package/src/list/block.json

@@ -58,6 +58,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"__unstablePasteTextInline": true,
 		"__experimentalSelector": "ol,ul",
 		"__experimentalSlashInserter": true

package/src/list/index.js

@@ -15,7 +15,7 @@ import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name };
+export { metadata, name, settingsV2 };
 
 const settingsV1 = {
 	icon,