@wordpress/block-library 7.3.5 → 7.5.0

package/src/post-comments/edit.js

@@ -16,10 +16,12 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../post-comments-form/form';
 
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
@@ -51,9 +53,9 @@ export default function PostCommentsEdit( {
 	);
 
 	let warning = __(
-		'Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments Query Loop" block.'
+		'Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments" block.'
 	);
-	let showPlacholder = true;
+	let showPlaceholder = true;
 
 	if ( ! isSiteEditor && 'open' !== commentStatus ) {
 		if ( 'closed' === commentStatus ) {
@@ -64,7 +66,7 @@ export default function PostCommentsEdit( {
 				),
 				postType
 			);
-			showPlacholder = false;
+			showPlaceholder = false;
 		} else if ( ! postTypeSupportsComments ) {
 			warning = sprintf(
 				/* translators: 1: Post type (i.e. "post", "page") */
@@ -73,10 +75,10 @@ export default function PostCommentsEdit( {
 				),
 				postType
 			);
-			showPlacholder = false;
+			showPlaceholder = false;
 		} else if ( 'open' !== defaultCommentStatus ) {
 			warning = __( 'Post Comments block: Comments are not enabled.' );
-			showPlacholder = false;
+			showPlaceholder = false;
 		}
 	}
 
@@ -88,8 +90,6 @@ export default function PostCommentsEdit( {
 
 	const disabledRef = useDisabled();
 
-	const textareaId = useInstanceId( PostCommentsEdit );
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -104,7 +104,7 @@ export default function PostCommentsEdit( {
 			<div { ...blockProps }>
 				<Warning>{ warning }</Warning>
 
-				{ showPlacholder && (
+				{ showPlaceholder && (
 					<div
 						className="wp-block-post-comments__placeholder"
 						ref={ disabledRef }
@@ -206,37 +206,7 @@ export default function PostCommentsEdit( {
 							</div>
 						</div>
 
-						<div className="comment-respond">
-							<h3 className="comment-reply-title">
-								{ __( 'Leave a Reply' ) }
-							</h3>
-
-							<form className="comment-form" noValidate>
-								<p className="comment-form-comment">
-									<label
-										htmlFor={ `comment-${ textareaId }` }
-									>
-										{ __( 'Comment' ) }{ ' ' }
-										<span className="required">*</span>
-									</label>
-									<textarea
-										id={ `comment-${ textareaId }` }
-										name="comment"
-										cols="45"
-										rows="8"
-										required
-									/>
-								</p>
-								<p className="form-submit wp-block-button">
-									<input
-										name="submit"
-										type="submit"
-										className="submit wp-block-button__link"
-										value={ __( 'Post Comment' ) }
-									/>
-								</p>
-							</form>
-						</div>
+						<CommentsForm />
 					</div>
 				) }
 			</div>

package/src/post-comments/index.php

@@ -51,6 +51,8 @@ function render_block_core_post_comments( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$output             = ob_get_clean();
 
+	wp_enqueue_script( 'comment-reply' );
+
 	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $output );
 }
 

package/src/post-comments-form/edit.js

@@ -11,13 +11,15 @@ import {
 	BlockControls,
 	Warning,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import CommentsForm from './form';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -38,11 +40,49 @@ export default function PostCommentsFormEdit( {
 		} ),
 	} );
 
-	const isInSiteEditor = postType === undefined || postId === undefined;
+	const isSiteEditor = postType === undefined || postId === undefined;
+
+	const { defaultCommentStatus } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
 
-	const disabledFormRef = useDisabled();
+	let warning = false;
+	let showPlaceholder = true;
 
-	const instanceId = useInstanceId( PostCommentsFormEdit );
+	if ( ! isSiteEditor && 'open' !== commentStatus ) {
+		if ( 'closed' === commentStatus ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments Form block: Comments on this %s are not allowed.'
+				),
+				postType
+			);
+			showPlaceholder = false;
+		} else if ( ! postTypeSupportsComments ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments Form block: Comments for this post type (%s) are not enabled.'
+				),
+				postType
+			);
+			showPlaceholder = false;
+		} else if ( 'open' !== defaultCommentStatus ) {
+			warning = __(
+				'Post Comments Form block: Comments are not enabled.'
+			);
+			showPlaceholder = false;
+		}
+	}
 
 	return (
 		<>
@@ -55,57 +95,9 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ ! commentStatus && ! isInSiteEditor && (
-					<Warning>
-						{ __(
-							'Post Comments Form block: comments are not enabled for this post type.'
-						) }
-					</Warning>
-				) }
-
-				{ 'open' !== commentStatus && ! isInSiteEditor && (
-					<Warning>
-						{ sprintf(
-							/* translators: 1: Post type (i.e. "post", "page") */
-							__(
-								'Post Comments Form block: comments to this %s are not allowed.'
-							),
-							postType
-						) }
-					</Warning>
-				) }
+				{ warning && <Warning>{ warning }</Warning> }
 
-				{ ( 'open' === commentStatus || isInSiteEditor ) && (
-					<div>
-						<h3>{ __( 'Leave a Reply' ) }</h3>
-						<form
-							noValidate
-							className="comment-form"
-							ref={ disabledFormRef }
-						>
-							<p>
-								<label htmlFor={ `comment-${ instanceId }` }>
-									{ __( 'Comment' ) }
-								</label>
-								<textarea
-									id={ `comment-${ instanceId }` }
-									name="comment"
-									cols="45"
-									rows="8"
-								/>
-							</p>
-							<p>
-								<input
-									name="submit"
-									className="submit wp-block-button__link"
-									label={ __( 'Post Comment' ) }
-									value={ __( 'Post Comment' ) }
-									readOnly
-								/>
-							</p>
-						</form>
-					</div>
-				) }
+				{ showPlaceholder ? <CommentsForm /> : null }
 			</div>
 		</>
 	);

package/src/post-comments-form/form.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalUseDisabled as useDisabled,
+	useInstanceId,
+} from '@wordpress/compose';
+
+const CommentsForm = () => {
+	const disabledFormRef = useDisabled();
+	const instanceId = useInstanceId( CommentsForm );
+
+	return (
+		<div className="comment-respond">
+			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
+			<form noValidate className="comment-form" ref={ disabledFormRef }>
+				<p>
+					<label htmlFor={ `comment-${ instanceId }` }>
+						{ __( 'Comment' ) }
+					</label>
+					<textarea
+						id={ `comment-${ instanceId }` }
+						name="comment"
+						cols="45"
+						rows="8"
+					/>
+				</p>
+				<p className="form-submit wp-block-button">
+					<input
+						name="submit"
+						type="submit"
+						className="submit wp-block-button__link"
+						label={ __( 'Post Comment' ) }
+						value={ __( 'Post Comment' ) }
+					/>
+				</p>
+			</form>
+		</div>
+	);
+};
+
+export default CommentsForm;

package/src/post-comments-form/index.php

@@ -18,9 +18,13 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 		return '';
 	}
 
+	if ( post_password_required( $block->context['postId'] ) ) {
+		return;
+	}
+
 	$classes = 'comment-respond'; // See comment further below.
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes .= ' has-text-align-' . $attributes['textAlign'];
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

package/src/post-excerpt/edit.js

@@ -127,7 +127,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/post-terms/block.json

@@ -16,6 +16,14 @@
 		"separator": {
 			"type": "string",
 			"default": ", "
+		},
+		"prefix": {
+			"type": "string",
+			"default": ""
+		},
+		"suffix": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/post-terms/edit.js

@@ -13,6 +13,7 @@ import {
 	BlockControls,
 	useBlockProps,
 	useBlockDisplayInformation,
+	RichText,
 } from '@wordpress/block-editor';
 import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -30,7 +31,7 @@ export default function PostTermsEdit( {
 	context,
 	setAttributes,
 } ) {
-	const { term, textAlign, separator } = attributes;
+	const { term, textAlign, separator, prefix, suffix } = attributes;
 	const { postId, postType } = context;
 
 	const selectedTerm = useSelect(
@@ -83,6 +84,19 @@ export default function PostTermsEdit( {
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ isLoading && <Spinner /> }
+				{ ! isLoading && hasPostTerms && (
+					<RichText
+						className="wp-block-post-terms__prefix"
+						multiline={ false }
+						aria-label={ __( 'Prefix' ) }
+						placeholder={ __( 'Prefix' ) + ' ' }
+						value={ prefix }
+						onChange={ ( value ) =>
+							setAttributes( { prefix: value } )
+						}
+						tagName="span"
+					/>
+				) }
 				{ ! isLoading &&
 					hasPostTerms &&
 					postTerms
@@ -108,6 +122,19 @@ export default function PostTermsEdit( {
 					! hasPostTerms &&
 					( selectedTerm?.labels?.no_terms ||
 						__( 'Term items not found.' ) ) }
+				{ ! isLoading && hasPostTerms && (
+					<RichText
+						className="wp-block-post-terms__suffix"
+						multiline={ false }
+						aria-label={ __( 'Suffix' ) }
+						placeholder={ ' ' + __( 'Suffix' ) }
+						value={ suffix }
+						onChange={ ( value ) =>
+							setAttributes( { suffix: value } )
+						}
+						tagName="span"
+					/>
+				) }
 			</div>
 		</>
 	);

package/src/post-terms/index.php

@@ -36,12 +36,22 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
+	$prefix = "<div $wrapper_attributes>";
+	if ( isset( $attributes['prefix'] ) && $attributes['prefix'] ) {
+		$prefix .= '<span class="wp-block-post-terms__prefix">' . $attributes['prefix'] . '</span>';
+	}
+
+	$suffix = '</div>';
+	if ( isset( $attributes['suffix'] ) && $attributes['suffix'] ) {
+		$suffix = '<span class="wp-block-post-terms__suffix">' . $attributes['suffix'] . '</span>' . $suffix;
+	}
+
 	return get_the_term_list(
 		$block->context['postId'],
 		$attributes['term'],
-		"<div $wrapper_attributes>",
+		$prefix,
 		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
-		'</div>'
+		$suffix
 	);
 }
 

package/src/quote/block.json

@@ -30,6 +30,7 @@
 	"supports": {
 		"anchor": true,
 		"__experimentalSlashInserter": true,
+		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

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/separator/block.json

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

package/src/spacer/constants.js

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