@wordpress/block-library 7.19.0 → 8.0.0

package/src/post-featured-image/index.php

@@ -19,14 +19,19 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
+	// Check is needed for backward compatibility with third-party plugins
+	// that might rely on the `in_the_loop` check; calling `the_post` sets it to true.
+	if ( ! in_the_loop() && have_posts() ) {
+		the_post();
+	}
+
 	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
 	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
-		$attr['alt'] = $post_title;
+		$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
 	}
 
 	if ( ! empty( $attributes['height'] ) ) {

package/src/post-featured-image/overlay.js

@@ -98,6 +98,7 @@ const Overlay = ( {
 					panelId={ clientId }
 				>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Overlay opacity' ) }
 						value={ dimRatio }
 						onChange={ ( newDimRatio ) =>

package/src/post-template/block.json

@@ -22,6 +22,14 @@
 		"__experimentalLayout": {
 			"allowEditing": false
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/preformatted/transforms.js

@@ -34,7 +34,10 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				createBlock( 'core/paragraph', attributes ),
+				createBlock( 'core/paragraph', {
+					...attributes,
+					content: attributes.content.replace( /\n/g, '<br>' ),
+				} ),
 		},
 		{
 			type: 'block',

package/src/query/block.json

@@ -50,14 +50,6 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"color": {
-			"gradients": true,
-			"link": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true
-			}
-		},
 		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-query-editor"

package/src/query/deprecated.js

@@ -1,12 +1,18 @@
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import cleanEmptyObject from '../utils/clean-empty-object';
+
 const migrateToTaxQuery = ( attributes ) => {
 	const { query } = attributes;
 	const { categoryIds, tagIds, ...newQuery } = query;
@@ -25,106 +31,271 @@ const migrateToTaxQuery = ( attributes ) => {
 	};
 };
 
-const deprecated = [
-	// Version with `categoryIds and tagIds`.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
-			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
-			},
-			tagName: {
-				type: 'string',
-				default: 'div',
+const migrateColors = ( attributes, innerBlocks ) => {
+	// Remove color style attributes from the Query block.
+	const { style, backgroundColor, gradient, textColor, ...newAttributes } =
+		attributes;
+
+	const hasColorStyles =
+		backgroundColor ||
+		gradient ||
+		textColor ||
+		style?.color ||
+		style?.elements?.link;
+
+	// If the query block doesn't currently have any color styles,
+	// nothing needs migrating.
+	if ( ! hasColorStyles ) {
+		return [ attributes, innerBlocks ];
+	}
+
+	// Clean color values from style attribute object.
+	if ( style ) {
+		newAttributes.style = cleanEmptyObject( {
+			...style,
+			color: undefined,
+			elements: {
+				...style.elements,
+				link: undefined,
 			},
-			displayLayout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+		} );
+	}
+
+	// If the inner blocks are already wrapped in a single group
+	// block, add the color support styles to that group block.
+	if ( hasSingleInnerGroupBlock( innerBlocks ) ) {
+		const groupBlock = innerBlocks[ 0 ];
+
+		// Create new styles for the group block.
+		const hasStyles =
+			style?.color ||
+			style?.elements?.link ||
+			groupBlock.attributes.style;
+
+		const newStyles = hasStyles
+			? cleanEmptyObject( {
+					...groupBlock.attributes.style,
+					color: style?.color,
+					elements: style?.elements?.link
+						? { link: style?.elements?.link }
+						: undefined,
+			  } )
+			: undefined;
+
+		// Create a new Group block from the original.
+		const updatedGroupBlock = createBlock(
+			'core/group',
+			{
+				...groupBlock.attributes,
+				backgroundColor,
+				gradient,
+				textColor,
+				style: newStyles,
 			},
+			groupBlock.innerBlocks
+		);
+
+		return [ newAttributes, [ updatedGroupBlock ] ];
+	}
+
+	// When we don't have a single wrapping group block for the inner
+	// blocks, wrap the current inner blocks in a group applying the
+	// color styles to that.
+	const newGroupBlock = createBlock(
+		'core/group',
+		{
+			backgroundColor,
+			gradient,
+			textColor,
+			style: cleanEmptyObject( {
+				color: style?.color,
+				elements: style?.elements?.link
+					? { link: style?.elements?.link }
+					: undefined,
+			} ),
+		},
+		innerBlocks
+	);
+
+	return [ newAttributes, [ newGroupBlock ] ];
+};
+
+const hasSingleInnerGroupBlock = ( innerBlocks = [] ) =>
+	innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group';
+
+// Version with NO wrapper `div` element.
+const v1 = {
+	attributes: {
+		queryId: {
+			type: 'number',
 		},
-		supports: {
-			align: [ 'wide', 'full' ],
-			html: false,
-			color: {
-				gradients: true,
-				link: true,
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
-			__experimentalLayout: true,
 		},
-		isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
-			categoryIds || tagIds,
-		migrate: migrateToTaxQuery,
-		save( { attributes: { tagName: Tag = 'div' } } ) {
-			const blockProps = useBlockProps.save();
-			const innerBlocksProps = useInnerBlocksProps.save( blockProps );
-			return <Tag { ...innerBlocksProps } />;
+		layout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
 	},
-	// Version with NO wrapper `div` element.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
+	supports: {
+		html: false,
+	},
+	migrate( attributes ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		const { layout, ...restWithTaxQuery } = withTaxQuery;
+		return {
+			...restWithTaxQuery,
+			displayLayout: withTaxQuery.layout,
+		};
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+};
+
+// Version with `categoryIds and tagIds`.
+const v2 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
 			},
-			layout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+		},
+		__experimentalLayout: true,
+	},
+	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
+		categoryIds || tagIds,
+	migrate( attributes, innerBlocks ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		return migrateColors( withTaxQuery, innerBlocks );
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+// Version with color support prior to moving it to the PostTemplate block.
+const v3 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
+				taxQuery: null,
+				parents: [],
 			},
 		},
-		supports: {
-			html: false,
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
-		migrate( attributes ) {
-			const withTaxQuery = migrateToTaxQuery( attributes );
-			const { layout, ...restWithTaxQuery } = withTaxQuery;
-			return {
-				...restWithTaxQuery,
-				displayLayout: withTaxQuery.layout,
-			};
+		namespace: {
+			type: 'string',
 		},
-		save() {
-			return <InnerBlocks.Content />;
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
 		},
+		__experimentalLayout: true,
+	},
+	isEligible( attributes ) {
+		const { style, backgroundColor, gradient, textColor } = attributes;
+		return (
+			backgroundColor ||
+			gradient ||
+			textColor ||
+			style?.color ||
+			style?.elements?.link
+		);
 	},
-];
+	migrate: migrateColors,
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+const deprecated = [ v3, v2, v1 ];
 
 export default deprecated;

package/src/query/edit/inspector-controls/index.js

@@ -141,6 +141,7 @@ export default function QueryInspectorControls( {
 						{ showColumnsControl && (
 							<>
 								<RangeControl
+									__nextHasNoMarginBottom
 									label={ __( 'Columns' ) }
 									value={ displayLayout.columns }
 									onChange={ ( value ) =>

package/src/query/edit/query-placeholder.js

@@ -104,20 +104,8 @@ function QueryVariationPicker( {
 	icon,
 	label,
 } ) {
-	const { defaultVariation, scopeVariations } = useSelect(
-		( select ) => {
-			const {
-				getBlockVariations,
-				getBlockType,
-				getDefaultBlockVariation,
-			} = select( blocksStore );
-
-			return {
-				blockType: getBlockType( name ),
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				scopeVariations: getBlockVariations( name, 'block' ),
-			};
-		},
+	const variations = useSelect(
+		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
 		[ name ]
 	);
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
@@ -127,8 +115,8 @@ function QueryVariationPicker( {
 			<__experimentalBlockVariationPicker
 				icon={ icon }
 				label={ label }
-				variations={ scopeVariations }
-				onSelect={ ( nextVariation = defaultVariation ) => {
+				variations={ variations }
+				onSelect={ ( nextVariation ) => {
 					if ( nextVariation.attributes ) {
 						setAttributes( {
 							...nextVariation.attributes,

package/src/rss/edit.js

@@ -111,6 +111,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Number of items' ) }
 						value={ itemsToShow }
 						onChange={ ( value ) =>
@@ -137,6 +138,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					/>
 					{ displayExcerpt && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Max number of words in excerpt' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -149,6 +151,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					) }
 					{ blockLayout === 'grid' && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Columns' ) }
 							value={ columns }
 							onChange={ ( value ) =>

package/src/search/edit.native.js

@@ -42,6 +42,36 @@ const BUTTON_OPTIONS = [
 	{ value: 'no-button', label: __( 'No button' ) },
 ];
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
 export default function SearchEdit( {
 	onFocus,
 	isSelected,
@@ -57,8 +87,7 @@ export default function SearchEdit( {
 		useState( false );
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const textInputRef = useRef( null );
 
@@ -71,31 +100,6 @@ export default function SearchEdit( {
 		buttonText,
 	} = attributes;
 
-	/*
-	 * Check if screenreader is enabled and save to state. This is important for
-	 * properly creating accessibilityLabel text.
-	 */
-	useEffect( () => {
-		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			handleScreenReaderToggled
-		);
-
-		AccessibilityInfo.isScreenReaderEnabled().then(
-			( screenReaderEnabled ) => {
-				setIsScreenReaderEnabled( screenReaderEnabled );
-			}
-		);
-
-		return () => {
-			a11yInfoChangeSubscription.remove();
-		};
-	}, [] );
-
-	const handleScreenReaderToggled = ( screenReaderEnabled ) => {
-		setIsScreenReaderEnabled( screenReaderEnabled );
-	};
-
 	/*
 	 * Called when the value of isSelected changes. Blurs the PlainText component
 	 * used by the placeholder when this block loses focus.

package/src/search/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { search as icon } from '@wordpress/icons';
 
 /**
@@ -17,7 +18,10 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
+		viewportWidth: 400,
+	},
 	variations,
 	edit,
 };

package/src/shortcode/test/edit.native.js

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	getEditorHtml,
-	initializeEditor,
-	fireEvent,
-	waitFor,
-} from 'test/helpers';
+import { getEditorHtml, initializeEditor, fireEvent } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -28,12 +23,11 @@ afterAll( () => {
 
 describe( 'Shortcode block', () => {
 	it( 'inserts block', async () => {
-		const { getByLabelText, getByTestId, getByText } =
-			await initializeEditor();
+		const screen = await initializeEditor();
 
-		fireEvent.press( getByLabelText( 'Add block' ) );
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
 			nativeEvent: {
@@ -43,22 +37,25 @@ describe( 'Shortcode block', () => {
 			},
 		} );
 
-		fireEvent.press( await waitFor( () => getByText( 'Shortcode' ) ) );
+		fireEvent.press( await screen.findByText( 'Shortcode' ) );
 
-		expect( getByLabelText( /Shortcode Block\. Row 1/ ) ).toBeVisible();
+		const [ shortcodeBlock ] = screen.getAllByLabelText(
+			/Shortcode Block\. Row 1/
+		);
+		expect( shortcodeBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'edits content', async () => {
-		const { getByLabelText, getByPlaceholderText } = await initializeEditor(
-			{
-				initialHtml: '<!-- wp:shortcode /-->',
-			}
+		const screen = await initializeEditor( {
+			initialHtml: '<!-- wp:shortcode /-->',
+		} );
+		const [ shortcodeBlock ] = screen.getAllByLabelText(
+			/Shortcode Block\. Row 1/
 		);
-		const shortcodeBlock = getByLabelText( /Shortcode Block\. Row 1/ );
 		fireEvent.press( shortcodeBlock );
 
-		const textField = getByPlaceholderText( 'Add a shortcode…' );
+		const textField = screen.getByPlaceholderText( 'Add a shortcode…' );
 		fireEvent( textField, 'focus' );
 		fireEvent( textField, 'onChange', {
 			nativeEvent: {