@wordpress/block-library 7.15.0 → 7.16.0

package/src/comment-reply-link/index.php

@@ -34,7 +34,7 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
 	// Compute comment's depth iterating over its ancestors.
 	while ( ! empty( $parent_id ) ) {
-		$depth++;
+		++$depth;
 		$parent_id = get_comment( $parent_id )->comment_parent;
 	}
 

package/src/comment-template/index.php

@@ -16,6 +16,8 @@
  */
 function block_core_comment_template_render_comments( $comments, $block ) {
 	global $comment_depth;
+	$thread_comments       = get_option( 'thread_comments' );
+	$thread_comments_depth = get_option( 'thread_comments_depth' );
 
 	if ( empty( $comment_depth ) ) {
 		$comment_depth = 1;
@@ -46,21 +48,28 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 
 		// If the comment has children, recurse to create the HTML for the nested
 		// comments.
-		if ( ! empty( $children ) ) {
-			$comment_depth += 1;
-			$inner_content  = block_core_comment_template_render_comments(
-				$children,
-				$block
-			);
-			$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
-			$comment_depth -= 1;
+		if ( ! empty( $children ) && ! empty( $thread_comments ) ) {
+			if ( $comment_depth < $thread_comments_depth ) {
+				++$comment_depth;
+				$inner_content  = block_core_comment_template_render_comments(
+					$children,
+					$block
+				);
+				$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
+				--$comment_depth;
+			} else {
+				$inner_content  = block_core_comment_template_render_comments(
+					$children,
+					$block
+				);
+				$block_content .= sprintf( $inner_content );
+			}
 		}
 
 		$content .= sprintf( '<li id="comment-%1$s" %2$s>%3$s</li>', $comment->comment_ID, $comment_classes, $block_content );
 	}
 
 	return $content;
-
 }
 
 /**

package/src/comments-pagination-numbers/block.json

@@ -11,6 +11,13 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/cover/index.php

@@ -25,7 +25,7 @@ function render_block_core_cover( $attributes, $content ) {
 		);
 
 		if ( isset( $attributes['focalPoint'] ) ) {
-			$object_position              = round( $attributes['focalPoint']['x'] * 100 ) . '%' . ' ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+			$object_position              = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
 			$attr['data-object-position'] = $object_position;
 			$attr['style']                = 'object-position: ' . $object_position;
 		}

package/src/gallery/gallery.js

@@ -12,7 +12,6 @@ import {
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
@@ -38,26 +37,6 @@ export const Gallery = ( props ) => {
 		__experimentalLayout: { type: 'default', alignments: [] },
 	} );
 
-	const [ captionFocused, setCaptionFocused ] = useState( false );
-
-	function onFocusCaption() {
-		if ( ! captionFocused ) {
-			setCaptionFocused( true );
-		}
-	}
-
-	function removeCaptionFocus() {
-		if ( captionFocused ) {
-			setCaptionFocused( false );
-		}
-	}
-
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setCaptionFocused( false );
-		}
-	}, [ isSelected ] );
-
 	return (
 		<figure
 			{ ...innerBlocksProps }
@@ -74,17 +53,12 @@ export const Gallery = ( props ) => {
 		>
 			{ children }
 			{ isSelected && ! children && (
-				<View
-					className="blocks-gallery-media-placeholder-wrapper"
-					onClick={ removeCaptionFocus }
-				>
+				<View className="blocks-gallery-media-placeholder-wrapper">
 					{ mediaPlaceholder }
 				</View>
 			) }
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
-				captionFocused={ captionFocused }
-				onFocusCaption={ onFocusCaption }
 				tagName="figcaption"
 				className={ classnames(
 					'blocks-gallery-caption',
@@ -105,8 +79,6 @@ export const Gallery = ( props ) => {
 
 function RichTextVisibilityHelper( {
 	isHidden,
-	captionFocused,
-	onFocusCaption,
 	className,
 	value,
 	placeholder,
@@ -125,8 +97,6 @@ function RichTextVisibilityHelper( {
 			placeholder={ placeholder }
 			className={ className }
 			tagName={ tagName }
-			isSelected={ captionFocused }
-			onClick={ onFocusCaption }
 			{ ...richTextProps }
 		/>
 	);

package/src/group/edit.js

@@ -53,7 +53,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 		? { ...defaultLayout, ...layout, type: 'default' }
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
-	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
+	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
 
 	const blockProps = useBlockProps();
 

package/src/image/editor.scss

@@ -22,6 +22,10 @@
 		.components-placeholder__illustration {
 			display: none;
 		}
+
+		&::before {
+			opacity: 0;
+		}
 	}
 
 	// Remove the transition while we still have a legacy placeholder style.

package/src/latest-posts/index.php

@@ -55,7 +55,7 @@ function render_block_core_latest_posts( $attributes ) {
 		$args['author'] = $attributes['selectedAuthor'];
 	}
 
-	$query        = new WP_Query;
+	$query        = new WP_Query();
 	$recent_posts = $query->query( $args );
 
 	if ( isset( $attributes['displayFeaturedImage'] ) && $attributes['displayFeaturedImage'] ) {

package/src/navigation/edit/index.js

@@ -282,16 +282,18 @@ function Navigation( {
 		hasResolvedNavigationMenus &&
 		! hasUncontrolledInnerBlocks;
 
-	if ( isPlaceholder && ! ref ) {
-		/**
-		 *  this fallback only displays (both in editor and on front)
-		 *  the list of pages block if no menu is available as a fallback.
-		 *  We don't want the fallback to request a save,
-		 *  nor to be undoable, hence we mark it non persistent.
-		 */
-		__unstableMarkNextChangeAsNotPersistent();
-		replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
-	}
+	useEffect( () => {
+		if ( isPlaceholder && ! ref ) {
+			/**
+			 *  this fallback only displays (both in editor and on front)
+			 *  the list of pages block if no menu is available as a fallback.
+			 *  We don't want the fallback to request a save,
+			 *  nor to be undoable, hence we mark it non persistent.
+			 */
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
+		}
+	}, [ clientId, isPlaceholder, ref ] );
 
 	const isEntityAvailable =
 		! isNavigationMenuMissing && isNavigationMenuResolved;

