@wordpress/block-library 7.18.0 → 8.0.0

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 {

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, filter, isEmpty, map, pick } from 'lodash';
+import { get, isEmpty, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -135,12 +135,16 @@ export default function Image( {
 				} = select( blockEditorStore );
 
 				const rootClientId = getBlockRootClientId( clientId );
-				const settings = pick( getSettings(), [
-					'imageEditing',
-					'imageSizes',
-					'maxWidth',
-					'mediaUpload',
-				] );
+				const settings = Object.fromEntries(
+					Object.entries( getSettings() ).filter( ( [ key ] ) =>
+						[
+							'imageEditing',
+							'imageSizes',
+							'maxWidth',
+							'mediaUpload',
+						].includes( key )
+					)
+				);
 
 				return {
 					...settings,
@@ -169,7 +173,7 @@ export default function Image( {
 		! isContentLocked &&
 		! ( isWideAligned && isLargeViewport );
 	const imageSizeOptions = map(
-		filter( imageSizes, ( { slug } ) =>
+		imageSizes.filter( ( { slug } ) =>
 			get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
 		),
 		( { name, slug } ) => ( { value: slug, label: name } )
@@ -607,6 +611,7 @@ export default function Image( {
 						height: parseInt( currentHeight + delta.height, 10 ),
 					} );
 				} }
+				resizeRatio={ align === 'center' ? 2 : 1 }
 			>
 				{ img }
 			</ResizableBox>