@wordpress/block-library 7.15.1-next.4d3b314fd5.0 → 7.17.0

package/src/paragraph/edit.js

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { __, _x, isRTL } from '@wordpress/i18n';
 import {
 	ToolbarButton,
@@ -21,7 +20,6 @@ import {
 	useBlockProps,
 	useSetting,
 } from '@wordpress/block-editor';
-import { useMergeRefs } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 
@@ -29,7 +27,6 @@ import { formatLtr } from '@wordpress/icons';
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
-import DropZone from './drop-zone';
 
 const name = 'core/paragraph';
 
@@ -48,6 +45,10 @@ function ParagraphRTLControl( { direction, setDirection } ) {
 	);
 }
 
+function hasDropCapDisabled( align ) {
+	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
+}
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -58,26 +59,36 @@ function ParagraphBlock( {
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
-	const [ paragraphElement, setParagraphElement ] = useState( null );
 	const blockProps = useBlockProps( {
-		ref: useMergeRefs( [
-			useOnEnter( { clientId, content } ),
-			setParagraphElement,
-		] ),
+		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
-			'has-drop-cap': dropCap,
+			'has-drop-cap': hasDropCapDisabled( align ) ? false : dropCap,
 			[ `has-text-align-${ align }` ]: align,
 		} ),
 		style: { direction },
 	} );
 
+	let helpText;
+	if ( hasDropCapDisabled( align ) ) {
+		helpText = __( 'Not available for aligned text.' );
+	} else if ( dropCap ) {
+		helpText = __( 'Showing large initial letter.' );
+	} else {
+		helpText = __( 'Toggle to show a large initial letter.' );
+	}
+
 	return (
 		<>
 			<BlockControls group="block">
 				<AlignmentControl
 					value={ align }
 					onChange={ ( newAlign ) =>
-						setAttributes( { align: newAlign } )
+						setAttributes( {
+							align: newAlign,
+							dropCap: hasDropCapDisabled( newAlign )
+								? false
+								: dropCap,
+						} )
 					}
 				/>
 				<ParagraphRTLControl
@@ -104,23 +115,14 @@ function ParagraphBlock( {
 							onChange={ () =>
 								setAttributes( { dropCap: ! dropCap } )
 							}
-							help={
-								dropCap
-									? __( 'Showing large initial letter.' )
-									: __(
-											'Toggle to show a large initial letter.'
-									  )
+							help={ helpText }
+							disabled={
+								hasDropCapDisabled( align ) ? true : false
 							}
 						/>
 					</ToolsPanelItem>
 				</InspectorControls>
 			) }
-			{ ! content && (
-				<DropZone
-					clientId={ clientId }
-					paragraphElement={ paragraphElement }
-				/>
-			) }
 			<RichText
 				identifier="content"
 				tagName="p"

package/src/paragraph/editor.scss

@@ -17,23 +17,3 @@
 		}
 	}
 }
-
-.components-popover.wp-block-paragraph__drop-zone {
-	.components-popover__content {
-		border: none;
-		outline: none;
-		box-shadow: none;
-	}
-
-	.wp-block-paragraph__drop-zone-backdrop {
-		position: absolute;
-	}
-
-	.wp-block-paragraph__drop-zone-foreground {
-		position: absolute;
-		inset: 0;
-		pointer-events: none;
-		background-color: var(--wp-admin-theme-color);
-		border-radius: 2px;
-	}
-}

package/src/paragraph/save.js

@@ -7,11 +7,15 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { isRTL } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { align, content, dropCap, direction } = attributes;
 	const className = classnames( {
-		'has-drop-cap': dropCap,
+		'has-drop-cap':
+			align === ( isRTL() ? 'left' : 'right' ) || align === 'center'
+				? false
+				: dropCap,
 		[ `has-text-align-${ align }` ]: align,
 	} );
 

package/src/paragraph/style.scss

@@ -28,6 +28,11 @@
 	font-style: normal;
 }
 
