@wordpress/block-library 7.3.2 → 7.4.0

package/src/paragraph/edit.native.js

@@ -14,6 +14,8 @@ import { useSelect } from '@wordpress/data';
 
 const name = 'core/paragraph';
 
+const allowedParentBlockAlignments = [ 'left', 'center', 'right' ];
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -21,6 +23,7 @@ function ParagraphBlock( {
 	setAttributes,
 	style,
 	clientId,
+	parentBlockAlignment,
 } ) {
 	const isRTL = useSelect( ( select ) => {
 		return !! select( blockEditorStore ).getSettings().isRTL;
@@ -40,6 +43,15 @@ function ParagraphBlock( {
 	const onAlignmentChange = useCallback( ( nextAlign ) => {
 		setAttributes( { align: nextAlign } );
 	}, [] );
+
+	const parentTextAlignment = allowedParentBlockAlignments.includes(
+		parentBlockAlignment
+	)
+		? parentBlockAlignment
+		: undefined;
+
+	const textAlignment = align || parentTextAlignment;
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -82,7 +94,7 @@ function ParagraphBlock( {
 				onReplace={ onReplace }
 				onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 				placeholder={ placeholder || __( 'Start writing…' ) }
-				textAlign={ align }
+				textAlign={ textAlignment }
 				__unstableEmbedURLOnPaste
 			/>
 		</>

package/src/post-author/edit.js

@@ -69,7 +69,7 @@ function PostAuthorEdit( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Author Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ ! isDescendentOfQueryLoop && !! authors?.length && (
 						<SelectControl
 							label={ __( 'Author' ) }

package/src/post-comments-form/style.scss

@@ -67,4 +67,15 @@
 			margin-top: 0.35em;
 		}
 	}
+
+	.comment-reply-title {
+		align-items: baseline;
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 0;
+
+		:where(small) {
+			font-size: var(--wp--preset--font-size--medium, smaller);
+		}
+	}
 }

package/src/post-excerpt/edit.js

@@ -114,7 +114,7 @@ export default function PostExcerptEditor( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Post Excerpt Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Show link on new line' ) }
 						checked={ showMoreOnNewLine }

package/src/quote/index.js

@@ -16,7 +16,7 @@ import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name };
+export { metadata, name, settingsV2 };
 
 export const settingsV1 = {
 	icon,

package/src/quote/v2/edit.js

@@ -74,6 +74,7 @@ export default function QuoteEdit( {
 	insertBlocksAfter,
 	clientId,
 	className,
+	style,
 } ) {
 	const { citation, align } = attributes;
 
@@ -88,6 +89,7 @@ export default function QuoteEdit( {
 		className: classNames( className, {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
+		...( ! isWebPlatform && { style } ),
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -128,6 +130,7 @@ export default function QuoteEdit( {
 						__unstableOnSplitAtEnd={ () =>
 							insertBlocksAfter( createBlock( 'core/paragraph' ) )
 						}
+						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
 					/>
 				) }
 			</BlockQuotation>

package/src/rss/edit.js

@@ -109,7 +109,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<ToolbarGroup controls={ toolbarControls } />
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'RSS settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
 						label={ __( 'Number of items' ) }
 						value={ itemsToShow }

package/src/search/edit.js

@@ -103,8 +103,6 @@ export default function SearchEdit( {
 		} );
 	}, [ insertedInNavigationBlock ] );
 	const borderRadius = style?.border?.radius;
-	const borderColor = style?.border?.color;
-	const borderWidth = style?.border?.width;
 	const borderProps = useBorderProps( attributes );
 
 	// Check for old deprecated numerical border radius. Done as a separate
@@ -392,10 +390,18 @@ export default function SearchEdit( {
 		radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;
 
 	const getWrapperStyles = () => {
-		const styles = {
-			borderColor,
-			borderWidth: isButtonPositionInside ? borderWidth : undefined,
-		};
+		const styles = isButtonPositionInside
+			? borderProps.style
+			: {
+					borderRadius: borderProps.style?.borderRadius,
+					borderTopLeftRadius: borderProps.style?.borderTopLeftRadius,
+					borderTopRightRadius:
+						borderProps.style?.borderTopRightRadius,
+					borderBottomLeftRadius:
+						borderProps.style?.borderBottomLeftRadius,
+					borderBottomRightRadius:
+						borderProps.style?.borderBottomRightRadius,
+			  };
 
 		const isNonZeroBorderRadius =
 			borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;
@@ -417,11 +423,11 @@ export default function SearchEdit( {
 				} = borderRadius;
 
 				return {
+					...styles,
 					borderTopLeftRadius: padBorderRadius( topLeft ),
 					borderTopRightRadius: padBorderRadius( topRight ),
 					borderBottomLeftRadius: padBorderRadius( bottomLeft ),
 					borderBottomRightRadius: padBorderRadius( bottomRight ),
-					...styles,
 				};
 			}
 

package/src/search/index.php

@@ -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/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

@@ -25,6 +25,7 @@ import {
 	TextControl,
 	ToggleControl,
 	ToolbarDropdownMenu,
+	__experimentalHasSplitBorders as hasSplitBorders,
 } from '@wordpress/components';
 import {
 	alignLeft,
@@ -451,7 +452,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<InspectorControls>
 					<PanelBody
-						title={ __( 'Table settings' ) }
+						title={ __( 'Settings' ) }
 						className="blocks-table-settings"
 					>
 						<ToggleControl
@@ -477,7 +478,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 } }
 				>

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/tag-cloud/edit.js

@@ -110,7 +110,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Tag Cloud settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<SelectControl
 					label={ __( 'Taxonomy' ) }
 					options={ getTaxonomyOptions() }

package/src/video/edit.js

@@ -191,7 +191,7 @@ function VideoEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Video settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<VideoCommonSettings
 						setAttributes={ setAttributes }
 						attributes={ attributes }

package/src/video/edit.native.js

@@ -248,7 +248,7 @@ class VideoEdit extends Component {
 					) }
 					{ isSelected && (
 						<InspectorControls>
-							<PanelBody title={ __( 'Video settings' ) }>
+							<PanelBody title={ __( 'Settings' ) }>
 								<VideoCommonSettings
 									setAttributes={ setAttributes }
 									attributes={ attributes }