@wordpress/block-library 7.1.0 → 7.3.0

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;
+	}
+}

package/src/separator/edit.js

@@ -7,30 +7,52 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { HorizontalRule } from '@wordpress/components';
-import { withColors, useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	getColorClassName,
+	__experimentalUseColorProps as useColorProps,
+} from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-import SeparatorSettings from './separator-settings';
+import useDeprecatedOpacity from './use-deprecated-opacity';
+
+export default function SeparatorEdit( { attributes, setAttributes } ) {
+	const { backgroundColor, opacity, style } = attributes;
+	const colorProps = useColorProps( attributes );
+	const currentColor = colorProps?.style?.backgroundColor;
+	const hasCustomColor = !! style?.color?.background;
+
+	useDeprecatedOpacity( opacity, currentColor, setAttributes );
+
+	// The dots styles uses text for the dots, to change those dots color is
+	// using color, not backgroundColor.
+	const colorClass = getColorClassName( 'color', backgroundColor );
+
+	const className = classnames(
+		{
+			'has-text-color': backgroundColor || currentColor,
+			[ colorClass ]: colorClass,
+			'has-css-opacity': opacity === 'css',
+			'has-alpha-channel-opacity': opacity === 'alpha-channel',
+		},
+		colorProps.classname
+	);
+
+	const styles = {
+		color: currentColor,
+		backgroundColor: currentColor,
+	};
 
-function SeparatorEdit( { color, setColor, className } ) {
 	return (
 		<>
 			<HorizontalRule
 				{ ...useBlockProps( {
-					className: classnames( className, {
-						'has-background': color.color,
-						[ color.class ]: color.class,
-					} ),
-					style: {
-						backgroundColor: color.color,
-						color: color.color,
-					},
+					className,
+					style: hasCustomColor ? styles : undefined,
 				} ) }
 			/>
-			<SeparatorSettings color={ color } setColor={ setColor } />
 		</>
 	);
 }
-
-export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit );

package/src/separator/editor.scss

@@ -2,4 +2,10 @@
 	// Prevent margin collapsing so the area to select the separator is bigger.
 	padding-top: 0.1px;
 	padding-bottom: 0.1px;
+
+	// This is also set in style.scss, but needs a higher specificity in editor
+	// due to the way that color block supports adds additional background color styles.
+	&.wp-block-separator.is-style-dots {
+		background: none !important;
+	}
 }

package/src/separator/index.js

@@ -10,6 +10,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 
@@ -26,4 +27,5 @@ export const settings = {
 	transforms,
 	edit,
 	save,
+	deprecated,
 };

package/src/separator/save.js

