@wordpress/block-library 7.19.0 → 8.1.0

package/src/group/placeholder.js

@@ -24,10 +24,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" />
 			</SVG>
 		),
 		'group-row': (
@@ -37,10 +34,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z" />
 			</SVG>
 		),
 		'group-stack': (
@@ -50,10 +44,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" />
 			</SVG>
 		),
 	};
@@ -130,23 +121,13 @@ export function useShouldShowPlaceHolder( {
  * @return {JSX.Element}                The placeholder.
  */
 function GroupPlaceHolder( { name, onSelect } ) {
-	const { defaultVariation, variations } = useSelect(
-		( select ) => {
-			const { getBlockVariations, getDefaultBlockVariation } =
-				select( blocksStore );
-			return {
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				variations: getBlockVariations( name, 'block' ) || [],
-			};
-		},
+	const variations = useSelect(
+		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
 		[ name ]
 	);
 	const blockProps = useBlockProps( {
 		className: 'wp-block-group__placeholder',
 	} );
-	const selectVariation = ( nextVariation = defaultVariation ) =>
-		onSelect( nextVariation );
-
 	return (
 		<div { ...blockProps }>
 			<Placeholder
@@ -171,7 +152,7 @@ function GroupPlaceHolder( { name, onSelect } ) {
 									variation.name
 								) }
 								iconSize={ 44 }
-								onClick={ () => selectVariation( variation ) }
+								onClick={ () => onSelect( variation ) }
 								className="wp-block-group-placeholder__variation-button"
 								label={ `${ variation.title }: ${ variation.description }` }
 							/>

package/src/group/test/__snapshots__/edit.native.js.snap

@@ -3,7 +3,7 @@
 exports[`Group block inserts block and adds a Heading block as an inner block 1`] = `
 "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2></h2>
+<h2 class=\\"wp-block-heading\\"></h2>
 <!-- /wp:heading --></div>
 <!-- /wp:group -->"
 `;

package/src/heading/block.json

@@ -29,7 +29,7 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"anchor": true,
-		"className": false,
+		"className": true,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -57,7 +57,6 @@
 				"textTransform": true
 			}
 		},
-		"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
 		"__unstablePasteTextInline": true,
 		"__experimentalSlashInserter": true
 	},

package/src/heading/deprecated.js

@@ -63,155 +63,228 @@ const migrateTextAlign = ( attributes ) => {
 		: attributes;
 };
 
-const deprecated = [
-	{
-		supports: {
-			align: [ 'wide', 'full' ],
-			anchor: true,
-			className: false,
-			color: { link: true },
-			fontSize: true,
-			lineHeight: true,
-			__experimentalSelector: {
-				'core/heading/h1': 'h1',
-				'core/heading/h2': 'h2',
-				'core/heading/h3': 'h3',
-				'core/heading/h4': 'h4',
-				'core/heading/h5': 'h5',
-				'core/heading/h6': 'h6',
-			},
-			__unstablePasteTextInline: true,
+const v1 = {
+	supports: blockSupports,
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		attributes: blockAttributes,
-		isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
-		migrate: migrateTextAlign,
-		save( { attributes } ) {
-			const { align, content, level } = attributes;
-			const TagName = 'h' + level;
-
-			const className = classnames( {
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<TagName { ...useBlockProps.save( { className } ) }>
-					<RichText.Content value={ content } />
-				</TagName>
-			);
+		textColor: {
+			type: 'string',
 		},
 	},
-	{
-		supports: blockSupports,
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, level, content, textColor, customTextColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = classnames( {
+			[ textClass ]: textClass,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					textAlign: align,
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+};
+const v2 = {
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, content, customTextColor, level, textColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-				'has-text-color': textColor || customTextColor,
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		textColor: {
+			type: 'string',
 		},
 	},
-	{
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, content, customTextColor, level, textColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = classnames( {
+			[ textClass ]: textClass,
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+	supports: blockSupports,
+};
+const v3 = {
+	supports: blockSupports,
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, content, customTextColor, level, textColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		textColor: {
+			type: 'string',
 		},
-		supports: blockSupports,
 	},
-	{
-		supports: blockSupports,
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, content, customTextColor, level, textColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = classnames( {
+			[ textClass ]: textClass,
+			'has-text-color': textColor || customTextColor,
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+};
+const v4 = {
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		className: false,
+		color: { link: true },
+		fontSize: true,
+		lineHeight: true,
+		__experimentalSelector: {
+			'core/heading/h1': 'h1',
+			'core/heading/h2': 'h2',
+			'core/heading/h3': 'h3',
+			'core/heading/h4': 'h4',
+			'core/heading/h5': 'h5',
+			'core/heading/h6': 'h6',
+		},
+		__unstablePasteTextInline: true,
+	},
+	attributes: blockAttributes,
+	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+	migrate: migrateTextAlign,
+	save( { attributes } ) {
+		const { align, content, level } = attributes;
+		const TagName = 'h' + level;
+
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<TagName { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</TagName>
+		);
+	},
+};
+
+// This deprecation covers the serialization of the `wp-block-heading` class
+// into the block's markup after className support was enabled.
+const v5 = {
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		className: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
 			},
-			textColor: {
-				type: 'string',
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+				textTransform: true,
 			},
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, level, content, textColor, customTextColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						textAlign: align,
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		__experimentalSelector: 'h1,h2,h3,h4,h5,h6',
+		__unstablePasteTextInline: true,
+		__experimentalSlashInserter: true,
+	},
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'h1,h2,h3,h4,h5,h6',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		level: {
+			type: 'number',
+			default: 2,
+		},
+		placeholder: {
+			type: 'string',
 		},
 	},
-];
+	save( { attributes } ) {
+		const { textAlign, content, level } = attributes;
+		const TagName = 'h' + level;
+
+		const className = classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} );
+
+		return (
+			<TagName { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</TagName>
+		);
+	},
+};
+
+const deprecated = [ v5, v4, v3, v2, v1 ];
 
 export default deprecated;

package/src/heading/index.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Appending the wp-block-heading to before rendering the stored `core/heading` block contents.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Adds a wp-block-heading class to the heading block content.
+ *
+ * For example, the following block content:
+ *  <h2 class="align-left">Hello World</h2>
+ *
+ * Would be transformed to:
+ *  <h2 class="align-left wp-block-heading">Hello World</h2>
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ *
+ * @return string The content of the block being rendered.
+ */
+function block_core_heading_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$p = new WP_HTML_Tag_Processor( $content );
+
+	$header_tags = array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' );
+	while ( $p->next_tag() ) {
+		if ( in_array( $p->get_tag(), $header_tags, true ) ) {
+			$p->add_class( 'wp-block-heading' );
+			break;
+		}
+	}
+
+	return $p->get_updated_html();
+}
+
+/**
+ * Registers the `core/heading` block on server.
+ */
+function register_block_core_heading() {
+	register_block_type_from_metadata(
+		__DIR__ . '/heading',
+		array(
+			'render_callback' => 'block_core_heading_render',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_heading' );

package/src/heading/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading block inserts block 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;

package/src/heading/test/index.native.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	addBlock,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Heading block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Heading' );
+
+		// Get block
+		const headingBlock = await getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+		expect( headingBlock ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/home-link/index.php

@@ -128,7 +128,7 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
 
 	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>',
+		'<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,

package/src/html/block.json

@@ -10,7 +10,7 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {

package/src/image/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, isEmpty, pick } from 'lodash';
+import { get, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,12 @@ import {
 } from './constants';
 
 export const pickRelevantMediaFiles = ( image, size ) => {
-	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
+	const imageProps = Object.fromEntries(
+		Object.entries( image ?? {} ).filter( ( [ key ] ) =>
+			[ 'alt', 'id', 'link', 'caption' ].includes( key )
+		)
+	);
+
 	imageProps.url =
 		get( image, [ 'sizes', size, 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', size, 'source_url' ] ) ||

package/src/image/edit.native.js

@@ -61,8 +61,9 @@ import {
 	textColor,
 } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editPostStore } from '@wordpress/edit-post';
 import { store as noticesStore } from '@wordpress/notices';
+// eslint-disable-next-line no-restricted-imports
+import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
  * Internal dependencies

package/src/image/editor.scss

@@ -161,17 +161,6 @@ figure.wp-block-image:not(.wp-block) {
 		min-width: 260px;
 		overflow: visible !important;
 	}
-
-	.components-range-control {
-		flex: 1;
-	}
-
-	.components-base-control__field {
-		display: flex;
-		margin-bottom: 0;
-		flex-direction: column;
-		align-items: flex-start;
-	}
 }
 
 .wp-block-image__aspect-ratio {