package/src/navigation/editor.scss

@@ -629,3 +629,9 @@ body.editor-styles-wrapper
 	margin-bottom: $grid-unit-20;
 	width: 100%;
 }
+
+// Buttons inside a disabled component get semitransparent when there's a clickthrough overlay.
+// Since this navigation button is content rather than UI, however, override that.
+.wp-block-navigation__responsive-container-open.components-button {
+	opacity: 1;
+}

package/src/navigation/style.scss

@@ -47,6 +47,14 @@ $navigation-icon-size: 24px;
 		display: block;
 	}
 
+	// This rule needs extra specificity so that it inherits the correct color from its parent.
+	// Otherwise, a link color set by a parent group can override the value.
+	// This also fixes an issue where a navigation with an explicitly set color is overridden
+	// by link colors defined in Global Styles.
+	.wp-block-navigation-item__content.wp-block-navigation-item__content {
+		color: inherit;
+	}
+
 	// The following rules provide class based application of user selected text
 	// decoration via block supports.
 	&.has-text-decoration-underline .wp-block-navigation-item__content {

package/src/navigation-submenu/index.php

@@ -148,7 +148,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === (int) $attributes['id'] );
+	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
@@ -183,7 +183,16 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	if ( ! $open_on_click ) {
 		$item_url = isset( $attributes['url'] ) ? $attributes['url'] : '';
 		// Start appending HTML attributes to anchor tag.
-		$html .= '<a class="wp-block-navigation-item__content" href="' . esc_url( $item_url ) . '"';
+		$html .= '<a class="wp-block-navigation-item__content"';
+
+		// The href attribute on a and area elements is not required;
+		// when those elements do not have href attributes they do not create hyperlinks.
+		// But also The href attribute must have a value that is a valid URL potentially
+		// surrounded by spaces.
+		// see: https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements.
+		if ( ! empty( $item_url ) ) {
+			$html .= ' href="' . esc_url( $item_url ) . '"';
+		}
 
 		if ( $is_active ) {
 			$html .= ' aria-current="page"';

package/src/page-list/index.php

@@ -189,7 +189,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 
 		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
 			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . esc_html( $title ) .
-			'</button>' . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
+			'</button><span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
 		} else {
 			$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
 		}
@@ -243,7 +243,7 @@ function block_core_page_list_nest_pages( $current_level, $children ) {
  */
 function render_block_core_page_list( $attributes, $content, $block ) {
 	static $block_id = 0;
-	$block_id++;
+	++$block_id;
 
 	$all_pages = get_pages(
 		array(
@@ -264,7 +264,7 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	$active_page_ancestor_ids = array();
 
 	foreach ( (array) $all_pages as $page ) {
-		$is_active = ! empty( $page->ID ) && ( get_the_ID() === $page->ID );
+		$is_active = ! empty( $page->ID ) && ( get_queried_object_id() === $page->ID );
 
 		if ( $is_active ) {
 			$active_page_ancestor_ids = get_post_ancestors( $page->ID );

package/src/paragraph/deprecated.js

@@ -11,8 +11,11 @@ import {
 	getColorClassName,
 	getFontSizeClass,
 	RichText,
+	useBlockProps,
 } from '@wordpress/block-editor';
 
+import { isRTL } from '@wordpress/i18n';
+
 const supports = {
 	className: false,
 };
@@ -90,6 +93,39 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 const { style, ...restBlockAttributes } = blockAttributes;
 
 const deprecated = [
+	// Version without drop cap on aligned text.
+	{
+		supports,
+		attributes: {
+			...restBlockAttributes,
+			customTextColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			customFontSize: {
+				type: 'number',
+			},
+		},
+		save( { attributes } ) {
+			const { align, content, dropCap, direction } = attributes;
+			const className = classnames( {
+				'has-drop-cap':
+					align === ( isRTL() ? 'left' : 'right' ) ||
+					align === 'center'
+						? false
+						: dropCap,
+				[ `has-text-align-${ align }` ]: align,
+			} );
+
+			return (
+				<p { ...useBlockProps.save( { className, dir: direction } ) }>
+					<RichText.Content value={ content } />
+				</p>
+			);
+		},
+	},
 	{
 		supports,
 		attributes: {

package/src/paragraph/drop-zone.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import {
+	__experimentalUseOnBlockDrop as useOnBlockDrop,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import {
+	__experimentalUseDropZone as useDropZone,
+	useReducedMotion,
+} from '@wordpress/compose';
+import {
+	Popover,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+
+const animateVariants = {
+	hide: { opacity: 0, scaleY: 0.75 },
+	show: { opacity: 1, scaleY: 1 },
+	exit: { opacity: 0, scaleY: 0.9 },
+};
+
+export default function DropZone( { paragraphElement, clientId } ) {
+	const { rootClientId, blockIndex } = useSelect(
+		( select ) => {
+			const selectors = select( blockEditorStore );
+			return {
+				rootClientId: selectors.getBlockRootClientId( clientId ),
+				blockIndex: selectors.getBlockIndex( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const onBlockDrop = useOnBlockDrop( rootClientId, blockIndex, {
+		action: 'replace',
+	} );
+	const [ isDragging, setIsDragging ] = useState( false );
+	const [ isVisible, setIsVisible ] = useState( false );
+	const popoverRef = useDropZone( {
+		onDragStart: () => {
+			setIsDragging( true );
+		},
+		onDragEnd: () => {
+			setIsDragging( false );
+		},
+	} );
+	const dropZoneRef = useDropZone( {
+		onDrop: onBlockDrop,
+		onDragEnter: () => {
+			setIsVisible( true );
+		},
+		onDragLeave: () => {
+			setIsVisible( false );
+		},
+	} );
+	const reducedMotion = useReducedMotion();
+
+	return (
+		<Popover
+			anchor={ paragraphElement }
+			animate={ false }
+			placement="top-start"
+			focusOnMount={ false }
+			flip={ false }
+			resize={ false }
+			className="wp-block-paragraph__drop-zone"
+			ref={ popoverRef }
+		>
+			{ isDragging ? (
+				<div
+					className="wp-block-paragraph__drop-zone-backdrop"
+					ref={ dropZoneRef }
+					style={ {
+						width: paragraphElement?.offsetWidth,
+						height: paragraphElement?.offsetHeight,
+					} }
+				>
+					<AnimatePresence>
+						{ isVisible ? (
+							<motion.div
+								key="drop-zone-foreground"
+								data-testid="empty-paragraph-drop-zone"
+								initial={
+									reducedMotion
+										? animateVariants.show
+										: animateVariants.hide
+								}
+								animate={ animateVariants.show }
+								exit={
+									reducedMotion
+										? animateVariants.show
+										: animateVariants.exit
+								}
+								className="wp-block-paragraph__drop-zone-foreground"
+							/>
+						) : null }
+					</AnimatePresence>
+				</div>
+			) : null }
+		</Popover>
+	);
+}

package/src/paragraph/edit.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { __, _x, isRTL } from '@wordpress/i18n';
 import {
 	ToolbarButton,
@@ -20,6 +21,7 @@ import {
 	useBlockProps,
 	useSetting,
 } from '@wordpress/block-editor';
+import { useMergeRefs } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 
@@ -27,6 +29,7 @@ import { formatLtr } from '@wordpress/icons';
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
+import DropZone from './drop-zone';
 
 const name = 'core/paragraph';
 
@@ -45,6 +48,10 @@ function ParagraphRTLControl( { direction, setDirection } ) {
 	);
 }
 
+function hasDropCapDisabled( align ) {
+	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
+}
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -55,22 +62,40 @@ function ParagraphBlock( {
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
+	const [ paragraphElement, setParagraphElement ] = useState( null );
 	const blockProps = useBlockProps( {
-		ref: useOnEnter( { clientId, content } ),
+		ref: useMergeRefs( [
+			useOnEnter( { clientId, content } ),
+			setParagraphElement,
+		] ),
 		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
@@ -97,17 +122,20 @@ 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,3 +17,23 @@
 		}
 	}
 }
+
+.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/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" ],