@wordpress/block-library 8.2.0 → 8.3.1

package/src/post-navigation-link/edit.js

@@ -77,6 +77,7 @@ export default function PostNavigationLinkEdit( {
 						/>
 					) }
 					<ToggleGroupControl
+						__nextHasNoMarginBottom
 						label={ __( 'Arrow' ) }
 						value={ arrow }
 						onChange={ ( value ) => {

package/src/post-template/block.json

@@ -19,6 +19,7 @@
 		"reusable": false,
 		"html": false,
 		"align": true,
+		"anchor": true,
 		"__experimentalLayout": {
 			"allowEditing": false
 		},

package/src/post-template/edit.js

@@ -28,7 +28,7 @@ const TEMPLATE = [
 function PostTemplateInnerBlocks() {
 	const innerBlocksProps = useInnerBlocksProps(
 		{ className: 'wp-block-post' },
-		{ template: TEMPLATE }
+		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
 }
@@ -74,7 +74,7 @@ export default function PostTemplateEdit( {
 	context: {
 		query: {
 			perPage,
-			offset,
+			offset = 0,
 			postType,
 			order,
 			orderBy,
@@ -98,6 +98,7 @@ export default function PostTemplateEdit( {
 		displayLayout: { type: layoutType = 'flex', columns = 1 } = {},
 		previewPostType,
 	},
+	__unstableLayoutClassNames,
 } ) {
 	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
@@ -216,7 +217,7 @@ export default function PostTemplateEdit( {
 	);
 	const hasLayoutFlex = layoutType === 'flex' && columns > 1;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( __unstableLayoutClassNames, {
 			'is-flex-container': hasLayoutFlex,
 			[ `columns-${ columns }` ]: hasLayoutFlex,
 		} ),

package/src/post-template/index.php

@@ -68,8 +68,11 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 			$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
 		}
 	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classnames .= ' has-link-color';
+	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );
 
 	$content = '';
 	while ( $query->have_posts() ) {

package/src/post-terms/block.json

@@ -28,6 +28,7 @@
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-terms/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +17,7 @@ import {
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -83,8 +83,9 @@ export default function PostTermsEdit( {
 					} }
 				/>
 			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Separator' ) }
 					value={ separator || '' }
@@ -119,7 +120,7 @@ export default function PostTermsEdit( {
 								href={ postTerm.link }
 								onClick={ ( event ) => event.preventDefault() }
 							>
-								{ unescape( postTerm.name ) }
+								{ decodeEntities( postTerm.name ) }
 							</a>
 						) )
 						.reduce( ( prev, curr ) => (

package/src/post-terms/index.php

@@ -27,14 +27,17 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$classes = 'taxonomy-' . $attributes['term'];
+	$classes = array( 'taxonomy-' . $attributes['term'] );
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= ' has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
 	$separator = empty( $attributes['separator'] ) ? ' ' : $attributes['separator'];
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	$prefix = "<div $wrapper_attributes>";
 	if ( isset( $attributes['prefix'] ) && $attributes['prefix'] ) {

package/src/post-title/block.json

@@ -31,6 +31,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-title/edit.js

@@ -134,6 +134,7 @@ export default function PostTitleEdit( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
+								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }
 								onChange={ ( newRel ) =>

package/src/post-title/index.php

@@ -26,9 +26,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$tag_name         = 'h2';
-	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-
+	$tag_name = 'h2';
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
 	}
@@ -37,7 +35,15 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
 		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+
+	$classes = array();
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<%1$s %2$s>%3$s</%1$s>',

package/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -28,7 +28,6 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
       }
       disableEditingMenu={false}
       fontFamily="serif"
-      fontSize={16}
       isMultiline={false}
       maxImagesWidth={200}
       onBlur={[Function]}
@@ -75,7 +74,6 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
       }
       disableEditingMenu={false}
       fontFamily="serif"
-      fontSize={16}
       isMultiline={false}
       maxImagesWidth={200}
       onBlur={[Function]}

package/src/query/block.json

@@ -49,6 +49,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
 		"html": false,
 		"__experimentalLayout": true
 	},

package/src/query/deprecated.js

@@ -296,6 +296,82 @@ const v3 = {
 	},
 };
 
-const deprecated = [ v3, v2, v1 ];
+const v4 = {
+	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: [],
+			},
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
+		},
+		namespace: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		__experimentalLayout: true,
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+	isEligible: ( { layout } ) =>
+		! layout ||
+		layout.inherit ||
+		( layout.contentSize && layout.type !== 'constrained' ),
+	migrate: ( attributes ) => {
+		const { layout = null } = attributes;
+		if ( ! layout ) {
+			return attributes;
+		}
+		if ( layout.inherit || layout.contentSize ) {
+			return {
+				...attributes,
+				layout: {
+					...layout,
+					type: 'constrained',
+				},
+			};
+		}
+	},
+};
+
+const deprecated = [ v4, v3, v2, v1 ];
 
 export default deprecated;

package/src/query/edit/index.js

@@ -1,25 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useMemo } from '@wordpress/element';
-import {
-	BlockContextProvider,
-	store as blockEditorStore,
-	__experimentalBlockPatternSetup as BlockPatternSetup,
-} from '@wordpress/block-editor';
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import QueryContent from './query-content';
 import QueryPlaceholder from './query-placeholder';
-import {
-	useBlockNameForPatterns,
-	getTransformedBlocksFromPattern,
-} from '../utils';
+import PatternSelectionModal from './pattern-selection-modal';
 
 const QueryEdit = ( props ) => {
 	const { clientId, attributes } = props;
@@ -52,51 +43,4 @@ const QueryEdit = ( props ) => {
 	);
 };
 
-function PatternSelectionModal( {
-	clientId,
-	attributes,
-	setIsPatternSelectionModalOpen,
-} ) {
-	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
-	const onBlockPatternSelect = ( blocks ) => {
-		const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
-			blocks,
-			attributes
-		);
-		replaceBlock( clientId, newBlocks );
-		if ( queryClientIds[ 0 ] ) {
-			selectBlock( queryClientIds[ 0 ] );
-		}
-	};
-	// When we preview Query Loop blocks we should prefer the current
-	// block's postType, which is passed through block context.
-	const blockPreviewContext = useMemo(
-		() => ( {
-			previewPostType: attributes.query.postType,
-		} ),
-		[ attributes.query.postType ]
-	);
-	const blockNameForPatterns = useBlockNameForPatterns(
-		clientId,
-		attributes
-	);
-	return (
-		<Modal
-			className="block-editor-query-pattern__selection-modal"
-			title={ __( 'Choose a pattern' ) }
-			closeLabel={ __( 'Cancel' ) }
-			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
-		>
-			<BlockContextProvider value={ blockPreviewContext }>
-				<BlockPatternSetup
-					blockName={ blockNameForPatterns }
-					clientId={ clientId }
-					onBlockPatternSelect={ onBlockPatternSelect }
-					showTitles={ true }
-				/>
-			</BlockContextProvider>
-		</Modal>
-	);
-}
-
 export default QueryEdit;

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

@@ -247,6 +247,7 @@ export default function QueryInspectorControls( {
 								onDeselect={ () => setQuerySearch( '' ) }
 							>
 								<TextControl
+									__nextHasNoMarginBottom
 									label={ __( 'Keyword' ) }
 									value={ querySearch }
 									onChange={ setQuerySearch }

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

@@ -23,7 +23,7 @@ const BASE_QUERY = {
 const getTermIdByTermValue = ( terms, termValue ) => {
 	// First we check for exact match by `term.id` or case sensitive `term.name` match.
 	const termId =
-		termValue?.id || terms.find( ( term ) => term.name === termValue )?.id;
+		termValue?.id || terms?.find( ( term ) => term.name === termValue )?.id;
 	if ( termId ) {
 		return termId;
 	}
@@ -38,7 +38,7 @@ const getTermIdByTermValue = ( terms, termValue ) => {
 	 * In this edge case we always apply the first match from the terms list.
 	 */
 	const termValueLower = termValue.toLocaleLowerCase();
-	return terms.find(
+	return terms?.find(
 		( term ) => term.name.toLocaleLowerCase() === termValueLower
 	)?.id;
 };

package/src/query/edit/pattern-selection-modal.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { Modal, SearchControl } from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
+import {
+	BlockContextProvider,
+	store as blockEditorStore,
+	__experimentalBlockPatternsList as BlockPatternsList,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useBlockNameForPatterns,
+	getTransformedBlocksFromPattern,
+	usePatterns,
+} from '../utils';
+import { searchPatterns } from '../../utils/search-patterns';
+
+export default function PatternSelectionModal( {
+	clientId,
+	attributes,
+	setIsPatternSelectionModalOpen,
+} ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
+	const onBlockPatternSelect = ( pattern, blocks ) => {
+		const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
+			blocks,
+			attributes
+		);
+		replaceBlock( clientId, newBlocks );
+		if ( queryClientIds[ 0 ] ) {
+			selectBlock( queryClientIds[ 0 ] );
+		}
+	};
+	// When we preview Query Loop blocks we should prefer the current
+	// block's postType, which is passed through block context.
+	const blockPreviewContext = useMemo(
+		() => ( {
+			previewPostType: attributes.query.postType,
+		} ),
+		[ attributes.query.postType ]
+	);
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
+	const blockPatterns = usePatterns( clientId, blockNameForPatterns );
+	const filteredBlockPatterns = useMemo( () => {
+		return searchPatterns( blockPatterns, searchValue );
+	}, [ blockPatterns, searchValue ] );
+	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
+
+	return (
+		<Modal
+			overlayClassName="block-library-query-pattern__selection-modal"
+			title={ __( 'Choose a pattern' ) }
+			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
+		>
+			<div className="block-library-query-pattern__selection-content">
+				<div className="block-library-query-pattern__selection-search">
+					<SearchControl
+						__nextHasNoMarginBottom
+						onChange={ setSearchValue }
+						value={ searchValue }
+						label={ __( 'Search for patterns' ) }
+						placeholder={ __( 'Search' ) }
+					/>
+				</div>
+				<BlockContextProvider value={ blockPreviewContext }>
+					<BlockPatternsList
+						blockPatterns={ filteredBlockPatterns }
+						shownPatterns={ shownBlockPatterns }
+						onClickPattern={ onBlockPatternSelect }
+					/>
+				</BlockContextProvider>
+			</div>
+		</Modal>
+	);
+}

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

@@ -8,7 +8,6 @@ import {
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
-	useSetting,
 	store as blockEditorStore,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
@@ -36,23 +35,13 @@ export default function QueryContent( {
 		query,
 		displayLayout,
 		tagName: TagName = 'div',
-		layout = {},
 	} = attributes;
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
-	const { themeSupportsLayout } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return { themeSupportsLayout: getSettings()?.supportsLayout };
-	}, [] );
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
 	} );
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -122,7 +111,7 @@ export default function QueryContent( {
 					openPatternSelectionModal={ openPatternSelectionModal }
 				/>
 			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }

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

@@ -34,19 +34,15 @@ export default function QueryPlaceholder( {
 	const { blockType, allVariations, hasPatterns } = useSelect(
 		( select ) => {
 			const { getBlockVariations, getBlockType } = select( blocksStore );
-			const {
-				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
-			} = select( blockEditorStore );
+			const { getBlockRootClientId, getPatternsByBlockTypes } =
+				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
 			return {
 				blockType: getBlockType( name ),
 				allVariations: getBlockVariations( name ),
-				hasPatterns: !! __experimentalGetPatternsByBlockTypes(
-					name,
-					rootClientId
-				).length,
+				hasPatterns: !! getPatternsByBlockTypes( name, rootClientId )
+					.length,
 			};
 		},
 		[ name, clientId ]

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

@@ -11,8 +11,11 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { settings, list, grid } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
 	attributes: { query, displayLayout },
@@ -22,20 +25,7 @@ export default function QueryToolbar( {
 	name,
 	clientId,
 } ) {
-	const hasPatterns = useSelect(
-		( select ) => {
-			const {
-				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
-			return !! __experimentalGetPatternsByBlockTypes(
-				name,
-				rootClientId
-			).length;
-		},
-		[ name, clientId ]
-	);
+	const hasPatterns = !! usePatterns( clientId, name ).length;
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'

package/src/query/editor.scss

@@ -19,28 +19,30 @@
 	}
 }
 
-.block-editor-query-pattern__selection-modal .components-modal__content {
-	padding: 0;
-	margin-bottom: $header-height; // $header-height to accommodate bottom toolbar
-	&::before {
-		margin-bottom: 0;
-	}
-}
-
-.block-editor-query-pattern__selection-modal {
+.block-library-query-pattern__selection-modal {
 	// To keep modal dimensions consistent as subsections are navigated, width
 	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
-	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
+	.components-modal__frame {
+		@include break-small() {
+			width: calc(100% - #{$grid-unit-20 * 2});
+			height: calc(100% - #{$header-height * 2});
+		}
+
+		@include break-medium() {
+			width: $break-medium - $grid-unit-20 * 2;
+		}
+
+		@include break-large() {
+			height: 70%;
+		}
 	}
-	@include break-large() {
-		height: 80%;
-		width: 80%;
-		max-height: none;
+
+	.block-library-query-pattern__selection-search {
+		background: $white;
+		position: sticky;
+		top: 0;
+		padding: $grid-unit-20 0;
+		z-index: z-index(".block-library-query-pattern__selection-search");
 	}
 }
 

package/src/query/utils.js

@@ -247,15 +247,10 @@ export function useBlockNameForPatterns( clientId, attributes ) {
 			if ( ! activeVariationName ) {
 				return;
 			}
-			const {
-				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
-			} = select( blockEditorStore );
+			const { getBlockRootClientId, getPatternsByBlockTypes } =
+				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-			return __experimentalGetPatternsByBlockTypes(
-				blockName,
-				rootClientId
-			);
+			return getPatternsByBlockTypes( blockName, rootClientId );
 		},
 		[ clientId, activeVariationName ]
 	);
@@ -318,3 +313,22 @@ export function useScopedBlockVariations( attributes ) {
 	}, [ activeVariationName, blockVariations ] );
 	return variations;
 }
+
+/**
+ * Hook that returns the block patterns for a specific block type.
+ *
+ * @param {string} clientId The block's client ID.
+ * @param {string} name     The block type name.
+ * @return {Object[]} An array of valid block patterns.
+ */
+export const usePatterns = ( clientId, name ) => {
+	return useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getPatternsByBlockTypes } =
+				select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			return getPatternsByBlockTypes( name, rootClientId );
+		},
+		[ name, clientId ]
+	);
+};