+body.rtl .has-drop-cap:not(:focus)::first-letter {
+	float: initial;
+	margin-left: 0.1em;
+}
+
 // Prevent the dropcap from breaking out of the box when a background is applied.
 p.has-drop-cap.has-background {
 	overflow: hidden;

package/src/pattern/edit.js

@@ -26,10 +26,17 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
 		if ( selectedPattern?.blocks ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceBlocks( clientId, selectedPattern.blocks );
+			// We batch updates to block list settings to avoid triggering cascading renders
+			// for each container block included in a tree and optimize initial render.
+			// Since the above uses microtasks, we need to use a microtask here as well,
+			// because nested pattern blocks cannot be inserted if the parent block supports
+			// inner blocks but doesn't have blockSettings in the state.
+			window.queueMicrotask( () => {
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceBlocks( clientId, selectedPattern.blocks );
+			} );
 		}
-	}, [ selectedPattern?.blocks ] );
+	}, [ clientId, selectedPattern?.blocks ] );
 
 	const props = useBlockProps();
 

package/src/post-author/block.json

@@ -23,6 +23,14 @@
 		},
 		"byline": {
 			"type": "string"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": false
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
 		}
 	},
 	"usesContext": [ "postType", "postId", "queryId" ],

package/src/post-author/edit.js

