@wordpress/block-library 7.1.1 → 7.3.1

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/search/edit.js

@@ -12,7 +12,6 @@ import {
 	InspectorControls,
 	RichText,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUnitControl as UnitControl,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -28,6 +27,7 @@ import {
 	PanelBody,
 	BaseControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
@@ -352,7 +352,6 @@ export default function SearchEdit( {
 							} }
 							style={ { maxWidth: 80 } }
 							value={ `${ width }${ widthUnit }` }
-							unit={ widthUnit }
 							units={ units }
 						/>
 

package/src/separator/block.json

@@ -8,16 +8,23 @@
 	"keywords": [ "horizontal-line", "hr", "divider" ],
 	"textdomain": "default",
 	"attributes": {
-		"color": {
-			"type": "string"
-		},
-		"customColor": {
-			"type": "string"
+		"opacity": {
+			"type": "string",
+			"default": "alpha-channel"
 		}
 	},
 	"supports": {
 		"anchor": true,
-		"align": [ "center", "wide", "full" ]
+		"align": [ "center", "wide", "full" ],
+		"color": {
+			"__experimentalSkipSerialization": true,
+			"gradients": true,
+			"background": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		}
 	},
 	"styles": [
 		{ "name": "default", "label": "Default", "isDefault": true },

package/src/separator/deprecated.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { getColorClassName, useBlockProps } from '@wordpress/block-editor';
+
+const v1 = {
+	attributes: {
+		color: {
+			type: 'string',
+		},
+		customColor: {
+			type: 'string',
+		},
+	},
+	save( { attributes } ) {
+		const { color, customColor } = attributes;
+
+		// the hr support changing color using border-color, since border-color
+		// is not yet supported in the color palette, we use background-color
+		const backgroundClass = getColorClassName( 'background-color', color );
+		// the dots styles uses text for the dots, to change those dots color is
+		// using color, not backgroundColor
+		const colorClass = getColorClassName( 'color', color );
+
+		const className = classnames( {
+			'has-text-color has-background': color || customColor,
+			[ backgroundClass ]: backgroundClass,
+			[ colorClass ]: colorClass,
+		} );
+
+		const style = {
+			backgroundColor: backgroundClass ? undefined : customColor,
+			color: colorClass ? undefined : customColor,
+		};
+
+		return <hr { ...useBlockProps.save( { className, style } ) } />;
+	},
+	migrate( attributes ) {
+		const { color, customColor } = attributes;
+		return {
+			...omit( attributes, [ 'color', 'customColor' ] ),
+			backgroundColor: color ? color : undefined,
+			opacity: 'css',
+			style: customColor
+				? { color: { background: customColor } }
+				: undefined,
+		};
+	},
+};
+
+export default [ v1 ];

package/src/separator/deprecated.scss

@@ -0,0 +1,6 @@
+.wp-block-separator {
+	// V1 version of the block expects a default opactiy of 0.4 to be set.
+	&.has-css-opacity {
+		opacity: 0.4;
+	}
+}