@@ -6,28 +6,36 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getColorClassName, useBlockProps } from '@wordpress/block-editor';
+import {
+	getColorClassName,
+	useBlockProps,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
 
 export default function separatorSave( { attributes } ) {
-	const { color, customColor } = attributes;
-
+	const { backgroundColor, style, opacity } = attributes;
+	const customColor = style?.color?.background;
+	const colorProps = getColorClassesAndStyles( 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 colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames( {
-		'has-text-color has-background': color || customColor,
-		[ backgroundClass ]: backgroundClass,
-		[ colorClass ]: colorClass,
-	} );
+	const className = classnames(
+		{
+			'has-text-color': backgroundColor || customColor,
+			[ colorClass ]: colorClass,
+			'has-css-opacity': opacity === 'css',
+			'has-alpha-channel-opacity': opacity === 'alpha-channel',
+		},
+		colorProps.className
+	);
 
-	const style = {
-		backgroundColor: backgroundClass ? undefined : customColor,
+	const styles = {
+		backgroundColor: colorProps?.style?.backgroundColor,
 		color: colorClass ? undefined : customColor,
 	};
-
-	return <hr { ...useBlockProps.save( { className, style } ) } />;
+	return <hr { ...useBlockProps.save( { className, style: styles } ) } />;
 }

package/src/separator/test/edit.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import SeparatorEdit from '../edit';
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	useBlockProps: jest.fn(),
+} ) );
+
+const defaultAttributes = {
+	backgroundColor: undefined,
+	opacity: 'alpha-channel',
+	style: {},
+	className: '',
+};
+const defaultProps = {
+	attributes: defaultAttributes,
+	setAttributes: jest.fn(),
+};
+
+describe( 'Separator block edit method', () => {
+	beforeEach( () => {
+		useBlockProps.mockClear();
+	} );
+
+	test( 'should add the has-alpha-channel-opacity class and no inline styles by default', () => {
+		render( <SeparatorEdit { ...defaultProps } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-alpha-channel-opacity',
+			style: undefined,
+		} );
+	} );
+
+	test( 'should add has-css-opacity class and no inline styles for deprecated block with no color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: { ...defaultAttributes, opacity: 'css' },
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-css-opacity',
+			style: undefined,
+		} );
+	} );
+
+	test( 'should add inline background style for block without dots style selected and custom color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				style: { color: { background: '#ff0000' } },
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			// For backwards compatibility the has-text-color class is also added even though it is only needed for
+			// is-style-dots as this class was always added to v1 blocks, so may be expected by themes and plugins.
+			className: 'has-text-color has-alpha-channel-opacity',
+			style: {
+				backgroundColor: '#ff0000',
+				color: '#ff0000',
+			},
+		} );
+	} );
+
+	test( 'should add inline color style for block with dots style selected and custom color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				className: 'is-style-dots',
+				style: { color: { background: '#ff0000' } },
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-text-color has-alpha-channel-opacity',
+			style: {
+				backgroundColor: '#ff0000',
+				color: '#ff0000',
+			},
+		} );
+	} );
+
+	test( 'should add color class when color from palette specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				backgroundColor: 'banana',
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		// Note that only the manual addition of the text color class can be checked as the
+		// background color classes are added by useBlockProps which has to be mocked.
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className:
+				'has-text-color has-banana-color has-alpha-channel-opacity',
+			style: undefined,
+		} );
+	} );
+} );

package/src/separator/theme.scss

@@ -1,9 +1,15 @@
+// Import styles for rendering the static content of deprecated block versions.
+@import "./deprecated.scss";
+
 .wp-block-separator {
 	border: none;
 	border-bottom: 2px solid currentColor;
 	margin-left: auto;
 	margin-right: auto;
-	opacity: 0.4;
+
+	&.has-alpha-channel-opacity {
+		opacity: initial;
+	}
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {

package/src/separator/use-deprecated-opacity.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+
+export default function useDeprecatedOpacity(
+	opacity,
+	currentColor,
+	setAttributes
+) {
+	const [
+		deprecatedOpacityWithNoColor,
+		setDeprecatedOpacityWithNoColor,
+	] = useState( false );
+	const previousColor = usePrevious( currentColor );
+
+	// A separator with no color set will always have previousColor set to undefined,
+	// and we need to differentiate these from those with color set that will return
+	// previousColor as undefined on the first render.
+	useEffect( () => {
+		if ( opacity === 'css' && ! currentColor && ! previousColor ) {
+			setDeprecatedOpacityWithNoColor( true );
+		}
+	}, [ currentColor, previousColor, opacity ] );
+
+	// For deprecated blocks, that have a default 0.4 css opacity set, we
+	// need to remove this if the current color is changed, or a color is added.
+	// In these instances the opacity attribute is set back to the default of
+	// alpha-channel which allows a new custom opacity to be set via the color picker.
+	useEffect( () => {
+		if (
+			opacity === 'css' &&
+			( ( deprecatedOpacityWithNoColor && currentColor ) ||
+				( previousColor && currentColor !== previousColor ) )
+		) {
+			setAttributes( { opacity: 'alpha-channel' } );
+			setDeprecatedOpacityWithNoColor( false );
+		}
+	}, [ deprecatedOpacityWithNoColor, currentColor, previousColor ] );
+}

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;