@wordpress/block-library 7.2.0 → 7.3.2

package/src/quote/v2/deprecated.js

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import deprecationsForV1Block from '../deprecated';
+
+export const migrateToQuoteV2 = ( attributes ) => {
+	const { value } = attributes;
+
+	return [
+		{
+			...omit( attributes, [ 'value' ] ),
+		},
+		value
+			? parseWithAttributeSchema( value, {
+					type: 'array',
+					source: 'query',
+					selector: 'p',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+					},
+			  } ).map( ( { content } ) =>
+					createBlock( 'core/paragraph', { content } )
+			  )
+			: createBlock( 'core/paragraph' ),
+	];
+};
+
+const v3 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		align: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		__experimentalSlashInserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { align, value, citation } = attributes;
+
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateToQuoteV2,
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v3, ...deprecationsForV1Block ];

package/src/quote/v2/edit.js

@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { BlockQuotation } from '@wordpress/components';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { Platform, useEffect } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { migrateToQuoteV2 } from './deprecated';
+
+const isWebPlatform = Platform.OS === 'web';
+const TEMPLATE = [ [ 'core/paragraph', {} ] ];
+
+/**
+ * At the moment, deprecations don't handle create blocks from attributes
+ * (like when using CPT templates). For this reason, this hook is necessary
+ * to avoid breaking templates using the old quote block format.
+ *
+ * @param {Object} attributes Block attributes.
+ * @param {string} clientId   Block client ID.
+ */
+const useMigrateOnLoad = ( attributes, clientId ) => {
+	const registry = useRegistry();
+	const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(
+		blockEditorStore
+	);
+	useEffect( () => {
+		// As soon as the block is loaded, migrate it to the new version.
+
+		if ( ! attributes.value ) {
+			// No need to migrate if it doesn't have the value attribute.
+			return;
+		}
+
+		const [ newAttributes, newInnerBlocks ] = migrateToQuoteV2(
+			attributes
+		);
+
+		deprecated( 'Value attribute on the quote block', {
+			since: '6.0',
+			version: '6.5',
+			alternative: 'inner blocks',
+		} );
+
+		registry.batch( () => {
+			updateBlockAttributes( clientId, newAttributes );
+			replaceInnerBlocks( clientId, newInnerBlocks );
+		} );
+	}, [ attributes.value ] );
+};
+
+export default function QuoteEdit( {
+	attributes,
+	setAttributes,
+	isSelected,
+	insertBlocksAfter,
+	clientId,
+	className,
+} ) {
+	const { citation, align } = attributes;
+
+	useMigrateOnLoad( attributes, clientId );
+
+	const isAncestorOfSelectedBlock = useSelect( ( select ) =>
+		select( blockEditorStore ).hasSelectedInnerBlock( clientId )
+	);
+	const hasSelection = isSelected || isAncestorOfSelectedBlock;
+
+	const blockProps = useBlockProps( {
+		className: classNames( className, {
+			[ `has-text-align-${ align }` ]: align,
+		} ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		templateInsertUpdatesSelection: true,
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { align: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<BlockQuotation { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ ( ! RichText.isEmpty( citation ) || hasSelection ) && (
+					<RichText
+						identifier="citation"
+						tagName={ isWebPlatform ? 'cite' : undefined }
+						style={ { display: 'block' } }
+						value={ citation }
+						onChange={ ( nextCitation ) => {
+							setAttributes( {
+								citation: nextCitation,
+							} );
+						} }
+						__unstableMobileNoFocusOnMount
+						aria-label={ __( 'Quote citation' ) }
+						placeholder={
+							// translators: placeholder text used for the
+							// citation
+							__( 'Add citation' )
+						}
+						className="wp-block-quote__citation"
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+						}
+					/>
+				) }
+			</BlockQuotation>
+		</>
+	);
+}

package/src/quote/v2/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { quote as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import transforms from './transforms';
+import deprecated from './deprecated';
+
+const settings = {
+	icon,
+	example: {
+		attributes: {
+			citation: 'Julio Cortázar',
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: __( 'In quoting others, we cite ourselves.' ),
+				},
+			},
+		],
+	},
+	transforms,
+	edit,
+	save,
+	deprecated,
+};
+
+export default settings;

package/src/quote/v2/save.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { align, citation } = attributes;
+	const blockProps = useBlockProps.save( {
+		className: classNames( {
+			[ `has-text-align-${ align }` ]: align,
+		} ),
+	} );
+	return (
+		<blockquote { ...blockProps }>
+			<InnerBlocks.Content />
+			{ ! RichText.isEmpty( citation ) && (
+				<RichText.Content tagName="cite" value={ citation } />
+			) }
+		</blockquote>
+	);
+}

