@wordpress/block-library 7.3.10 → 7.6.0

package/src/search/index.php

@@ -86,7 +86,7 @@ function render_block_core_search( $attributes ) {
 			$button_classes .= ' has-icon';
 
 			$button_internal_markup =
-				'<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
+				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
 					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
 				</svg>';
 		}
@@ -171,6 +171,75 @@ function classnames_for_block_core_search( $attributes ) {
 	return implode( ' ', $classnames );
 }
 
+/**
+ * This generates a CSS rule for the given border property and side if provided.
+ * Based on whether the Search block is configured to display the button inside
+ * or not, the generated rule is injected into the appropriate collection of
+ * styles for later application in the block's markup.
+ *
+ * @param array  $attributes     The block attributes.
+ * @param string $property       Border property to generate rule for e.g. width or color.
+ * @param string $side           Optional side border. The dictates the value retrieved and final CSS property.
+ * @param array  $wrapper_styles Current collection of wrapper styles.
+ * @param array  $button_styles  Current collection of button styles.
+ * @param array  $input_styles   Current collection of input styles.
+ *
+ * @return void
+ */
+function apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) {
+	$is_button_inside = 'button-inside' === _wp_array_get( $attributes, array( 'buttonPosition' ), false );
+
+	$path = array( 'style', 'border', $property );
+
+	if ( $side ) {
+		array_splice( $path, 2, 0, $side );
+	}
+
+	$value = _wp_array_get( $attributes, $path, false );
+
+	if ( empty( $value ) ) {
+		return;
+	}
+
+	if ( 'color' === $property && $side ) {
+		$has_color_preset = strpos( $value, 'var:preset|color|' ) !== false;
+		if ( $has_color_preset ) {
+			$named_color_value = substr( $value, strrpos( $value, '|' ) + 1 );
+			$value             = sprintf( 'var(--wp--preset--color--%s)', $named_color_value );
+		}
+	}
+
+	$property_suffix = $side ? sprintf( '%s-%s', $side, $property ) : $property;
+
+	if ( $is_button_inside ) {
+		$wrapper_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
+	} else {
+		$button_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
+		$input_styles[]  = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
+	}
+}
+
+/**
+ * This adds CSS rules for a given border property e.g. width or color. It
+ * injects rules into the provided wrapper, button and input style arrays for
+ * uniform "flat" borders or those with individual sides configured.
+ *
+ * @param array  $attributes     The block attributes.
+ * @param string $property       Border property to generate rule for e.g. width or color.
+ * @param array  $wrapper_styles Current collection of wrapper styles.
+ * @param array  $button_styles  Current collection of button styles.
+ * @param array  $input_styles   Current collection of input styles.
+ *
+ * @return void
+ */
+function apply_block_core_search_border_styles( $attributes, $property, &$wrapper_styles, &$button_styles, &$input_styles ) {
+	apply_block_core_search_border_style( $attributes, $property, null, $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_style( $attributes, $property, 'top', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_style( $attributes, $property, 'right', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_style( $attributes, $property, 'bottom', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_style( $attributes, $property, 'left', $wrapper_styles, $button_styles, $input_styles );
+}
+
 /**
  * Builds an array of inline styles for the search block.
  *
@@ -201,19 +270,10 @@ function styles_for_block_core_search( $attributes ) {
 		);
 	}
 
-	// Add border width styles.
-	$has_border_width = ! empty( $attributes['style']['border']['width'] );
-
-	if ( $has_border_width ) {
-		$border_width = $attributes['style']['border']['width'];
-
-		if ( $is_button_inside ) {
-			$wrapper_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
-		} else {
-			$button_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
-			$input_styles[]  = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
-		}
-	}
+	// Add border width and color styles.
+	apply_block_core_search_border_styles( $attributes, 'width', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_styles( $attributes, 'color', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_styles( $attributes, 'style', $wrapper_styles, $button_styles, $input_styles );
 
 	// Add border radius styles.
 	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
@@ -269,21 +329,6 @@ function styles_for_block_core_search( $attributes ) {
 		}
 	}
 
-	// Add border color styles.
-	$has_border_color = ! empty( $attributes['style']['border']['color'] );
-
-	if ( $has_border_color ) {
-		$border_color = $attributes['style']['border']['color'];
-
-		// Apply wrapper border color if button placed inside.
-		if ( $is_button_inside ) {
-			$wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
-		} else {
-			$button_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
-			$input_styles[]  = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
-		}
-	}
-
 	// Add color styles.
 	$has_text_color = ! empty( $attributes['style']['color']['text'] );
 	if ( $has_text_color ) {
@@ -315,13 +360,19 @@ function styles_for_block_core_search( $attributes ) {
  * @return string The border color classnames to be applied to the block elements.
  */
 function get_border_color_classes_for_block_core_search( $attributes ) {
+	$border_color_classes    = array();
 	$has_custom_border_color = ! empty( $attributes['style']['border']['color'] );
-	$border_color_classes    = ! empty( $attributes['borderColor'] ) ? sprintf( 'has-border-color has-%s-border-color', $attributes['borderColor'] ) : '';
-	// If there's a border color style and no `borderColor` text string, we still want to add the generic `has-border-color` class name to the element.
-	if ( $has_custom_border_color && empty( $attributes['borderColor'] ) ) {
-		$border_color_classes = 'has-border-color';
+	$has_named_border_color  = ! empty( $attributes['borderColor'] );
+
+	if ( $has_custom_border_color || $has_named_border_color ) {
+		$border_color_classes[] = 'has-border-color';
+	}
+
+	if ( $has_named_border_color ) {
+		$border_color_classes[] = sprintf( 'has-%s-border-color', esc_attr( $attributes['borderColor'] ) );
 	}
-	return $border_color_classes;
+
+	return implode( ' ', $border_color_classes );
 }
 
 /**

package/src/separator/block.json

@@ -24,6 +24,9 @@
 			"__experimentalDefaultControls": {
 				"background": true
 			}
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ]
 		}
 	},
 	"styles": [

package/src/separator/editor.scss

@@ -7,5 +7,6 @@
 	// due to the way that color block supports adds additional background color styles.
 	&.wp-block-separator.is-style-dots {
 		background: none !important;
+		border: none;
 	}
 }

package/src/site-logo/edit.js

@@ -469,7 +469,7 @@ export default function LogoEdit( {
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
-		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
 	const controls = canUserEdit && logoUrl && (

package/src/spacer/constants.js

@@ -0,0 +1 @@
+export const MIN_SPACER_SIZE = 0;

package/src/spacer/controls.js

@@ -15,7 +15,7 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { MIN_SPACER_SIZE } from './edit';
+import { MIN_SPACER_SIZE } from './constants';
 
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
@@ -75,7 +75,7 @@ export default function SpacerControls( {
 } ) {
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Spacer settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				{ orientation === 'horizontal' && (
 					<DimensionInput
 						label={ __( 'Width' ) }

package/src/spacer/controls.native.js

@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { MIN_SPACER_SIZE } from './edit.js';
+import { MIN_SPACER_SIZE } from './constants';
 import styles from './style.scss';
 
 const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };

package/src/spacer/edit.js

@@ -15,8 +15,7 @@ import { View } from '@wordpress/primitives';
  * Internal dependencies
  */
 import SpacerControls from './controls';
-
-export const MIN_SPACER_SIZE = 0;
+import { MIN_SPACER_SIZE } from './constants';
 
 const ResizableSpacer = ( {
 	orientation,

package/src/table/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import {
 	InspectorControls,
 	BlockControls,
@@ -25,6 +25,7 @@ import {
 	TextControl,
 	ToggleControl,
 	ToolbarDropdownMenu,
+	__experimentalHasSplitBorders as hasSplitBorders,
 } from '@wordpress/components';
 import {
 	alignLeft,
@@ -39,7 +40,7 @@ import {
 	tableRowDelete,
 	table,
 } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -104,6 +105,9 @@ function TableEdit( {
 	const colorProps = useColorProps( attributes );
 	const borderProps = useBorderProps( attributes );
 
+	const tableRef = useRef();
+	const [ hasTableCreated, setHasTableCreated ] = useState( false );
+
 	/**
 	 * Updates the initial column count used for table creation.
 	 *
@@ -136,6 +140,7 @@ function TableEdit( {
 				columnCount: parseInt( initialColumnCount, 10 ) || 2,
 			} )
 		);
+		setHasTableCreated( true );
 	}
 
 	/**
@@ -340,6 +345,15 @@ function TableEdit( {
 		}
 	}, [ isSelected ] );
 
+	useEffect( () => {
+		if ( hasTableCreated ) {
+			tableRef?.current
+				?.querySelector( 'td[contentEditable="true"]' )
+				?.focus();
+			setHasTableCreated( false );
+		}
+	}, [ hasTableCreated ] );
+
 	const sections = [ 'head', 'body', 'foot' ].filter(
 		( name ) => ! isEmptyTableSection( attributes[ name ] )
 	);
@@ -425,7 +439,7 @@ function TableEdit( {
 	const isEmpty = ! sections.length;
 
 	return (
-		<figure { ...useBlockProps() }>
+		<figure { ...useBlockProps( { ref: tableRef } ) }>
 			{ ! isEmpty && (
 				<>
 					<BlockControls group="block">
@@ -451,7 +465,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<InspectorControls>
 					<PanelBody
-						title={ __( 'Table settings' ) }
+						title={ __( 'Settings' ) }
 						className="blocks-table-settings"
 					>
 						<ToggleControl
@@ -477,7 +491,15 @@ function TableEdit( {
 					className={ classnames(
 						colorProps.className,
 						borderProps.className,
-						{ 'has-fixed-layout': hasFixedLayout }
+						{
+							'has-fixed-layout': hasFixedLayout,
+							// This is required in the editor only to overcome
+							// the fact the editor rewrites individual border
+							// widths into a shorthand format.
+							'has-individual-borders': hasSplitBorders(
+								attributes?.style?.border
+							),
+						}
 					) }
 					style={ { ...colorProps.style, ...borderProps.style } }
 				>
@@ -496,7 +518,9 @@ function TableEdit( {
 					// Deselect the selected table cell when the caption is focused.
 					unstableOnFocus={ () => setSelectedCell() }
 					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter( createBlock( 'core/paragraph' ) )
+						insertBlocksAfter(
+							createBlock( getDefaultBlockName() )
+						)
 					}
 				/>
 			) }

package/src/table/editor.scss

@@ -43,6 +43,19 @@
 	figcaption {
 		@include caption-style-theme();
 	}
+
+	// This is only required in the editor to overcome the fact the editor
+	// rewrites border width styles into shorthand.
+	table.has-individual-borders {
+		> *,
+		tr,
+		th,
+		td {
+			border-width: $border-width;
+			border-style: solid;
+			border-color: currentColor;
+		}
+	}
 }
 
 .blocks-table__placeholder-form.blocks-table__placeholder-form {

package/src/table/style.scss

@@ -112,6 +112,58 @@
 		}
 	}
 
+	table[style*="border-top-color"] {
+		> *,
+		tr:first-child {
+			border-top-color: inherit;
+
+			th,
+			td {
+				border-top-color: inherit;
+			}
+		}
+
+		tr:not(:first-child) {
+			border-top-color: currentColor;
+		}
+	}
+	table[style*="border-right-color"] {
+		> *,
+		tr,
+		th,
+		td:last-child {
+			border-right-color: inherit;
+		}
+	}
+	table[style*="border-bottom-color"] {
+		> *,
+		tr:last-child {
+			border-bottom-color: inherit;
+
+			th,
+			td {
+				border-bottom-color: inherit;
+			}
+		}
+
+		// Border support classes and styles are applied on the table block
+		// itself. This means that without the rule below every table row would
+		// have a bottom border matching the color of the table's border.
+		// This style gives the best visual appearance and most expected result
+		// until we can control individual table rows or cells via inner blocks.
+		tr:not(:last-child) {
+			border-bottom-color: currentColor;
+		}
+	}
+	table[style*="border-left-color"] {
+		> *,
+		tr,
+		th,
+		td:first-child {
+			border-left-color: inherit;
+		}
+	}
+
 	table[style*="border-style"] {
 		> *,
 		tr,

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

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": true,
 	"name": "core/table-of-contents",
 	"title": "Table of Contents",
 	"category": "layout",
@@ -8,13 +9,19 @@
 	"keywords": [ "document outline", "summary" ],
 	"textdomain": "default",
 	"attributes": {
+		"headings": {
+			"type": "array",
+			"items": {
+				"type": "object"
+			}
+		},
 		"onlyIncludeCurrentPage": {
 			"type": "boolean",
 			"default": false
 		}
 	},
-	"usesContext": [ "postId" ],
 	"supports": {
 		"html": false
-	}
+	},
+	"example": {}
 }