@wordpress/block-library 8.2.0 → 8.3.0

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/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 ]
+	);
+};

package/src/query-no-results/block.json

@@ -9,6 +9,7 @@
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
+		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,

package/src/query-no-results/index.php

@@ -40,9 +40,11 @@ function render_block_core_query_no_results( $attributes, $content, $block ) {
 		wp_reset_postdata();
 	}
 
+	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(),
+		$wrapper_attributes,
 		$content
 	);
 }

package/src/query-pagination/block.json

@@ -18,6 +18,7 @@
 		"paginationArrow": "paginationArrow"
 	},
 	"supports": {
+		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,

package/src/query-pagination/edit.js

@@ -9,7 +9,6 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { getBlockSupport } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 
 /**
@@ -28,21 +27,11 @@ const ALLOWED_BLOCKS = [
 	'core/query-pagination-next',
 ];
 
-const getDefaultBlockLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		'__experimentalLayout'
-	);
-	return layoutBlockSupportConfig?.default;
-};
-
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow, layout },
+	attributes: { paginationArrow },
 	setAttributes,
 	clientId,
-	name,
 } ) {
-	const usedLayout = layout || getDefaultBlockLayout( name );
 	const hasNextPreviousBlocks = useSelect( ( select ) => {
 		const { getBlocks } = select( blockEditorStore );
 		const innerBlocks = getBlocks( clientId );
@@ -61,7 +50,6 @@ export default function QueryPaginationEdit( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalLayout: usedLayout,
 	} );
 	return (
 		<>

package/src/query-pagination/index.php

@@ -18,9 +18,11 @@ function render_block_core_query_pagination( $attributes, $content ) {
 		return '';
 	}
 
+	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'aria-label' => __( 'Pagination' ),
+			'class'      => $classes,
 		)
 	);
 

package/src/query-pagination/query-pagination-arrow-controls.js

@@ -10,6 +10,7 @@ import {
 export function QueryPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
+			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }
 			onChange={ onChange }

package/src/query-pagination-next/block.json

@@ -14,6 +14,7 @@
 	},
 	"usesContext": [ "queryId", "query", "paginationArrow" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/query-pagination-numbers/block.json

@@ -9,6 +9,7 @@
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/query-pagination-previous/block.json

@@ -14,6 +14,7 @@
 	},
 	"usesContext": [ "queryId", "query", "paginationArrow" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/query-title/block.json

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

package/src/read-more/block.json

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

package/src/rss/block.json

@@ -43,6 +43,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false
 	},
 	"editorStyle": "wp-block-rss-editor",

package/src/rss/edit.js

@@ -12,9 +12,10 @@ import {
 	PanelBody,
 	Placeholder,
 	RangeControl,
-	TextControl,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalHStack as HStack,
+	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
@@ -66,17 +67,20 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						onSubmit={ onSubmitURL }
 						className="wp-block-rss__placeholder-form"
 					>
-						<TextControl
-							placeholder={ __( 'Enter URL here…' ) }
-							value={ feedURL }
-							onChange={ ( value ) =>
-								setAttributes( { feedURL: value } )
-							}
-							className="wp-block-rss__placeholder-input"
-						/>
-						<Button variant="primary" type="submit">
-							{ __( 'Use URL' ) }
-						</Button>
+						<HStack wrap>
+							<InputControl
+								__next36pxDefaultSize
+								placeholder={ __( 'Enter URL here…' ) }
+								value={ feedURL }
+								onChange={ ( value ) =>
+									setAttributes( { feedURL: value } )
+								}
+								className="wp-block-rss__placeholder-input"
+							/>
+							<Button variant="primary" type="submit">
+								{ __( 'Use URL' ) }
+							</Button>
+						</HStack>
 					</form>
 				</Placeholder>
 			</div>

package/src/rss/editor.scss

@@ -3,9 +3,6 @@
 }
 
 .wp-block-rss__placeholder-form {
-	display: flex;
-	align-items: stretch;
-
 	> * {
 		margin-bottom: $grid-unit-10;
 	}
@@ -15,18 +12,10 @@
 			margin-bottom: 0;
 		}
 	}
-}
 
-.wp-block-rss__placeholder-input {
-	display: flex;
-	align-items: stretch;
-	flex-grow: 1;
-
-	.components-base-control__field {
-		margin: 0;
-		display: flex;
-		align-items: stretch;
-		flex-grow: 1;
-		margin-right: $grid-unit-10;
+	.wp-block-rss__placeholder-input {
+		flex: 1;
+		min-width: 80%;
 	}
 }
+