package/src/quote/v2/test/migrate.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockType,
+	serialize,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { migrateToQuoteV2 } from '../deprecated';
+import * as paragraph from '../../../paragraph';
+import * as quote from '../../../quote';
+import * as quoteV2 from '../../../quote/v2';
+
+describe( 'Migrate quote block', () => {
+	beforeAll( () => {
+		registerBlockType(
+			{ name: paragraph.name, ...paragraph.metadata },
+			paragraph.settings
+		);
+		registerBlockType(
+			{ name: quote.name, ...quote.metadata },
+			quoteV2.settings
+		);
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( paragraph.name );
+		unregisterBlockType( quote.name );
+	} );
+
+	it( 'should migrate the value attribute to inner blocks', () => {
+		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
+			value: '<p>First paragraph</p><p>Second paragraph</p>',
+			citation: 'Author',
+		} );
+		expect( attributes ).toEqual( {
+			citation: 'Author',
+		} );
+		expect( serialize( innerBlocks ) ).toEqual(
+			`<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	it( 'should create a paragraph if value is empty', () => {
+		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
+			value: undefined,
+			citation: 'Author',
+		} );
+		expect( attributes ).toEqual( {
+			citation: 'Author',
+		} );
+		expect( serialize( innerBlocks ) ).toEqual(
+			`<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	it( 'should keep the formats of the value', () => {
+		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
+			value:
+				'<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
+			citation: 'Author',
+		} );
+		expect( attributes ).toEqual( {
+			citation: 'Author',
+		} );
+		expect( serialize( innerBlocks ) ).toEqual(
+			`<!-- wp:paragraph -->
+<p><strong>Bold</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p> and </p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><em>italic</em></p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+} );

package/src/quote/v2/transforms.js

@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	parseWithAttributeSchema,
+	rawHandler,
+	serialize,
+} from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/pullquote' ],
+			transform: ( { value, citation, anchor, fontSize, style } ) => {
+				return createBlock(
+					'core/quote',
+					{
+						citation,
+						anchor,
+						fontSize,
+						style,
+					},
+					parseWithAttributeSchema( value, {
+						type: 'array',
+						source: 'query',
+						selector: 'p',
+						query: {
+							content: {
+								type: 'string',
+								source: 'html',
+							},
+						},
+					} ).map( ( { content } ) =>
+						createBlock( 'core/paragraph', { content } )
+					)
+				);
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			transform: ( { anchor }, innerBlocks ) =>
+				createBlock( 'core/quote', { anchor }, innerBlocks ),
+		},
+		{
+			type: 'prefix',
+			prefix: '>',
+			transform: ( content ) =>
+				createBlock( 'core/quote', {}, [
+					createBlock( 'core/paragraph', { content } ),
+				] ),
+		},
+		{
+			type: 'raw',
+			schema: () => ( {
+				blockquote: {
+					children: '*',
+				},
+			} ),
+			selector: 'blockquote',
+			transform: ( node ) => {
+				return createBlock(
+					'core/quote',
+					// Don't try to parse any `cite` out of this content.
+					// * There may be more than one cite.
+					// * There may be more attribution text than just the cite.
+					// * If the cite is nested in the quoted text, it's wrong to
+					//   remove it.
+					{},
+					rawHandler( {
+						HTML: node.innerHTML,
+						mode: 'BLOCKS',
+					} )
+				);
+			},
+		},
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			isMatch: ( {}, blocks ) => {
+				return ! blocks.some( ( { name } ) => name === 'core/quote' );
+			},
+			__experimentalConvert: ( blocks ) =>
+				createBlock(
+					'core/quote',
+					{},
+					blocks.map( ( block ) =>
+						createBlock(
+							block.name,
+							block.attributes,
+							block.innerBlocks
+						)
+					)
+				),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/pullquote' ],
+			isMatch: ( {}, block ) => {
+				return block.innerBlocks.every(
+					( { name } ) => name === 'core/paragraph'
+				);
+			},
+			transform: (
+				{ citation, anchor, fontSize, style },
+				innerBlocks
+			) => {
+				return createBlock( 'core/pullquote', {
+					value: serialize( innerBlocks ),
+					citation,
+					anchor,
+					fontSize,
+					style,
+				} );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			transform: ( { citation, anchor }, innerBlocks ) =>
+				createBlock(
+					'core/group',
+					{ anchor },
+					citation
+						? [
+								...innerBlocks,
+								createBlock( 'core/paragraph', {
+									content: citation,
+								} ),
+						  ]
+						: innerBlocks
+				),
+		},
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( { citation }, innerBlocks ) =>
+				citation
+					? [
+							...innerBlocks,
+							createBlock( 'core/paragraph', {
+								content: citation,
+							} ),
+					  ]
+					: innerBlocks,
+		},
+	],
+};
+
+export default transforms;

package/src/read-more/block.json

@@ -20,7 +20,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"text": false
+			"text": true
 		},
 		"typography": {
 			"fontSize": true,

package/src/reset.scss

@@ -61,7 +61,7 @@ html :where(.editor-styles-wrapper) {
 		margin: revert;
 		padding: revert;
 		list-style-type: revert;
-		box-sizing: revert;
+		box-sizing: border-box;
 
 		// Remove bottom margin from nested lists.
 		ul,

package/src/rss/edit.js

@@ -19,10 +19,11 @@ import {
 import { useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { prependHTTP } from '@wordpress/url';
 import ServerSideRender from '@wordpress/server-side-render';
 
 const DEFAULT_MIN_ITEMS = 1;
-const DEFAULT_MAX_ITEMS = 10;
+const DEFAULT_MAX_ITEMS = 20;
 
 export default function RSSEdit( { attributes, setAttributes } ) {
 	const [ isEditing, setIsEditing ] = useState( ! attributes.feedURL );
@@ -50,6 +51,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		event.preventDefault();
 
 		if ( feedURL ) {
+			setAttributes( { feedURL: prependHTTP( feedURL ) } );
 			setIsEditing( false );
 		}
 	}

package/src/rss/index.php

@@ -13,6 +13,10 @@
  * @return string Returns the block content with received rss items.
  */
 function render_block_core_rss( $attributes ) {
+	if ( in_array( untrailingslashit( $attributes['feedURL'] ), array( site_url(), home_url() ), true ) ) {
+		return '<div class="components-placeholder"><div class="notice notice-error">' . __( 'Adding an RSS feed to this site’s homepage is not supported, as it could lead to a loop that slows down your site. Try using another block, like the <strong>Latest Posts</strong> block, to list posts from the site.' ) . '</div></div>';
+	}
+
 	$rss = fetch_feed( $attributes['feedURL'] );
 
 	if ( is_wp_error( $rss ) ) {
@@ -83,10 +87,19 @@ function render_block_core_rss( $attributes ) {
 	if ( isset( $attributes['blockLayout'] ) && 'grid' === $attributes['blockLayout'] ) {
 		$classnames[] = 'is-grid';
 	}
-
 	if ( isset( $attributes['columns'] ) && 'grid' === $attributes['blockLayout'] ) {
 		$classnames[] = 'columns-' . $attributes['columns'];
 	}
+	if ( $attributes['displayDate'] ) {
+		$classnames[] = 'has-dates';
+	}
+	if ( $attributes['displayAuthor'] ) {
+		$classnames[] = 'has-authors';
+	}
+	if ( $attributes['displayExcerpt'] ) {
+		$classnames[] = 'has-excerpts';
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classnames ) ) );
 
 	return sprintf( '<ul %s>%s</ul>', $wrapper_attributes, $list_items );

package/src/site-logo/block.json

@@ -34,7 +34,7 @@
 		"align": true,
 		"alignWide": false,
 		"color": {
-			"__experimentalDuotone": "img",
+			"__experimentalDuotone": "img, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		}

package/src/site-logo/edit.js

@@ -417,8 +417,9 @@ export default function LogoEdit( {
 	};
 
 	const setIcon = ( newValue ) =>
+		// The new value needs to be `null` to reset the Site Icon.
 		editEntityRecord( 'root', 'site', undefined, {
-			site_icon: newValue,
+			site_icon: newValue ?? null,
 		} );
 
 	let alt = null;

package/src/site-logo/index.php

@@ -44,10 +44,6 @@ function render_block_core_site_logo( $attributes ) {
 	}
 
 	$classnames = array();
-	if ( ! empty( $attributes['className'] ) ) {
-		$classnames[] = $attributes['className'];
-	}
-
 	if ( empty( $attributes['width'] ) ) {
 		$classnames[] = 'is-default-size';
 	}

package/src/social-link/index.php

@@ -21,7 +21,6 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$url         = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
 	$label       = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
 	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
-	$class_name  = isset( $attributes['className'] ) ? ' ' . $attributes['className'] : false;
 
 	// Don't render a link if there is no URL set.
 	if ( ! $url ) {
@@ -36,7 +35,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => 'wp-social-link wp-social-link-' . $service . $class_name,
+			'class' => 'wp-social-link wp-social-link-' . $service,
 			'style' => block_core_social_link_get_color_styles( $block->context ),
 		)
 	);

package/src/social-links/block.json

@@ -51,6 +51,7 @@
 		"__experimentalLayout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
+			"allowVerticalAlignment": false,
 			"default": {
 				"type": "flex"
 			}

package/src/spacer/controls.native.js

@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { MIN_SPACER_SIZE } from './edit';
+import { MIN_SPACER_SIZE } from './edit.js';
 import styles from './style.scss';
 
 const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };