@wordpress/block-library 8.2.0 → 8.3.1

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,

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

package/src/utils/test/search-patterns.js

@@ -0,0 +1,58 @@
+/**
+ * Internal dependencies
+ */
+import {
+	normalizeSearchInput,
+	getPatternSearchRank,
+	searchPatterns,
+} from '../search-patterns';
+
+describe( 'normalizeSearchInput', () => {
+	it( 'should remove accents', () => {
+		expect( normalizeSearchInput( 'café' ) ).toBe( 'cafe' );
+	} );
+
+	it( 'should trim and lowercase', () => {
+		expect( normalizeSearchInput( '  Foo  ' ) ).toBe( 'foo' );
+	} );
+} );
+
+describe( 'getPatternSearchRank', () => {
+	it( 'should give a high rank to exact matches', () => {
+		const pattern = { title: 'Foo' };
+		expect( getPatternSearchRank( pattern, 'Foo' ) ).toBe( 30 );
+	} );
+
+	it( 'should give a high rank to prefix matches', () => {
+		const pattern = { title: 'Foo' };
+		expect( getPatternSearchRank( pattern, 'Fo' ) ).toBe( 20 );
+	} );
+
+	it( 'should give a low rank to no matches', () => {
+		const pattern = { title: 'Foo' };
+		expect( getPatternSearchRank( pattern, 'Bar' ) ).toBe( 0 );
+	} );
+} );
+
+describe( 'searchPatterns', () => {
+	it( 'should return all patterns if no search term is provided', () => {
+		const patterns = [ { title: 'Foo' }, { title: 'Bar' } ];
+		expect( searchPatterns( patterns, '' ) ).toEqual( patterns );
+	} );
+
+	it( 'should return an empty array if no patterns are provided', () => {
+		expect( searchPatterns( [], 'Foo' ) ).toEqual( [] );
+	} );
+
+	it( 'should return an empty array if no patterns match', () => {
+		const patterns = [ { title: 'Foo' }, { title: 'Bar' } ];
+		expect( searchPatterns( patterns, 'Baz' ) ).toEqual( [] );
+	} );
+
+	it( 'should return the matching patterns', () => {
+		const patterns = [ { title: 'Foo' }, { title: 'Bar' } ];
+		expect( searchPatterns( patterns, 'Foo' ) ).toEqual( [
+			patterns[ 0 ],
+		] );
+	} );
+} );

package/src/video/editor.scss

@@ -71,36 +71,15 @@
 }
 
 .block-library-video-tracks-editor__track-list-track {
-	display: flex;
-	place-content: space-between;
-	align-items: baseline;
 	padding-left: $grid-unit-15;
 }
 
-.block-library-video-tracks-editor__single-track-editor-label-language {
-	display: flex;
-	margin-top: $grid-unit-15;
-	& > .components-base-control {
-		width: 50%;
-	}
-	& > .components-base-control:first-child {
-		margin-right: $grid-unit-20;
-	}
-}
-
 .block-library-video-tracks-editor__single-track-editor-kind-select {
 	max-width: 240px;
 }
 
-.block-library-video-tracks-editor__single-track-editor-buttons-container {
-	display: flex;
-	place-content: space-between;
-	margin-top: $grid-unit-40;
-}
-
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
 	margin-top: $grid-unit-05;
-	margin-bottom: $grid-unit-15;
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
@@ -126,17 +105,3 @@
 	padding: $grid-unit-15;
 }
 
-.block-library-video-tracks-editor__single-track-editor .components-base-control {
-	.components-base-control__label {
-		margin-bottom: $grid-unit-05;
-	}
-	.components-base-control__field {
-		margin-bottom: $grid-unit-15;
-	}
-	.components-text-control__input {
-		margin-left: 0;
-	}
-	.components-input-control__label {
-		margin-bottom: $grid-unit-05;
-	}
-}

package/src/video/tracks-editor.js

