@wordpress/block-library 8.2.0 → 8.3.1

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/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

@@ -102,6 +102,7 @@ const SocialLinkEdit = ( {
 				>
 					<PanelRow>
 						<TextControl
+							__nextHasNoMarginBottom
 							label={ __( 'Link label' ) }
 							help={ __(
 								'Briefly describe the link to help screen reader users.'
@@ -114,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"
 						}
 					}
 				}

package/src/table/edit.js

@@ -204,7 +204,7 @@ function TableEdit( {
 	/**
 	 * Get the alignment of the currently selected cell.
 	 *
-	 * @return {string} The new alignment to apply to the column.
+	 * @return {string | undefined} The new alignment to apply to the column.
 	 */
 	function getCellAlignment() {
 		if ( ! selectedCell ) {
@@ -404,7 +404,14 @@ function TableEdit( {
 				<tr key={ rowIndex }>
 					{ cells.map(
 						(
-							{ content, tag: CellTag, scope, align, colspan },
+							{
+								content,
+								tag: CellTag,
+								scope,
+								align,
+								colspan,
+								rowspan,
+							},
 							columnIndex
 						) => (
 							<RichText
@@ -418,6 +425,7 @@ function TableEdit( {
 								) }
 								scope={ CellTag === 'th' ? scope : undefined }
 								colSpan={ colspan }
+								rowSpan={ rowspan }
 								value={ content }
 								onChange={ onChange }
 								unstableOnFocus={ () => {
@@ -464,30 +472,32 @@ function TableEdit( {
 					</BlockControls>
 				</>
 			) }
-			{ ! isEmpty && (
-				<InspectorControls>
-					<PanelBody
-						title={ __( 'Settings' ) }
-						className="blocks-table-settings"
-					>
-						<ToggleControl
-							label={ __( 'Fixed width table cells' ) }
-							checked={ !! hasFixedLayout }
-							onChange={ onChangeFixedLayout }
-						/>
-						<ToggleControl
-							label={ __( 'Header section' ) }
-							checked={ !! ( head && head.length ) }
-							onChange={ onToggleHeaderSection }
-						/>
-						<ToggleControl
-							label={ __( 'Footer section' ) }
-							checked={ !! ( foot && foot.length ) }
-							onChange={ onToggleFooterSection }
-						/>
-					</PanelBody>
-				</InspectorControls>
-			) }
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Settings' ) }
+					className="blocks-table-settings"
+				>
+					<ToggleControl
+						label={ __( 'Fixed width table cells' ) }
+						checked={ !! hasFixedLayout }
+						onChange={ onChangeFixedLayout }
+					/>
+					{ ! isEmpty && (
+						<>
+							<ToggleControl
+								label={ __( 'Header section' ) }
+								checked={ !! ( head && head.length ) }
+								onChange={ onToggleHeaderSection }
+							/>
+							<ToggleControl
+								label={ __( 'Footer section' ) }
+								checked={ !! ( foot && foot.length ) }
+								onChange={ onToggleFooterSection }
+							/>
+						</>
+					) }
+				</PanelBody>
+			</InspectorControls>
 			{ ! isEmpty && (
 				<table
 					className={ classnames(
@@ -539,6 +549,7 @@ function TableEdit( {
 						onSubmit={ onCreateTable }
 					>
 						<TextControl
+							__nextHasNoMarginBottom
 							type="number"
 							label={ __( 'Column count' ) }
 							value={ initialColumnCount }
@@ -547,6 +558,7 @@ function TableEdit( {
 							className="blocks-table__placeholder-input"
 						/>
 						<TextControl
+							__nextHasNoMarginBottom
 							type="number"
 							label={ __( 'Row count' ) }
 							value={ initialRowCount }

package/src/table/editor.scss

@@ -1,5 +1,4 @@
 .wp-block-table {
-
 	// Remove default <figure> style.
 	margin: 0;
 
@@ -82,9 +81,4 @@
 	input {
 		height: $button-size;
 	}
-
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
 }

package/src/table/save.js

@@ -44,7 +44,14 @@ export default function save( { attributes } ) {
 					<tr key={ rowIndex }>
 						{ cells.map(
 							(
-								{ content, tag, scope, align, colspan },
+								{
+									content,
+									tag,
+									scope,
+									align,
+									colspan,
+									rowspan,
+								},
 								cellIndex
 							) => {
 								const cellClasses = classnames( {
@@ -66,6 +73,7 @@ export default function save( { attributes } ) {
 											tag === 'th' ? scope : undefined
 										}
 										colSpan={ colspan }
+										rowSpan={ rowspan }
 									/>
 								);
 							}

package/src/table/state.js

@@ -30,7 +30,7 @@ export function createTable( { rowCount, columnCount } ) {
  *
  * @param {Object} state Current table state.
  *
- * @return {Object} The first table row.
+ * @return {Object | undefined} The first table row.
  */
 export function getFirstRow( state ) {
 	if ( ! isEmptyTableSection( state.head ) ) {

package/src/table/test/utils.js

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeRowColSpan } from '../utils';
+
+describe( 'normalizeRowColSpan', () => {
+	it( 'should convert a value to a string', () => {
+		expect( normalizeRowColSpan( 2 ) ).toBe( '2' );
+		expect( normalizeRowColSpan( '2' ) ).toBe( '2' );
+		expect( normalizeRowColSpan( 2.55 ) ).toBe( '2' );
+		expect( normalizeRowColSpan( '2.55' ) ).toBe( '2' );
+	} );
+
+	it( 'should return undefined for values not allowed as the rowspan/colspan attributes', () => {
+		expect( normalizeRowColSpan( -2 ) ).toBe( undefined );
+		expect( normalizeRowColSpan( '-2' ) ).toBe( undefined );
+		expect( normalizeRowColSpan( 1 ) ).toBe( undefined );
+		expect( normalizeRowColSpan( '1' ) ).toBe( undefined );
+	} );
+} );