@wordpress/block-library 8.1.0 → 8.3.0

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

package/src/rss/index.php

@@ -48,7 +48,7 @@ function render_block_core_rss( $attributes ) {
 			if ( $date ) {
 				$date = sprintf(
 					'<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
-					esc_attr( date_i18n( get_option( 'c' ), $date ) ),
+					esc_attr( date_i18n( 'c', $date ) ),
 					esc_attr( date_i18n( get_option( 'date_format' ), $date ) )
 				);
 			}

package/src/search/block.json

@@ -46,6 +46,7 @@
 	},
 	"supports": {
 		"align": [ "left", "center", "right" ],
+		"anchor": true,
 		"color": {
 			"gradients": true,
 			"__experimentalSkipSerialization": true,

package/src/search/index.php

@@ -66,14 +66,14 @@ function render_block_core_search( $attributes ) {
 
 	if ( $show_input ) {
 		$input_classes = array( 'wp-block-search__input' );
-		if ( $is_button_inside ) {
+		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
 			$input_classes[] = $border_color_classes;
 		}
 		if ( ! empty( $typography_classes ) ) {
 			$input_classes[] = $typography_classes;
 		}
 		$input_markup = sprintf(
-			'<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />',
+			'<input type="search" id="%s" class="%s" name="s" value="%s" placeholder="%s" %s required />',
 			$input_id,
 			esc_attr( implode( ' ', $input_classes ) ),
 			get_search_query(),

package/src/site-logo/block.json

@@ -31,6 +31,7 @@
 	},
 	"supports": {
 		"html": false,
+		"anchor": true,
 		"align": true,
 		"alignWide": false,
 		"color": {

package/src/site-logo/edit.js

@@ -34,7 +34,6 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalImageEditor as ImageEditor,
-	__experimentalImageEditingProvider as ImageEditingProvider,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -219,27 +218,21 @@ const SiteLogo = ( {
 
 	const imgEdit =
 		canEditImage && isEditingImage ? (
-			<ImageEditingProvider
+			<ImageEditor
 				id={ logoId }
 				url={ logoUrl }
-				naturalWidth={ naturalWidth }
-				naturalHeight={ naturalHeight }
+				width={ currentWidth }
+				height={ currentHeight }
 				clientWidth={ clientWidth }
+				naturalHeight={ naturalHeight }
+				naturalWidth={ naturalWidth }
 				onSaveImage={ ( imageAttributes ) => {
 					setLogo( imageAttributes.id );
 				} }
-				isEditing={ isEditingImage }
-				onFinishEditing={ () => setIsEditingImage( false ) }
-			>
-				<ImageEditor
-					url={ logoUrl }
-					width={ currentWidth }
-					height={ currentHeight }
-					clientWidth={ clientWidth }
-					naturalHeight={ naturalHeight }
-					naturalWidth={ naturalWidth }
-				/>
-			</ImageEditingProvider>
+				onFinishEditing={ () => {
+					setIsEditingImage( false );
+				} }
+			/>
 		) : (
 			<ResizableBox
 				size={ {

package/src/site-tagline/block.json

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

package/src/site-title/block.json

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

package/src/site-title/index.php

@@ -18,8 +18,11 @@ function render_block_core_site_title( $attributes ) {
 		return;
 	}
 
-	$tag_name         = 'h1';
-	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	$tag_name = 'h1';
+	$classes  = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes .= ' has-link-color';
+	}
 
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
@@ -37,7 +40,7 @@ function render_block_core_site_title( $attributes ) {
 			esc_html( $site_title )
 		);
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classes ) ) );
 
 	return sprintf(
 		'<%1$s %2$s>%3$s</%1$s>',

package/src/social-link/block.json

@@ -28,6 +28,7 @@
 		"iconBackgroundColorValue"
 	],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false
 	},

package/src/social-link/edit.js

@@ -43,6 +43,7 @@ const SocialLinkURLPopover = ( {
 		>
 			<div className="block-editor-url-input">
 				<URLInput
+					__nextHasNoMarginBottom
 					value={ url }
 					onChange={ ( nextURL ) =>
 						setAttributes( { url: nextURL } )
@@ -101,11 +102,12 @@ const SocialLinkEdit = ( {
 				>
 					<PanelRow>
 						<TextControl
+							__nextHasNoMarginBottom
 							label={ __( 'Link label' ) }
 							help={ __(
 								'Briefly describe the link to help screen reader users.'
 							) }
-							value={ label }
+							value={ label || '' }
 							onChange={ ( value ) =>
 								setAttributes( { label: value } )
 							}
@@ -113,8 +115,9 @@ const SocialLinkEdit = ( {
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
 					onChange={ ( value ) => setAttributes( { rel: value } ) }

package/src/social-links/edit.js

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlockSupport } from '@wordpress/blocks';
 import { useEffect, useRef } from '@wordpress/element';
 import {
 	BlockControls,
@@ -37,18 +36,9 @@ const sizeOptions = [
 	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
 ];
 
-const getDefaultBlockLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		'__experimentalLayout'
-	);
-	return layoutBlockSupportConfig?.default;
-};
-
 export function SocialLinksEdit( props ) {
 	const {
 		clientId,
-		name,
 		attributes,
 		iconBackgroundColor,
 		iconColor,
@@ -65,9 +55,7 @@ export function SocialLinksEdit( props ) {
 		openInNewTab,
 		showLabels,
 		size,
-		layout,
 	} = attributes;
-	const usedLayout = layout || getDefaultBlockLayout( name );
 
 	const logosOnly = attributes.className?.includes( 'is-style-logos-only' );
 
@@ -122,7 +110,6 @@ export function SocialLinksEdit( props ) {
 		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
 		templateLock: false,
 		__experimentalAppenderTagName: 'li',
-		__experimentalLayout: usedLayout,
 	} );
 
 	const POPOVER_PROPS = {
@@ -224,7 +211,7 @@ export function SocialLinksEdit( props ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
+			<InspectorControls group="color">
 				{ colorSettings.map(
 					( { onChange, label, value, resetAllFilter } ) => (
 						<ColorGradientSettingsDropdown

package/src/table/block.json

@@ -52,6 +52,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}
@@ -92,6 +97,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}
@@ -132,6 +142,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}