@@ -46,9 +46,10 @@ function PostAuthorEdit( {
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	const { textAlign, showAvatar, showBio, byline } = attributes;
-
+	const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } =
+		attributes;
 	const avatarSizes = [];
+	const authorName = authorDetails?.name || __( 'Post Author' );
 	if ( authorDetails ) {
 		Object.keys( authorDetails.avatar_urls ).forEach( ( size ) => {
 			avatarSizes.push( {
@@ -118,6 +119,22 @@ function PostAuthorEdit( {
 							setAttributes( { showBio: ! showBio } )
 						}
 					/>
+					<ToggleControl
+						label={ __( 'Link author name to author page' ) }
+						checked={ isLink }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+					/>
+					{ isLink && (
+						<ToggleControl
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 
@@ -158,7 +175,16 @@ function PostAuthorEdit( {
 						/>
 					) }
 					<p className="wp-block-post-author__name">
-						{ authorDetails?.name || __( 'Post Author' ) }
+						{ isLink ? (
+							<a
+								href="#post-author-pseudo-link"
+								onClick={ ( event ) => event.preventDefault() }
+							>
+								{ authorName }
+							</a>
+						) : (
+							authorName
+						) }
 					</p>
 					{ showBio && (
 						<p

package/src/post-author/index.php

@@ -29,6 +29,12 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 		$attributes['avatarSize']
 	) : null;
 
+	$link        = get_author_posts_url( $author_id );
+	$author_name = get_the_author_meta( 'display_name', $author_id );
+	if ( ! empty( $attributes['isLink'] && ! empty( $attributes['linkTarget'] ) ) ) {
+		$author_name = sprintf( '<a href="%1s" target="%2s">%2s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
+	}
+
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
 	$classes = array_merge(
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
@@ -41,7 +47,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	( ! empty( $attributes['showAvatar'] ) ? '<div class="wp-block-post-author__avatar">' . $avatar . '</div>' : '' ) .
 	'<div class="wp-block-post-author__content">' .
 	( ! empty( $byline ) ? '<p class="wp-block-post-author__byline">' . wp_kses_post( $byline ) . '</p>' : '' ) .
-	'<p class="wp-block-post-author__name">' . get_the_author_meta( 'display_name', $author_id ) . '</p>' .
+	'<p class="wp-block-post-author__name">' . $author_name . '</p>' .
 	( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . get_the_author_meta( 'user_description', $author_id ) . '</p>' : '' ) .
 	'</div>' .
 	'</div>';

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

@@ -13,18 +13,17 @@ import {
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import { useDisabled, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 const CommentsFormPlaceholder = () => {
-	const disabledFormRef = useDisabled();
 	const instanceId = useInstanceId( CommentsFormPlaceholder );
 
 	return (
 		<div className="comment-respond">
 			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
-			<form noValidate className="comment-form" ref={ disabledFormRef }>
+			<form noValidate className="comment-form" inert="true">
 				<p>
 					<label htmlFor={ `comment-${ instanceId }` }>
 						{ __( 'Comment' ) }

package/src/post-featured-image/block.json

@@ -62,7 +62,7 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder",
+			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,

package/src/post-featured-image/editor.scss

@@ -6,87 +6,94 @@
 		backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
 	}
 
-	&.wp-block-post-featured-image {
-		// Style the placeholder.
-		.wp-block-post-featured-image__placeholder,
-		.components-placeholder {
-			justify-content: center;
-			align-items: center;
-			padding: 0;
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		justify-content: center;
+		align-items: center;
+		padding: 0;
 
-			// Hide the upload button, as it's also available in the media library.
-			.components-form-file-upload {
-				display: none;
-			}
+		// Hide the upload button, as it's also available in the media library.
+		.components-form-file-upload {
+			display: none;
+		}
 
-			// Style the upload button.
-			.components-button.components-button {
-				padding: 0;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				width: $grid-unit-60;
-				height: $grid-unit-60;
-				border-radius: 50%;
-				position: relative;
-				background: var(--wp-admin-theme-color);
-				border-color: var(--wp-admin-theme-color);
-				border-style: solid;
-				color: $white;
+		// Style the upload button.
+		.components-button {
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+			position: relative;
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
+			border-style: solid;
+			color: $white;
 
-				> svg {
-					color: inherit;
-				}
+			> svg {
+				color: inherit;
 			}
+		}
 
-			// Show default placeholder height when not resized.
-			min-height: 200px;
-
-			// The following override the default placeholder styles that remove
-			// its border so that a user selection for border color or width displays
-			// a visual border.
-			&:where(.has-border-color) {
-				border-style: solid;
-			}
-			&:where([style*="border-top-color"]) {
-				border-top-style: solid;
-			}
-			&:where([style*="border-right-color"]) {
-				border-right-style: solid;
-			}
-			&:where([style*="border-bottom-color"]) {
-				border-bottom-style: solid;
-			}
-			&:where([style*="border-left-color"]) {
-				border-left-style: solid;
-			}
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
 
-			&:where([style*="border-width"]) {
-				border-style: solid;
-			}
-			&:where([style*="border-top-width"]) {
-				border-top-style: solid;
-			}
-			&:where([style*="border-right-width"]) {
-				border-right-style: solid;
-			}
-			&:where([style*="border-bottom-width"]) {
-				border-bottom-style: solid;
-			}
-			&:where([style*="border-left-width"]) {
-				border-left-style: solid;
-			}
+	// The following override the default placeholder styles that remove
+	// its border so that a user selection for border color or width displays
+	// a visual border. They also override the `img { border: none; }` applied
+	// by core.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder,
+	img {
+		// The following is required to overcome WP Core applying styles that clear
+		// img borders with a higher specificity than those added by the border
+		// block support to provide a default border-style of solid when a border
+		// color or width has been set.
+		&:where(.has-border-color) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-color"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-color"]) {
+			border-right-style: solid;
+		}
+		&:where([style*="border-bottom-color"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-color"]) {
+			border-left-style: solid;
 		}
 
-		// Provide a minimum size for the placeholder when resized.
-		// Note, this should be as small as we can afford it, and exists only
-		// to ensure there's room for the upload button.
-		&[style*="height"] .components-placeholder {
-			min-height: $grid-unit-60;
-			min-width: $grid-unit-60;
-			height: 100%;
-			width: 100%;
+		&:where([style*="border-width"]) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-width"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-width"]) {
+			border-right-style: solid;
 		}
+		&:where([style*="border-bottom-width"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-width"]) {
+			border-left-style: solid;
+		}
+	}
+
+	// Provide a minimum size for the placeholder when resized.
+	// Note, this should be as small as we can afford it, and exists only
+	// to ensure there's room for the upload button.
+	&[style*="height"] .components-placeholder {
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
 	}
 }
 

package/src/post-featured-image/index.php

@@ -76,16 +76,25 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 	$has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
 	$has_solid_overlay   = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
 	$has_custom_overlay  = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
-	$class_names         = array(
-		'wp-block-post-featured-image__overlay',
-	);
-	$styles_properties   = array();
+	$class_names         = array( 'wp-block-post-featured-image__overlay' );
+	$styles              = array();
 
 	if ( ! $has_dim_background ) {
 		return '';
 	}
 
-	// Generate required classes for the element.
+	// Apply border classes and styles.
+	$border_attributes = get_block_core_post_featured_image_border_attributes( $attributes );
+
+	if ( ! empty( $border_attributes['class'] ) ) {
+		$class_names[] = $border_attributes['class'];
+	}
+
+	if ( ! empty( $border_attributes['style'] ) ) {
+		$styles[] = $border_attributes['style'];
+	}
+
+	// Apply overlay and gradient classes.
 	if ( $has_dim_background ) {
 		$class_names[] = 'has-background-dim';
 		$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
@@ -103,35 +112,20 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 		$class_names[] = "has-{$attributes['gradient']}-gradient-background";
 	}
 
-	// Generate required CSS properties and their values.
-	if ( ! empty( $attributes['style']['border']['radius'] ) ) {
-		$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
-	}
-
-	if ( ! empty( $attributes['style']['border']['width'] ) ) {
-		$styles_properties['border-width'] = $attributes['style']['border']['width'];
-	}
-
+	// Apply background styles.
 	if ( $has_custom_gradient ) {
-		$styles_properties['background-image'] = $attributes['customGradient'];
+		$styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] );
 	}
 
 	if ( $has_custom_overlay ) {
-		$styles_properties['background-color'] = $attributes['customOverlayColor'];
-	}
-
-	$styles = '';
-
-	foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {
-		$styles .= "{$style_attribute}: $style_attribute_value; ";
+		$styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] );
 	}
 
 	return sprintf(
 		'<span class="%s" style="%s" aria-hidden="true"></span>',
 		esc_attr( implode( ' ', $class_names ) ),
-		esc_attr( trim( $styles ) )
+		esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) )
 	);
-
 }
 
 /**

package/src/post-featured-image/overlay.js

@@ -47,20 +47,23 @@ const Overlay = ( {
 
 	return (
 		<>
-			<span
-				aria-hidden="true"
-				className={ classnames(
-					'wp-block-post-featured-image__overlay',
-					dimRatioToClass( dimRatio ),
-					{
-						[ overlayColor.class ]: overlayColor.class,
-						'has-background-dim': dimRatio !== undefined,
-						'has-background-gradient': gradientValue,
-						[ gradientClass ]: gradientClass,
-					}
-				) }
-				style={ overlayStyles }
-			/>
+			{ !! dimRatio && (
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-post-featured-image__overlay',
+						dimRatioToClass( dimRatio ),
+						{
+							[ overlayColor.class ]: overlayColor.class,
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						},
+						borderProps.className
+					) }
+					style={ overlayStyles }
+				/>
+			) }
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown
 					__experimentalHasMultipleOrigins

package/src/post-terms/block.json

@@ -38,6 +38,10 @@
 				"link": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-terms/style.scss

@@ -1,3 +1,8 @@
-.wp-block-post-terms__separator {
-	white-space: pre-wrap;
+.wp-block-post-terms {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	.wp-block-post-terms__separator {
+		white-space: pre-wrap;
+	}
 }

package/src/query/edit/inspector-controls/author-control.js

@@ -71,6 +71,7 @@ function AuthorControl( { value, onChange } ) {
 			value={ sanitizedValue }
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
+			__experimentalShowHowTo={ false }
 		/>
 	);
 }

package/src/query/edit/inspector-controls/index.js

@@ -22,13 +22,14 @@ import { useEffect, useState, useCallback } from '@wordpress/element';
 import OrderControl from './order-control';
 import AuthorControl from './author-control';
 import ParentControl from './parent-control';
-import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
+import { TaxonomyControls } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import {
 	usePostTypes,
 	useIsPostTypeHierarchical,
 	useAllowedControls,
 	isControlAllowed,
+	useTaxonomies,
 } from '../../utils';
 
 export default function QueryInspectorControls( {
@@ -50,7 +51,7 @@ export default function QueryInspectorControls( {
 	const allowedControls = useAllowedControls( attributes );
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
-	const taxonomiesInfo = useTaxonomiesInfo( postType );
+	const taxonomies = useTaxonomies( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
 		setShowSticky( postType === 'post' );
@@ -192,7 +193,7 @@ export default function QueryInspectorControls( {
 							setQuerySearch( '' );
 						} }
 					>
-						{ !! taxonomiesInfo?.length &&
+						{ !! taxonomies?.length &&
 							isControlAllowed( allowedControls, 'taxQuery' ) && (
 								<ToolsPanelItem
 									label={ __( 'Taxonomies' ) }
@@ -237,10 +238,7 @@ export default function QueryInspectorControls( {
 							</ToolsPanelItem>
 						) }
 						{ isPostTypeHierarchical &&
-							! isControlAllowed(
-								allowedControls,
-								'parents'
-							) && (
+							isControlAllowed( allowedControls, 'parents' ) && (
 								<ToolsPanelItem
 									hasValue={ () => !! parents?.length }
 									label={ __( 'Parents' ) }

package/src/query/edit/inspector-controls/parent-control.js

@@ -125,6 +125,7 @@ function ParentControl( { parents, postType, onChange } ) {
 			onInputChange={ debouncedSearch }
 			suggestions={ suggestions }
 			onChange={ onParentChange }
+			__experimentalShowHowTo={ false }
 		/>
 	);
 }