@wordpress/block-library 9.37.0 → 9.37.2-next.79a2f3cdd.0

package/src/social-links/edit.js

@@ -182,7 +182,6 @@ export function SocialLinksEdit( props ) {
 					>
 						<SelectControl
 							__next40pxDefaultSize
-							__nextHasNoMarginBottom
 							label={ __( 'Icon size' ) }
 							onChange={ ( newSize ) => {
 								setAttributes( {
@@ -202,7 +201,6 @@ export function SocialLinksEdit( props ) {
 						}
 					>
 						<ToggleControl
-							__nextHasNoMarginBottom
 							label={ __( 'Show text' ) }
 							checked={ showLabels }
 							onChange={ () =>
@@ -219,7 +217,6 @@ export function SocialLinksEdit( props ) {
 						}
 					>
 						<ToggleControl
-							__nextHasNoMarginBottom
 							label={ __( 'Open links in new tab' ) }
 							checked={ openInNewTab }
 							onChange={ () =>

package/src/spacer/transforms.js

@@ -10,7 +10,7 @@ const transforms = {
 			blocks: [ 'core/separator' ], // Transform to Separator.
 			transform: ( { anchor } ) => {
 				return createBlock( 'core/separator', {
-					anchor: anchor || '',
+					anchor: anchor || undefined,
 				} );
 			},
 		},

package/src/style.scss

@@ -37,6 +37,7 @@
 @use "./media-text/style.scss" as *;
 @use "./navigation/style.scss" as *;
 @use "./navigation-link/style.scss" as *;
+@use "./navigation-overlay-close/style.scss" as *;
 @use "./page-list/style.scss" as *;
 @use "./paragraph/style.scss" as *;
 @use "./post-author/style.scss" as *;

package/src/tab/controls.js

@@ -45,7 +45,6 @@ export default function Controls( {
 							} );
 						} }
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 					/>
 					<ToggleControl
 						label={ __( 'Default Tab' ) }
@@ -58,7 +57,6 @@ export default function Controls( {
 						help={ __(
 							'If toggled, this tab will be selected when the page loads.'
 						) }
-						__nextHasNoMarginBottom
 					/>
 				</PanelBody>
 			</InspectorControls>

package/src/table/edit.js

@@ -6,7 +6,13 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import {
+	memo,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import {
 	InspectorControls,
 	BlockControls,
@@ -161,22 +167,25 @@ function TableEdit( {
 	 *
 	 * @param {Array} content A RichText content value.
 	 */
-	function onChange( content ) {
-		if ( ! selectedCell ) {
-			return;
-		}
-
-		setAttributes(
-			updateSelectedCell(
-				attributes,
-				selectedCell,
-				( cellAttributes ) => ( {
-					...cellAttributes,
-					content,
-				} )
-			)
-		);
-	}
+	const onChange = useCallback(
+		function ( content ) {
+			if ( ! selectedCell ) {
+				return;
+			}
+
+			setAttributes( ( currentAttributes ) =>
+				updateSelectedCell(
+					currentAttributes,
+					selectedCell,
+					( cellAttributes ) => ( {
+						...cellAttributes,
+						content,
+					} )
+				)
+			);
+		},
+		[ selectedCell, setAttributes ]
+	);
 
 	/**
 	 * Align text within the a column.
@@ -407,47 +416,32 @@ function TableEdit( {
 		<TSection name={ name } key={ name }>
 			{ attributes[ name ].map( ( { cells }, rowIndex ) => (
 				<tr key={ rowIndex }>
-					{ cells.map(
-						(
-							{
-								content,
-								tag: CellTag,
-								scope,
-								align,
-								colspan,
-								rowspan,
-							},
-							columnIndex
-						) => (
-							<CellTag
+					{ cells.map( ( cellProps, columnIndex ) => {
+						const isSelected =
+							selectedCell?.sectionName === name &&
+							selectedCell?.rowIndex === rowIndex &&
+							selectedCell?.columnIndex === columnIndex;
+
+						// Important - the Cell component is memoized to improve typing performance.
+						// ensure all props passed have stable references.
+						return (
+							<Cell
 								key={ columnIndex }
-								scope={ CellTag === 'th' ? scope : undefined }
-								colSpan={ colspan }
-								rowSpan={ rowspan }
-								className={ clsx(
-									{
-										[ `has-text-align-${ align }` ]: align,
-									},
-									'wp-block-table__cell-content'
-								) }
-							>
-								<RichText
-									value={ content }
-									onChange={ onChange }
-									onFocus={ () => {
-										setSelectedCell( {
-											sectionName: name,
-											rowIndex,
-											columnIndex,
-											type: 'cell',
-										} );
-									} }
-									aria-label={ cellAriaLabel[ name ] }
-									placeholder={ placeholder[ name ] }
-								/>
-							</CellTag>
-						)
-					) }
+								name={ name }
+								rowIndex={ rowIndex }
+								columnIndex={ columnIndex }
+								onChange={
+									// Only pass the `onChange` handler to the selectedCell.
+									// Cell components are memoized, so it's best to avoid
+									// passing in a value that will cause all cells to re-render
+									// whenever it changes.
+									isSelected ? onChange : undefined
+								}
+								setSelectedCell={ setSelectedCell }
+								{ ...cellProps }
+							/>
+						);
+					} ) }
 				</tr>
 			) ) }
 		</TSection>
@@ -499,7 +493,6 @@ function TableEdit( {
 						isShownByDefault
 					>
 						<ToggleControl
-							__nextHasNoMarginBottom
 							label={ __( 'Fixed width table cells' ) }
 							checked={ !! hasFixedLayout }
 							onChange={ onChangeFixedLayout }
@@ -516,7 +509,6 @@ function TableEdit( {
 								isShownByDefault
 							>
 								<ToggleControl
-									__nextHasNoMarginBottom
 									label={ __( 'Header section' ) }
 									checked={ !! ( head && head.length ) }
 									onChange={ onToggleHeaderSection }
@@ -531,7 +523,6 @@ function TableEdit( {
 								isShownByDefault
 							>
 								<ToggleControl
-									__nextHasNoMarginBottom
 									label={ __( 'Footer section' ) }
 									checked={ !! ( foot && foot.length ) }
 									onChange={ onToggleFooterSection }
@@ -572,7 +563,6 @@ function TableEdit( {
 						onSubmit={ onCreateTable }
 					>
 						<TextControl
-							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Column count' ) }
@@ -582,7 +572,6 @@ function TableEdit( {
 							className="blocks-table__placeholder-input"
 						/>
 						<TextControl
-							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Row count' ) }
@@ -616,4 +605,47 @@ function TableEdit( {
 	);
 }
 
+const Cell = memo( function ( {
+	tag: CellTag,
+	name,
+	scope,
+	colspan,
+	rowspan,
+	rowIndex,
+	columnIndex,
+	align,
+	content,
+	onChange,
+	setSelectedCell,
+} ) {
+	return (
+		<CellTag
+			scope={ CellTag === 'th' ? scope : undefined }
+			colSpan={ colspan }
+			rowSpan={ rowspan }
+			className={ clsx(
+				{
+					[ `has-text-align-${ align }` ]: align,
+				},
+				'wp-block-table__cell-content'
+			) }
+		>
+			<RichText
+				value={ content }
+				onChange={ onChange }
+				onFocus={ () => {
+					setSelectedCell( {
+						sectionName: name,
+						rowIndex,
+						columnIndex,
+						type: 'cell',
+					} );
+				} }
+				aria-label={ cellAriaLabel[ name ] }
+				placeholder={ placeholder[ name ] }
+			/>
+		</CellTag>
+	);
+} );
+
 export default TableEdit;

package/src/table-of-contents/block.json

@@ -29,6 +29,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"ariaLabel": true,
 		"html": false,
 		"color": {

package/src/table-of-contents/edit.js

@@ -165,7 +165,6 @@ export default function TableOfContentsEdit( {
 					isShownByDefault
 				>
 					<ToggleControl
-						__nextHasNoMarginBottom
 						label={ __( 'Only include current page' ) }
 						checked={ onlyIncludeCurrentPage }
 						onChange={ ( value ) =>
@@ -191,7 +190,6 @@ export default function TableOfContentsEdit( {
 					isShownByDefault
 				>
 					<SelectControl
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						label={ __( 'Include headings down to level' ) }
 						value={ maxLevel || '' }

package/src/tabs/block.json

@@ -91,6 +91,13 @@
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
 		}
 	},
 	"example": {

package/src/tabs/controls.js

@@ -156,7 +156,6 @@ export default function Controls( {
 										: 'vertical',
 							} )
 						}
-						__nextHasNoMarginBottom
 					/>
 					<TextControl
 						label={ __( 'Tabs Title' ) }
@@ -170,7 +169,6 @@ export default function Controls( {
 								metadata: { ...metadata, name: value },
 							} );
 						} }
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 					/>
 				</PanelBody>

package/src/tabs/index.php

@@ -132,6 +132,35 @@ function block_core_tabs_generate_tabs_list_from_innerblocks( array $innerblocks
 	);
 }
 
+/**
+ * Build inline CSS custom properties for border settings.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string Inline CSS string.
+ */
+function block_core_tabs_generate_border_styles( array $attributes ): string {
+	$radius = $attributes['style']['border']['radius'] ?? null;
+
+	if ( empty( $radius ) ) {
+		return '';
+	}
+
+	if ( is_array( $radius ) ) {
+		$radius_value = wp_sprintf(
+			'%s %s %s %s',
+			$radius['topLeft'] ?? '0',
+			$radius['topRight'] ?? '0',
+			$radius['bottomRight'] ?? '0',
+			$radius['bottomLeft'] ?? '0'
+		);
+	} else {
+		$radius_value = $radius;
+	}
+
+	return wp_sprintf( '--tab-border-radius: %s;', (string) $radius_value );
+}
+
 /**
  * Render callback for core/tabs.
  *
@@ -185,6 +214,7 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 	$style  = (string) $tag_processor->get_attribute( 'style' );
 	$style .= block_core_tabs_generate_color_styles( $attributes );
 	$style .= block_core_tabs_generate_gap_styles( $attributes, $is_vertical );
+	$style .= block_core_tabs_generate_border_styles( $attributes );
 	$tag_processor->set_attribute( 'style', $style );
 
 	$updated_content = $tag_processor->get_updated_html();

package/src/tabs/style-engine.js

@@ -95,6 +95,39 @@ function getColorStyles( { attributes } ) {
 	return colorVarMap;
 }
 
+/**
+ * Gets the border styles for the tab block.
+ *
+ * @param {Object} props
+ * @param {Object} props.attributes Block attributes
+ * @return {Object} CSS custom properties for border styles
+ */
+function getBorderStyles( { attributes } ) {
+	const { radius } = attributes?.style?.border || {};
+
+	if ( ! radius ) {
+		return {};
+	}
+
+	let radiusValue = radius;
+
+	if ( typeof radius === 'object' ) {
+		const {
+			topLeft = '0',
+			topRight = '0',
+			bottomRight = '0',
+			bottomLeft = '0',
+		} = radius;
+		radiusValue = `${ topLeft } ${ topRight } ${ bottomRight } ${ bottomLeft }`;
+	}
+
+	const borderMap = {
+		'--tab-border-radius': radiusValue,
+	};
+
+	return borderMap;
+}
+
 /**
  * Injects color CSS custom properties for the tabs block, mirroring the pattern
  * used by gap-styles (scoped to `#block-{ clientId }`). This replaces the prior
@@ -109,10 +142,12 @@ function getColorStyles( { attributes } ) {
 export default function StyleEngine( { attributes, clientId } ) {
 	const gapVarMap = getGapStyles( { attributes } );
 	const colorVarMap = getColorStyles( { attributes } );
+	const borderVarMap = getBorderStyles( { attributes } );
 
 	const styleVarMap = {
 		...gapVarMap,
 		...colorVarMap,
+		...borderVarMap,
 	};
 
 	// Build scoped CSS only for defined values to avoid unnecessary empty declarations.

package/src/tabs/style.scss

@@ -66,6 +66,9 @@
 			border-block-end: var(--tab-underline-width) solid var(--tab-border-color);
 			border-inline-end: var(--tab-side-border-width) solid var(--tab-border-color);
 			border-radius: var(--tab-border-radius);
+			&:focus {
+				outline: none;
+			}
 			&:focus-visible {
 				outline: 2px solid var(--tab-border-color-active);
 				outline-offset: 2px;

package/src/tag-cloud/block.json

@@ -35,6 +35,7 @@
 		{ "name": "outline", "label": "Outline" }
 	],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"align": true,
 		"spacing": {
@@ -64,6 +65,5 @@
 				"style": true
 			}
 		}
-	},
-	"editorStyle": "wp-block-tag-cloud-editor"
+	}
 }

package/src/tag-cloud/edit.js

@@ -6,28 +6,30 @@ import {
 	FlexItem,
 	ToggleControl,
 	SelectControl,
+	Spinner,
 	RangeControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	Disabled,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	InspectorControls,
 	useBlockProps,
 	useSettings,
 } from '@wordpress/block-editor';
-import ServerSideRender from '@wordpress/server-side-render';
 import { store as coreStore } from '@wordpress/core-data';
+import { useServerSideRender } from '@wordpress/server-side-render';
+import { useDisabled } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import HtmlRenderer from '../utils/html-renderer';
 
 /**
  * Minimum number of tags a user can show using this block.
@@ -46,7 +48,7 @@ const MAX_TAGS = 100;
 const MIN_FONT_SIZE = 0.1;
 const MAX_FONT_SIZE = 100;
 
-function TagCloudEdit( { attributes, setAttributes } ) {
+function TagCloudEdit( { attributes, setAttributes, name } ) {
 	const {
 		taxonomy,
 		showTagCounts,
@@ -113,15 +115,6 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 		setAttributes( updateObj );
 	};
 
-	// Remove border styles from the server-side attributes to prevent duplicate border.
-	const serverSideAttributes = {
-		...attributes,
-		style: {
-			...attributes?.style,
-			border: undefined,
-		},
-	};
-
 	const inspectorControls = (
 		<InspectorControls>
 			<ToolsPanel
@@ -146,7 +139,6 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					isShownByDefault
 				>
 					<SelectControl
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						label={ __( 'Taxonomy' ) }
 						options={ getTaxonomyOptions() }
@@ -211,7 +203,6 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					isShownByDefault
 				>
 					<RangeControl
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						label={ __( 'Number of tags' ) }
 						value={ numberOfTags }
@@ -232,7 +223,6 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					isShownByDefault
 				>
 					<ToggleControl
-						__nextHasNoMarginBottom
 						label={ __( 'Show tag counts' ) }
 						checked={ showTagCounts }
 						onChange={ () =>
@@ -244,18 +234,37 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 		</InspectorControls>
 	);
 
+	const { content, status, error } = useServerSideRender( {
+		attributes,
+		skipBlockSupportAttributes: true,
+		block: name,
+	} );
+
+	const disabledRef = useDisabled();
+	const blockProps = useBlockProps( { ref: disabledRef } );
+
 	return (
 		<>
 			{ inspectorControls }
-			<div { ...useBlockProps() }>
-				<Disabled>
-					<ServerSideRender
-						skipBlockSupportAttributes
-						block="core/tag-cloud"
-						attributes={ serverSideAttributes }
-					/>
-				</Disabled>
-			</div>
+			{ status === 'loading' && (
+				<div { ...blockProps }>
+					<Spinner />
+				</div>
+			) }
+			{ status === 'error' && (
+				<div { ...blockProps }>
+					<p>
+						{ sprintf(
+							/* translators: %s: error message returned when rendering the block. */
+							__( 'Error: %s' ),
+							error
+						) }
+					</p>
+				</div>
+			) }
+			{ status === 'success' && (
+				<HtmlRenderer wrapperProps={ blockProps } html={ content } />
+			) }
 		</>
 	);
 }

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

@@ -58,7 +58,6 @@ export function TemplatePartAdvancedControls( {
 				<>
 					<TextControl
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						value={ title }
 						onChange={ ( value ) => {
@@ -68,7 +67,6 @@ export function TemplatePartAdvancedControls( {
 					/>
 					<SelectControl
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }

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

@@ -148,7 +148,6 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 						onChange={ ( value ) => setSelectedSidebar( value ) }
 						disabled={ ! options.length }
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 					/>
 				</FlexBlock>
 				<FlexItem

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

@@ -75,7 +75,6 @@ export default function TemplatePartSelectionModal( {
 		<div className="block-library-template-part__selection-content">
 			<div className="block-library-template-part__selection-search">
 				<SearchControl
-					__nextHasNoMarginBottom
 					onChange={ setSearchValue }
 					value={ searchValue }
 					label={ __( 'Search' ) }

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

@@ -39,7 +39,6 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 						value={ title }
 						onChange={ setTitle }
 						placeholder={ __( 'Custom Template Part' ) }
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 					/>
 					<HStack justify="right">

package/src/template-part/index.php

@@ -22,7 +22,7 @@ function render_block_core_template_part( $attributes ) {
 	$template_part_id = null;
 	$content          = null;
 	$area             = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
-	$theme            = isset( $attributes['theme'] ) ? $attributes['theme'] : get_stylesheet();
+	$theme            = $attributes['theme'] ?? get_stylesheet();
 
 	if ( isset( $attributes['slug'] ) && get_stylesheet() === $theme ) {
 		$template_part_id    = $theme . '//' . $attributes['slug'];
@@ -260,7 +260,7 @@ function build_template_part_block_instance_variations() {
 				'area'  => $template_part->area,
 			),
 			'scope'       => array( 'inserter' ),
-			'icon'        => isset( $icon_by_area[ $template_part->area ] ) ? $icon_by_area[ $template_part->area ] : null,
+			'icon'        => $icon_by_area[ $template_part->area ] ?? null,
 			'example'     => array(
 				'attributes' => array(
 					'slug'  => $template_part->slug,

package/src/term-count/block.json

@@ -15,6 +15,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/term-description/block.json

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

package/src/term-name/block.json

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

package/src/term-name/edit.js

@@ -95,7 +95,6 @@ export default function TermNameEdit( {
 						isShownByDefault
 					>
 						<ToggleControl
-							__nextHasNoMarginBottom
 							label={ __( 'Make term name a link' ) }
 							onChange={ () =>
 								setAttributes( { isLink: ! isLink } )