@wordpress/block-library 7.12.0 → 7.13.1-next.957ca95e4c.0

package/src/gallery/utils.js

@@ -15,18 +15,22 @@ import {
 } from '../image/constants';
 
 /**
- * Determines new href and linkDestination values for an image block from the
- * supplied Gallery link destination.
+ * Determines new href and linkDestination values for an Image block from the
+ * supplied Gallery link destination, or falls back to the Image blocks link.
  *
- * @param {Object} image       Gallery image.
- * @param {string} destination Gallery's selected link destination.
+ * @param {Object} image              Gallery image.
+ * @param {string} galleryDestination Gallery's selected link destination.
+ * @param {Object} imageDestination   Image blocks attributes.
  * @return {Object}            New attributes to assign to image block.
  */
-export function getHrefAndDestination( image, destination ) {
+export function getHrefAndDestination(
+	image,
+	galleryDestination,
+	imageDestination
+) {
 	// Gutenberg and WordPress use different constants so if image_default_link_type
 	// option is set we need to map from the WP Core values.
-
-	switch ( destination ) {
+	switch ( imageDestination ? imageDestination : galleryDestination ) {
 		case LINK_DESTINATION_MEDIA_WP_CORE:
 		case LINK_DESTINATION_MEDIA:
 			return {

package/src/group/block.json

@@ -15,6 +15,12 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", false ]
+		},
+		"layout": {
+			"type": "object",
+			"default": {
+				"type": "constrained"
+			}
 		}
 	},
 	"supports": {
@@ -56,10 +62,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/group/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -11,6 +10,7 @@ import {
 	InnerBlocks,
 	getColorClassName,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 
 const migrateAttributes = ( attributes ) => {
@@ -31,13 +31,100 @@ const migrateAttributes = ( attributes ) => {
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
+
+	const { customTextColor, customBackgroundColor, ...restAttributes } =
+		attributes;
+
 	return {
-		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
+		...restAttributes,
 		style,
 	};
 };
 
 const deprecated = [
+	// Version with default layout.
+	{
+		attributes: {
+			tagName: {
+				type: 'string',
+				default: 'div',
+			},
+			templateLock: {
+				type: 'string',
+			},
+		},
+		supports: {
+			__experimentalOnEnter: true,
+			__experimentalSettings: true,
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			ariaLabel: true,
+			html: false,
+			color: {
+				gradients: true,
+				link: true,
+				__experimentalDefaultControls: {
+					background: true,
+					text: true,
+				},
+			},
+			spacing: {
+				margin: [ 'top', 'bottom' ],
+				padding: true,
+				blockGap: true,
+				__experimentalDefaultControls: {
+					padding: true,
+					blockGap: true,
+				},
+			},
+			__experimentalBorder: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+				__experimentalDefaultControls: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+				},
+			},
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
+				__experimentalLetterSpacing: true,
+				__experimentalTextTransform: true,
+				__experimentalDefaultControls: {
+					fontSize: true,
+				},
+			},
+			__experimentalLayout: true,
+		},
+		save( { attributes: { tagName: Tag } } ) {
+			return (
+				<Tag { ...useInnerBlocksProps.save( useBlockProps.save() ) } />
+			);
+		},
+		isEligible: ( { layout } ) =>
+			! layout || layout.inherit || layout.contentSize,
+		migrate: ( attributes ) => {
+			const { layout = null } = attributes;
+			if ( ! layout ) {
+				return attributes;
+			}
+			if ( layout.inherit || layout.contentSize ) {
+				return {
+					...attributes,
+					layout: {
+						...layout,
+						type: 'constrained',
+					},
+				};
+			}
+		},
+	},
 	// Version of the block with the double div.
 	{
 		attributes: {

package/src/group/edit.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -48,7 +49,9 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	);
 	const defaultLayout = useSetting( 'layout' ) || {};
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
-	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const usedLayout = ! layout?.type
+		? { ...defaultLayout, ...layout, type: 'default' }
+		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
@@ -67,6 +70,16 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 		}
 	);
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { type: layoutType = null } = layout;
+	useEffect( () => {
+		if ( layoutType ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { layout: { ...layout, type: layoutType } } );
+		}
+	}, [ layoutType ] );
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="advanced">

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;
 
 	&,
@@ -39,12 +39,10 @@
 	&::after {
 		content: "";
 		display: flex;
-		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;
+		@include placeholder-style();
 	}
 
 	// Let the parent be selectable in the placeholder area.

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/block.json

@@ -23,7 +23,20 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-home-link-editor",
 	"style": "wp-block-home-link"

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/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

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, has, isEmpty, omit, pick } from 'lodash';
+import { get, 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
  */
@@ -81,8 +98,8 @@ export const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
  */
 function hasDefaultSize( image, defaultSize ) {
 	return (
-		has( image, [ 'sizes', defaultSize, 'url' ] ) ||
-		has( image, [ 'media_details', 'sizes', defaultSize, 'source_url' ] )
+		'url' in ( image?.sizes?.[ defaultSize ] ?? {} ) ||
+		'source_url' in ( image?.media_details?.sizes?.[ defaultSize ] ?? {} )
 	);
 }
 
@@ -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/use-client-width.js

@@ -7,7 +7,7 @@ export default function useClientWidth( ref, dependencies ) {
 	const [ clientWidth, setClientWidth ] = useState();
 
 	function calculateClientWidth() {
-		setClientWidth( ref.current.clientWidth );
+		setClientWidth( ref.current?.clientWidth );
 	}
 
 	useEffect( calculateClientWidth, dependencies );

package/src/index.js

@@ -290,10 +290,7 @@ export const registerCoreBlocks = (
 export const __experimentalRegisterExperimentalCoreBlocks = process.env
 	.IS_GUTENBERG_PLUGIN
 	? ( { enableFSEBlocks } = {} ) => {
-			const enabledExperiments = [
-				window.__experimentalEnableListBlockV2 ? 'list-v2' : null,
-				enableFSEBlocks ? 'fse' : null,
-			];
+			const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ];
 			getAllBlocks()
 				.filter( ( { metadata } ) =>
 					isBlockMetadataExperimental( metadata )

package/src/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { Platform } from 'react-native';
-import { sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -161,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
@@ -181,14 +186,6 @@ 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',
@@ -240,11 +237,8 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
- * @param {Object} [blocksFlags] Experimental flags
- *
- *
  */
-export const registerCoreBlocks = ( blocksFlags ) => {
+export const registerCoreBlocks = () => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -256,7 +250,7 @@ export const registerCoreBlocks = ( blocksFlags ) => {
 		video,
 		nextpage,
 		separator,
-		listCheck( list, blocksFlags ),
+		list,
 		listItem,
 		quote,
 		mediaText,