@@ -13,6 +13,9 @@ import {
 	Button,
 	TextControl,
 	SelectControl,
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import {
 	MediaUpload,
@@ -49,7 +52,7 @@ function TrackList( { tracks, onEditPress } ) {
 	} else {
 		content = tracks.map( ( track, index ) => {
 			return (
-				<div
+				<HStack
 					key={ index }
 					className="block-library-video-tracks-editor__track-list-track"
 				>
@@ -65,7 +68,7 @@ function TrackList( { tracks, onEditPress } ) {
 					>
 						{ __( 'Edit' ) }
 					</Button>
-				</div>
+				</HStack>
 			);
 		} );
 	}
@@ -84,15 +87,19 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 	const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || '';
 	return (
 		<NavigableMenu>
-			<div className="block-library-video-tracks-editor__single-track-editor">
+			<VStack
+				className="block-library-video-tracks-editor__single-track-editor"
+				spacing="4"
+			>
 				<span className="block-library-video-tracks-editor__single-track-editor-edit-track-label">
 					{ __( 'Edit track' ) }
 				</span>
 				<span>
 					{ __( 'File' ) }: <b>{ fileName }</b>
 				</span>
-				<div className="block-library-video-tracks-editor__single-track-editor-label-language">
+				<Grid columns={ 2 } gap={ 4 }>
 					<TextControl
+						__nextHasNoMarginBottom
 						/* eslint-disable jsx-a11y/no-autofocus */
 						autoFocus
 						/* eslint-enable jsx-a11y/no-autofocus */
@@ -107,6 +114,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						help={ __( 'Title of track' ) }
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						onChange={ ( newSrcLang ) =>
 							onChange( {
 								...track,
@@ -117,54 +125,60 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						value={ srcLang }
 						help={ __( 'Language tag (en, fr, etc.)' ) }
 					/>
-				</div>
-				<SelectControl
-					__nextHasNoMarginBottom
-					className="block-library-video-tracks-editor__single-track-editor-kind-select"
-					options={ KIND_OPTIONS }
-					value={ kind }
-					label={ __( 'Kind' ) }
-					onChange={ ( newKind ) => {
-						onChange( {
-							...track,
-							kind: newKind,
-						} );
-					} }
-				/>
-				<div className="block-library-video-tracks-editor__single-track-editor-buttons-container">
-					<Button
-						variant="secondary"
-						onClick={ () => {
-							const changes = {};
-							let hasChanges = false;
-							if ( label === '' ) {
-								changes.label = __( 'English' );
-								hasChanges = true;
-							}
-							if ( srcLang === '' ) {
-								changes.srcLang = 'en';
-								hasChanges = true;
-							}
-							if ( track.kind === undefined ) {
-								changes.kind = DEFAULT_KIND;
-								hasChanges = true;
-							}
-							if ( hasChanges ) {
-								onChange( {
-									...track,
-									...changes,
-								} );
-							}
-							onClose();
+				</Grid>
+				<VStack spacing="8">
+					<SelectControl
+						__nextHasNoMarginBottom
+						className="block-library-video-tracks-editor__single-track-editor-kind-select"
+						options={ KIND_OPTIONS }
+						value={ kind }
+						label={ __( 'Kind' ) }
+						onChange={ ( newKind ) => {
+							onChange( {
+								...track,
+								kind: newKind,
+							} );
 						} }
-					>
-						{ __( 'Close' ) }
-					</Button>
-					<Button isDestructive variant="link" onClick={ onRemove }>
-						{ __( 'Remove track' ) }
-					</Button>
-				</div>
-			</div>
+					/>
+					<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
+						<Button
+							variant="secondary"
+							onClick={ () => {
+								const changes = {};
+								let hasChanges = false;
+								if ( label === '' ) {
+									changes.label = __( 'English' );
+									hasChanges = true;
+								}
+								if ( srcLang === '' ) {
+									changes.srcLang = 'en';
+									hasChanges = true;
+								}
+								if ( track.kind === undefined ) {
+									changes.kind = DEFAULT_KIND;
+									hasChanges = true;
+								}
+								if ( hasChanges ) {
+									onChange( {
+										...track,
+										...changes,
+									} );
+								}
+								onClose();
+							} }
+						>
+							{ __( 'Close' ) }
+						</Button>
+						<Button
+							isDestructive
+							variant="link"
+							onClick={ onRemove }
+						>
+							{ __( 'Remove track' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</VStack>
 		</NavigableMenu>
 	);
 }