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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.15.0",
+	"version": "7.15.1-next.4d3b314fd5.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,32 +31,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.18.0",
-		"@wordpress/api-fetch": "^6.15.0",
-		"@wordpress/autop": "^3.18.0",
-		"@wordpress/blob": "^3.18.0",
-		"@wordpress/block-editor": "^10.1.0",
-		"@wordpress/blocks": "^11.17.0",
-		"@wordpress/components": "^21.1.0",
-		"@wordpress/compose": "^5.16.0",
-		"@wordpress/core-data": "^5.1.0",
-		"@wordpress/data": "^7.2.0",
-		"@wordpress/date": "^4.18.0",
-		"@wordpress/deprecated": "^3.18.0",
-		"@wordpress/dom": "^3.18.0",
-		"@wordpress/element": "^4.16.0",
-		"@wordpress/hooks": "^3.18.0",
-		"@wordpress/html-entities": "^3.18.0",
-		"@wordpress/i18n": "^4.18.0",
-		"@wordpress/icons": "^9.9.0",
-		"@wordpress/keycodes": "^3.18.0",
-		"@wordpress/notices": "^3.18.0",
-		"@wordpress/primitives": "^3.16.0",
-		"@wordpress/reusable-blocks": "^3.16.0",
-		"@wordpress/rich-text": "^5.16.0",
-		"@wordpress/server-side-render": "^3.16.0",
-		"@wordpress/url": "^3.19.0",
-		"@wordpress/viewport": "^4.16.0",
+		"@wordpress/a11y": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
+		"@wordpress/autop": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/blob": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/block-editor": "^10.1.1-next.4d3b314fd5.0",
+		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
+		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
+		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
+		"@wordpress/core-data": "^5.1.1-next.4d3b314fd5.0",
+		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
+		"@wordpress/date": "^4.18.1-next.4d3b314fd5.0",
+		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/dom": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
+		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
+		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
+		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/primitives": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/reusable-blocks": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/rich-text": "^5.16.1-next.4d3b314fd5.0",
+		"@wordpress/server-side-render": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
+		"@wordpress/viewport": "^4.16.1-next.4d3b314fd5.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
+	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
 }

package/src/archives/index.php

@@ -17,11 +17,12 @@
 function render_block_core_archives( $attributes ) {
 	$show_post_count = ! empty( $attributes['showPostCounts'] );
 	$type            = isset( $attributes['type'] ) ? $attributes['type'] : 'monthly';
-	$class           = '';
+
+	$class = 'wp-block-archives-list';
 
 	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
 
-		$class .= ' wp-block-archives-dropdown';
+		$class = 'wp-block-archives-dropdown';
 
 		$dropdown_id = wp_unique_id( 'wp-block-archives-' );
 		$title       = __( 'Archives' );
@@ -40,9 +41,7 @@ function render_block_core_archives( $attributes ) {
 
 		$archives = wp_get_archives( $dropdown_args );
 
-		$classnames = esc_attr( $class );
-
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
 
 		switch ( $dropdown_args['type'] ) {
 			case 'yearly':
@@ -75,8 +74,6 @@ function render_block_core_archives( $attributes ) {
 		);
 	}
 
-	$class .= ' wp-block-archives-list';
-
 	/** This filter is documented in wp-includes/widgets/class-wp-widget-archives.php */
 	$archives_args = apply_filters(
 		'widget_archives_args',

package/src/classic.scss

@@ -0,0 +1,15 @@
+// These rules are needed for backwards compatibility.
+.wp-block-button__link {
+	color: $white;
+	background-color: #32373c;
+	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
+
+	// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+	box-shadow: none;
+	text-decoration: none;
+
+	// The extra 2px are added to size solids the same as the outline versions.
+	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+
+	font-size: 1.125em;
+}

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,14 +48,22 @@ 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 += 1;
+				$inner_content  = block_core_comment_template_render_comments(
+					$children,
+					$block
+				);
+				$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
+				$comment_depth -= 1;
+			} 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 );

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

@@ -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/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';
 
@@ -55,8 +58,12 @@ 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-text-align-${ align }` ]: align,
@@ -108,6 +115,12 @@ function ParagraphBlock( {
 					</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/post-content/edit.js

@@ -46,7 +46,9 @@ function EditableContent( { layout, context = {} } ) {
 		return getSettings()?.supportsLayout;
 	}, [] );
 	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const usedLayout = ! layout?.type
+		? { ...defaultLayout, ...layout, type: 'default' }
+		: { ...defaultLayout, ...layout };
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		postType,

package/src/tag-cloud/index.php

@@ -28,14 +28,7 @@ function render_block_core_tag_cloud( $attributes ) {
 	$tag_cloud = wp_tag_cloud( $args );
 
 	if ( ! $tag_cloud ) {
-		$labels    = get_taxonomy_labels( get_taxonomy( $attributes['taxonomy'] ) );
-		$tag_cloud = esc_html(
-			sprintf(
-				/* translators: %s: taxonomy name */
-				__( 'Your site doesn’t have any %s, so there’s nothing to display here at the moment.' ),
-				strtolower( $labels->name )
-			)
-		);
+		$tag_cloud = __( 'There’s no content to show here yet.' );
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();