@wordpress/block-library 8.2.0 → 8.3.0

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

package/src/table/transforms.js

@@ -1,3 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeRowColSpan } from './utils';
+
 const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 	tr: {
 		allowEmpty: true,
@@ -5,12 +15,12 @@ const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 			th: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'scope', 'colspan' ],
+				attributes: [ 'scope', 'colspan', 'rowspan' ],
 			},
 			td: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'colspan' ],
+				attributes: [ 'colspan', 'rowspan' ],
 			},
 		},
 	},
@@ -41,6 +51,59 @@ const transforms = {
 			type: 'raw',
 			selector: 'table',
 			schema: tablePasteSchema,
+			transform: ( node ) => {
+				const attributes = Array.from( node.children ).reduce(
+					( sectionAcc, section ) => {
+						if ( ! section.children.length ) {
+							return sectionAcc;
+						}
+
+						const sectionName = section.nodeName
+							.toLowerCase()
+							.slice( 1 );
+
+						const sectionAttributes = Array.from(
+							section.children
+						).reduce( ( rowAcc, row ) => {
+							if ( ! row.children.length ) {
+								return rowAcc;
+							}
+
+							const rowAttributes = Array.from(
+								row.children
+							).reduce( ( colAcc, col ) => {
+								const rowspan = normalizeRowColSpan(
+									col.getAttribute( 'rowspan' )
+								);
+								const colspan = normalizeRowColSpan(
+									col.getAttribute( 'colspan' )
+								);
+
+								colAcc.push( {
+									tag: col.nodeName.toLowerCase(),
+									content: col.innerHTML,
+									rowspan,
+									colspan,
+								} );
+
+								return colAcc;
+							}, [] );
+
+							rowAcc.push( {
+								cells: rowAttributes,
+							} );
+
+							return rowAcc;
+						}, [] );
+
+						sectionAcc[ sectionName ] = sectionAttributes;
+						return sectionAcc;
+					},
+					{}
+				);
+
+				return createBlock( 'core/table', attributes );
+			},
 		},
 	],
 };

package/src/table/utils.js

@@ -0,0 +1,18 @@
+/**
+ * Normalize the rowspan/colspan value.
+ * Returns undefined if the parameter is not a positive number
+ * or the default value (1) for rowspan/colspan.
+ *
+ * @param {number|undefined} rowColSpan rowspan/colspan value.
+ *
+ * @return {string|undefined} normalized rowspan/colspan value.
+ */
+export function normalizeRowColSpan( rowColSpan ) {
+	const parsedValue = parseInt( rowColSpan, 10 );
+	if ( ! Number.isInteger( parsedValue ) ) {
+		return undefined;
+	}
+	return parsedValue < 0 || parsedValue === 1
+		? undefined
+		: parsedValue.toString();
+}

package/src/tag-cloud/block.json

@@ -36,6 +36,7 @@
 	],
 	"supports": {
 		"html": false,
+		"anchor": true,
 		"align": true,
 		"spacing": {
 			"margin": true,

package/src/tag-cloud/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,6 +11,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	Disabled,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -68,15 +64,14 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 			value: '',
 			disabled: true,
 		};
-		const taxonomyOptions = map(
-			taxonomies?.filter( ( tax ) => !! tax.show_cloud ),
-			( item ) => {
+		const taxonomyOptions = ( taxonomies ?? [] )
+			.filter( ( tax ) => !! tax.show_cloud )
+			.map( ( item ) => {
 				return {
 					value: item.slug,
 					label: item.name,
 				};
-			}
-		);
+			} );
 
 		return [ selectOption, ...taxonomyOptions ];
 	};
@@ -169,11 +164,13 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		<>
 			{ inspectorControls }
 			<div { ...useBlockProps() }>
-				<ServerSideRender
-					skipBlockSupportAttributes
-					block="core/tag-cloud"
-					attributes={ attributes }
-				/>
+				<Disabled>
+					<ServerSideRender
+						skipBlockSupportAttributes
+						block="core/tag-cloud"
+						attributes={ attributes }
+					/>
+				</Disabled>
 			</div>
 		</>
 	);

package/src/template-part/block.json

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

package/src/template-part/edit/advanced-controls.js

@@ -71,10 +71,11 @@ export function TemplatePartAdvancedControls( {
 	};
 
 	return (
-		<InspectorControls __experimentalGroup="advanced">
+		<InspectorControls group="advanced">
 			{ isEntityAvailable && (
 				<>
 					<TextControl
+						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						value={ title }
 						onChange={ ( value ) => {

package/src/template-part/edit/index.js

@@ -202,7 +202,6 @@ export default function TemplatePartEdit( {
 						__( 'Choose a %s' ),
 						areaObject.label.toLowerCase()
 					) }
-					closeLabel={ __( 'Cancel' ) }
 					onRequestClose={ () =>
 						setIsTemplatePartSelectionOpen( false )
 					}

package/src/template-part/edit/selection-modal.js

@@ -22,7 +22,7 @@ import {
 	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
 import { createTemplatePartId } from './utils/create-template-part-id';
-import { searchPatterns } from './utils/search';
+import { searchPatterns } from '../../utils/search-patterns';
 
 export default function TemplatePartSelectionModal( {
 	setAttributes,