@wordpress/block-library 8.1.0 → 8.3.0

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(
@@ -510,6 +520,7 @@ function TableEdit( {
 			) }
 			{ ! isEmpty && (
 				<RichText
+					identifier="caption"
 					tagName="figcaption"
 					className={ __experimentalGetElementClassName( 'caption' ) }
 					aria-label={ __( 'Table caption text' ) }
@@ -538,6 +549,7 @@ function TableEdit( {
 						onSubmit={ onCreateTable }
 					>
 						<TextControl
+							__nextHasNoMarginBottom
 							type="number"
 							label={ __( 'Column count' ) }
 							value={ initialColumnCount }
@@ -546,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 ];
 	};
@@ -109,6 +104,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Taxonomy' ) }
 					options={ getTaxonomyOptions() }
 					value={ taxonomy }
@@ -168,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

@@ -49,11 +49,33 @@ export function TemplatePartAdvancedControls( {
 		};
 	}, [] );
 
+	const htmlElementMessages = {
+		header: __(
+			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+		),
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		article: __(
+			'The <article> element should represent a self-contained, syndicatable portion of the document.'
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+		footer: __(
+			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+		),
+	};
+
 	return (
-		<InspectorControls __experimentalGroup="advanced">
+		<InspectorControls group="advanced">
 			{ isEntityAvailable && (
 				<>
 					<TextControl
+						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						value={ title }
 						onChange={ ( value ) => {
@@ -63,6 +85,7 @@ export function TemplatePartAdvancedControls( {
 					/>
 
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }
@@ -72,6 +95,7 @@ export function TemplatePartAdvancedControls( {
 				</>
 			) }
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
 				options={ [
 					{
@@ -92,6 +116,7 @@ export function TemplatePartAdvancedControls( {
 				] }
 				value={ tagName || '' }
 				onChange={ ( value ) => setAttributes( { tagName: value } ) }
+				help={ htmlElementMessages[ tagName ] }
 			/>
 			{ ! hasInnerBlocks && (
 				<TemplatePartImportControls

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,

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

@@ -5,10 +5,10 @@ import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	TextControl,
-	Flex,
-	FlexItem,
 	Button,
 	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
@@ -28,21 +28,18 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 				__( 'Name and create your new %s' ),
 				areaLabel.toLowerCase()
 			) }
-			closeLabel={ __( 'Cancel' ) }
 			overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
 			onRequestClose={ onClose }
 		>
 			<form onSubmit={ submitForCreation }>
-				<TextControl
-					label={ __( 'Name' ) }
-					value={ title }
-					onChange={ setTitle }
-				/>
-				<Flex
-					className="wp-block-template-part__placeholder-create-new__title-form-actions"
-					justify="flex-end"
-				>
-					<FlexItem>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+					/>
+					<HStack justify="right">
 						<Button
 							variant="primary"
 							type="submit"
@@ -51,8 +48,8 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 						>
 							{ __( 'Create' ) }
 						</Button>
-					</FlexItem>
-				</Flex>
+					</HStack>
+				</VStack>
 			</form>
 		</Modal>
 	);

package/src/template-part/edit/utils/hooks.js

@@ -83,15 +83,10 @@ export function useAlternativeBlockPatterns( area, clientId ) {
 			const blockNameWithArea = area
 				? `core/template-part/${ area }`
 				: 'core/template-part';
-			const {
-				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
-			} = select( blockEditorStore );
+			const { getBlockRootClientId, getPatternsByBlockTypes } =
+				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-			return __experimentalGetPatternsByBlockTypes(
-				blockNameWithArea,
-				rootClientId
-			);
+			return getPatternsByBlockTypes( blockNameWithArea, rootClientId );
 		},
 		[ area, clientId ]
 	);

package/src/template-part/index.php

@@ -126,6 +126,21 @@ function render_block_core_template_part( $attributes ) {
 			'';
 	}
 
+	// Look up area definition.
+	$area_definition = null;
+	$defined_areas   = get_allowed_block_template_part_areas();
+	foreach ( $defined_areas as $defined_area ) {
+		if ( $defined_area['area'] === $area ) {
+			$area_definition = $defined_area;
+			break;
+		}
+	}
+
+	// If $area is not allowed, set it back to the uncategorized default.
+	if ( ! $area_definition ) {
+		$area = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
+	}
+
 	// Run through the actions that are typically taken on the_content.
 	$seen_ids[ $template_part_id ] = true;
 	$content                       = do_blocks( $content );
@@ -133,7 +148,7 @@ function render_block_core_template_part( $attributes ) {
 	$content = wptexturize( $content );
 	$content = convert_smilies( $content );
 	$content = shortcode_unautop( $content );
-	$content = wp_filter_content_tags( $content );
+	$content = wp_filter_content_tags( $content, "template_part_{$area}" );
 	$content = do_shortcode( $content );
 
 	// Handle embeds for block template parts.
@@ -141,12 +156,9 @@ function render_block_core_template_part( $attributes ) {
 	$content = $wp_embed->autoembed( $content );
 
 	if ( empty( $attributes['tagName'] ) ) {
-		$defined_areas = get_allowed_block_template_part_areas();
-		$area_tag      = 'div';
-		foreach ( $defined_areas as $defined_area ) {
-			if ( $defined_area['area'] === $area && isset( $defined_area['area_tag'] ) ) {
-				$area_tag = $defined_area['area_tag'];
-			}
+		$area_tag = 'div';
+		if ( $area_definition && isset( $area_definition['area_tag'] ) ) {
+			$area_tag = $area_definition['area_tag'];
 		}
 		$html_tag = $area_tag;
 	} else {

package/src/term-description/block.json

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

package/src/term-description/index.php

@@ -23,10 +23,14 @@ function render_block_core_term_description( $attributes ) {
 		return '';
 	}
 
-	$extra_attributes   = ( isset( $attributes['textAlign'] ) )
-		? array( 'class' => 'has-text-align-' . $attributes['textAlign'] )
-		: array();
-	$wrapper_attributes = get_block_wrapper_attributes( $extra_attributes );
+	$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 '<div ' . $wrapper_attributes . '>' . $term_description . '</div>';
 }

package/src/utils/init-block.js

@@ -8,7 +8,7 @@ import { registerBlockType } from '@wordpress/blocks';
  *
  * @param {Object} block The block to be registered.
  *
- * @return {?WPBlockType} The block, if it has been successfully registered;
+ * @return {WPBlockType | undefined} The block, if it has been successfully registered;
  *                        otherwise `undefined`.
  */
 export default function initBlock( block ) {

package/src/utils/init-block.native.js

@@ -10,7 +10,7 @@ const ALLOWED_BLOCKS_GRADIENT_SUPPORT = [ 'core/button' ];
  *
  * @param {Object} block The block to be registered.
  *
- * @return {?WPBlockType} The block, if it has been successfully registered;
+ * @return {WPBlockType | undefined} The block, if it has been successfully registered;
  *                        otherwise `undefined`.
  */
 export default function initBlock( block ) {

package/src/{template-part/edit/utils/search.js → utils/search-patterns.js}

@@ -10,7 +10,7 @@ import removeAccents from 'remove-accents';
  *
  * @return {string} The normalized search input.
  */
-function normalizeSearchInput( input = '' ) {
+export function normalizeSearchInput( input = '' ) {
 	// Disregard diacritics.
 	input = removeAccents( input );
 
@@ -27,7 +27,7 @@ function normalizeSearchInput( input = '' ) {
  * @param {string} searchValue Search term
  * @return {number} A pattern search rank
  */
-function getPatternSearchRank( pattern, searchValue ) {
+export function getPatternSearchRank( pattern, searchValue ) {
 	const normalizedSearchValue = normalizeSearchInput( searchValue );
 	const normalizedTitle = normalizeSearchInput( pattern.title );