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

package/src/group/test/edit.native.js

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	within,
+	getBlock,
+	waitFor,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const NESTED_GROUP_BLOCK = `<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:image -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->`;
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Group block', () => {
+	it( 'inserts block and adds a Heading block as an inner block', async () => {
+		const screen = await initializeEditor();
+		const { getByTestId, getByText } = screen;
+
+		// Add block
+		await addBlock( screen, 'Group' );
+
+		// Get block
+		const groupBlock = await getBlock( screen, 'Group' );
+		fireEvent.press( groupBlock );
+
+		// Append a block in the Group block
+		const appenderButton =
+			within( groupBlock ).getByTestId( 'appender-button' );
+		fireEvent.press( appenderButton );
+
+		// Look for a block in the inserter
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		// Add a block
+		fireEvent.press( await waitFor( () => getByText( 'Heading' ) ) );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'ungroups inner blocks', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: NESTED_GROUP_BLOCK,
+		} );
+		const { getByA11yLabel } = screen;
+
+		// Get block
+		let groupBlock = await getBlock( screen, 'Group' );
+		fireEvent.press( groupBlock );
+
+		// Get Ungroup button
+		let ungroupButton = getByA11yLabel( /Ungroup/ );
+		fireEvent.press( ungroupButton );
+
+		// Press Group block again
+		groupBlock = await getBlock( screen, 'Group', { rowIndex: 2 } );
+		fireEvent.press( groupBlock );
+
+		// Ungroup last block
+		ungroupButton = getByA11yLabel( /Ungroup/ );
+		fireEvent.press( ungroupButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

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/list-item/edit.js

@@ -65,6 +65,7 @@ export default function ListItemEdit( {
 	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
+		renderAppender: false,
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );

package/src/missing/edit.js

@@ -4,8 +4,8 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { RawHTML } from '@wordpress/element';
 import { Button } from '@wordpress/components';
-import { getBlockType, createBlock } from '@wordpress/blocks';
-import { withDispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { withDispatch, useSelect } from '@wordpress/data';
 import {
 	Warning,
 	useBlockProps,
@@ -13,10 +13,21 @@ import {
 } from '@wordpress/block-editor';
 import { safeHTML } from '@wordpress/dom';
 
-function MissingBlockWarning( { attributes, convertToHTML } ) {
+function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 	const { originalName, originalUndelimitedContent } = attributes;
 	const hasContent = !! originalUndelimitedContent;
-	const hasHTMLBlock = getBlockType( 'core/html' );
+	const hasHTMLBlock = useSelect(
+		( select ) => {
+			const { canInsertBlockType, getBlockRootClientId } =
+				select( blockEditorStore );
+
+			return canInsertBlockType(
+				'core/html',
+				getBlockRootClientId( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const actions = [];
 	let messageHTML;

package/src/more/edit.js

@@ -54,7 +54,7 @@ export default function MoreEdit( {
 			</InspectorControls>
 			<div { ...useBlockProps() }>
 				<input
-					aria-label={ __( 'Read more link text' ) }
+					aria-label={ __( '“Read more” link text' ) }
 					type="text"
 					value={ customText }
 					placeholder={ DEFAULT_TEXT }

package/src/navigation/menu-items-to-blocks.js

@@ -29,9 +29,10 @@ export default function menuItemsToBlocks( menuItems ) {
  * A recursive function that maps menu item nodes to blocks.
  *
  * @param {WPNavMenuItem[]} menuItems An array of WPNavMenuItem items.
+ * @param {number}          level     An integer representing the nesting level.
  * @return {Object} Object containing innerBlocks and mapping.
  */
-function mapMenuItemsToBlocks( menuItems ) {
+function mapMenuItemsToBlocks( menuItems, level = 0 ) {
 	let mapping = {};
 
 	// The menuItem should be in menu_order sort order.
@@ -52,14 +53,22 @@ function mapMenuItemsToBlocks( menuItems ) {
 			return block;
 		}
 
-		const attributes = menuItemToBlockAttributes( menuItem );
+		const blockType = menuItem.children?.length
+			? 'core/navigation-submenu'
+			: 'core/navigation-link';
+
+		const attributes = menuItemToBlockAttributes(
+			menuItem,
+			blockType,
+			level
+		);
 
 		// If there are children recurse to build those nested blocks.
 		const {
 			innerBlocks: nestedBlocks = [], // alias to avoid shadowing
 			mapping: nestedMapping = {}, // alias to avoid shadowing
 		} = menuItem.children?.length
-			? mapMenuItemsToBlocks( menuItem.children )
+			? mapMenuItemsToBlocks( menuItem.children, level + 1 )
 			: {};
 
 		// Update parent mapping with nested mapping.
@@ -68,10 +77,6 @@ function mapMenuItemsToBlocks( menuItems ) {
 			...nestedMapping,
 		};
 
-		const blockType = menuItem.children?.length
-			? 'core/navigation-submenu'
-			: 'core/navigation-link';
-
 		// Create block with nested "innerBlocks".
 		const block = createBlock( blockType, attributes, nestedBlocks );
 
@@ -111,23 +116,29 @@ function mapMenuItemsToBlocks( menuItems ) {
 /**
  * Convert block attributes to menu item.
  *
- * @param {WPNavMenuItem} menuItem the menu item to be converted to block attributes.
+ * @param {WPNavMenuItem} menuItem  the menu item to be converted to block attributes.
+ * @param {string}        blockType The block type.
+ * @param {number}        level     An integer representing the nesting level.
  * @return {Object} the block attributes converted from the WPNavMenuItem item.
  */
-function menuItemToBlockAttributes( {
-	title: menuItemTitleField,
-	xfn,
-	classes,
-	// eslint-disable-next-line camelcase
-	attr_title,
-	object,
-	// eslint-disable-next-line camelcase
-	object_id,
-	description,
-	url,
-	type: menuItemTypeField,
-	target,
-} ) {
+function menuItemToBlockAttributes(
+	{
+		title: menuItemTitleField,
+		xfn,
+		classes,
+		// eslint-disable-next-line camelcase
+		attr_title,
+		object,
+		// eslint-disable-next-line camelcase
+		object_id,
+		description,
+		url,
+		type: menuItemTypeField,
+		target,
+	},
+	blockType,
+	level
+) {
 	// For historical reasons, the `core/navigation-link` variation type is `tag`
 	// whereas WP Core expects `post_tag` as the `object` type.
 	// To avoid writing a block migration we perform a conversion here.
@@ -166,6 +177,12 @@ function menuItemToBlockAttributes( {
 		...( target === '_blank' && {
 			opensInNewTab: true,
 		} ),
+		...( blockType === 'core/navigation-submenu' && {
+			isTopLevelItem: level === 0,
+		} ),
+		...( blockType === 'core/navigation-link' && {
+			isTopLevelLink: level === 0,
+		} ),
 	};
 }
 

package/src/navigation/test/menu-items-to-blocks.js

@@ -189,12 +189,14 @@ describe( 'converting menu items to blocks', () => {
 				name: 'core/navigation-submenu',
 				attributes: expect.objectContaining( {
 					label: 'Top Level',
+					isTopLevelItem: true,
 				} ),
 				innerBlocks: [
 					expect.objectContaining( {
 						name: 'core/navigation-link',
 						attributes: expect.objectContaining( {
 							label: 'Child 1',
+							isTopLevelLink: false,
 						} ),
 						innerBlocks: [],
 					} ),
@@ -202,18 +204,21 @@ describe( 'converting menu items to blocks', () => {
 						name: 'core/navigation-submenu',
 						attributes: expect.objectContaining( {
 							label: 'Child 2',
+							isTopLevelItem: false,
 						} ),
 						innerBlocks: [
 							expect.objectContaining( {
 								name: 'core/navigation-submenu',
 								attributes: expect.objectContaining( {
 									label: 'Sub Child',
+									isTopLevelItem: false,
 								} ),
 								innerBlocks: [
 									expect.objectContaining( {
 										name: 'core/navigation-link',
 										attributes: expect.objectContaining( {
 											label: 'Sub Sub Child',
+											isTopLevelLink: false,
 										} ),
 										innerBlocks: [],
 									} ),
@@ -227,6 +232,7 @@ describe( 'converting menu items to blocks', () => {
 				name: 'core/navigation-link',
 				attributes: expect.objectContaining( {
 					label: 'Top Level 2',
+					isTopLevelLink: true,
 				} ),
 				innerBlocks: [],
 			} ),

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/post-excerpt/edit.js

@@ -87,7 +87,7 @@ export default function PostExcerptEditor( {
 		<RichText
 			className="wp-block-post-excerpt__more-link"
 			tagName="a"
-			aria-label={ __( '"Read more" link text' ) }
+			aria-label={ __( '“Read more” link text' ) }
 			placeholder={ __( 'Add "read more" link text' ) }
 			value={ moreText }
 			onChange={ ( newMoreText ) =>

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

@@ -29,11 +29,18 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$attr['alt'] = $post_title;
 	}
 
+	if ( ! empty( $attributes['height'] ) ) {
+		$extra_styles = "height:{$attributes['height']};";
+		if ( ! empty( $attributes['scale'] ) ) {
+			$extra_styles .= "object-fit:{$attributes['scale']};";
+		}
+		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
+	}
+
 	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
 	if ( ! $featured_image ) {
 		return '';
 	}
-	$wrapper_attributes = get_block_wrapper_attributes();
 	if ( $is_link ) {
 		$link_target    = $attributes['linkTarget'];
 		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
@@ -49,23 +56,9 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = $featured_image . $overlay_markup;
 	}
 
-	$has_width  = ! empty( $attributes['width'] );
-	$has_height = ! empty( $attributes['height'] );
-	if ( ! $has_height && ! $has_width ) {
-		return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
-	}
-
-	if ( $has_width ) {
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => "width:{$attributes['width']};" ) );
-	}
-
-	if ( $has_height ) {
-		$image_styles = "height:{$attributes['height']};";
-		if ( ! empty( $attributes['scale'] ) ) {
-			$image_styles .= "object-fit:{$attributes['scale']};";
-		}
-		$featured_image = str_replace( 'src=', 'style="' . esc_attr( $image_styles ) . '" src=', $featured_image );
-	}
+	$wrapper_attributes = empty( $attributes['width'] )
+		? get_block_wrapper_attributes()
+		: get_block_wrapper_attributes( array( 'style' => "width:{$attributes['width']};" ) );
 
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }

package/src/post-navigation-link/block.json

@@ -24,6 +24,10 @@
 		"linkLabel": {
 			"type": "boolean",
 			"default": false
+		},
+		"arrow": {
+			"type": "string",
+			"default": "none"
 		}
 	},
 	"supports": {
@@ -45,5 +49,6 @@
 				"fontSize": true
 			}
 		}
-	}
+	},
+	"style": "wp-block-post-navigation-link"
 }