@wordpress/block-library 7.19.0 → 8.1.0

package/src/page-list/test/convert-to-links-modal.js

@@ -1,10 +1,28 @@
 /**
  * Internal dependencies
  */
-import { convertSelectedBlockToNavigationLinks } from '../convert-to-links-modal';
+
+import { convertToNavigationLinks } from '../convert-to-navigation-links';
+
+// Mock createBlock to avoid creating the blocks in test environment
+// as convertToNavigationLinks calls this method internally.
+jest.mock( '@wordpress/blocks', () => {
+	const blocks = jest.requireActual( '@wordpress/blocks' );
+
+	return {
+		...blocks,
+		createBlock( name, attributes, innerBlocks ) {
+			return {
+				name,
+				attributes,
+				innerBlocks,
+			};
+		},
+	};
+} );
 
 describe( 'page list convert to links', () => {
-	describe( 'convertSelectedBlockToNavigationLinks', () => {
+	describe( 'convertToNavigationLinks', () => {
 		it( 'Can create submenus', () => {
 			const pages = [
 				{
@@ -88,22 +106,10 @@ describe( 'page list convert to links', () => {
 					type: 'page',
 				},
 			];
-			const replaceBlock = jest.fn();
-			const createBlock = jest.fn(
-				( name, attributes, innerBlocks ) => ( {
-					name,
-					attributes,
-					innerBlocks,
-				} )
-			);
-			const convertLinks = convertSelectedBlockToNavigationLinks( {
-				pages,
-				clientId: 'testId',
-				replaceBlock,
-				createBlock,
-			} );
-			convertLinks();
-			expect( replaceBlock.mock.calls?.[ 0 ]?.[ 1 ] ).toEqual( [
+
+			const convertLinks = convertToNavigationLinks( pages );
+
+			expect( convertLinks ).toEqual( [
 				{
 					attributes: {
 						id: 2,
@@ -280,22 +286,10 @@ describe( 'page list convert to links', () => {
 					type: 'page',
 				},
 			];
-			const replaceBlock = jest.fn();
-			const createBlock = jest.fn(
-				( name, attributes, innerBlocks ) => ( {
-					name,
-					attributes,
-					innerBlocks,
-				} )
-			);
-			const convertLinks = convertSelectedBlockToNavigationLinks( {
-				pages,
-				clientId: 'testId',
-				replaceBlock,
-				createBlock,
-			} );
-			convertLinks();
-			expect( replaceBlock.mock.calls?.[ 0 ]?.[ 1 ] ).toEqual( [
+
+			const convertLinks = convertToNavigationLinks( pages );
+
+			expect( convertLinks ).toEqual( [
 				{
 					attributes: {
 						id: 2,

package/src/page-list-item/block.json

@@ -0,0 +1,51 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/page-list-item",
+	"title": "Page List Item",
+	"category": "widgets",
+	"parent": [ "core/page-list" ],
+	"description": "Displays a page inside a list of all pages.",
+	"keywords": [ "page", "menu", "navigation" ],
+	"textdomain": "default",
+	"attributes": {
+		"id": {
+			"type": "number"
+		},
+		"label": {
+			"type": "string"
+		},
+		"title": {
+			"type": "string"
+		},
+		"link": {
+			"type": "string"
+		},
+		"hasChildren": {
+			"type": "boolean"
+		}
+	},
+	"usesContext": [
+		"textColor",
+		"customTextColor",
+		"backgroundColor",
+		"customBackgroundColor",
+		"overlayTextColor",
+		"customOverlayTextColor",
+		"overlayBackgroundColor",
+		"customOverlayBackgroundColor",
+		"fontSize",
+		"customFontSize",
+		"showSubmenuIcon",
+		"style",
+		"openSubmenusOnClick"
+	],
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"lock": false,
+		"inserter": false
+	},
+	"editorStyle": "wp-block-page-list-editor",
+	"style": "wp-block-page-list"
+}

package/src/page-list-item/edit.js

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { ItemSubmenuIcon } from '../navigation-link/icons';
+import {
+	getColors,
+	getNavigationChildBlockProps,
+} from '../navigation/edit/utils';
+
+function useFrontPageId() {
+	return useSelect( ( select ) => {
+		const canReadSettings = select( coreStore ).canUser(
+			'read',
+			'settings'
+		);
+		if ( ! canReadSettings ) {
+			return undefined;
+		}
+
+		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
+		return site?.show_on_front === 'page' && site?.page_on_front;
+	}, [] );
+}
+
+export default function PageListItemEdit( { context, attributes } ) {
+	const { id, label, link, hasChildren } = attributes;
+	const isNavigationChild = 'showSubmenuIcon' in context;
+	const frontPageId = useFrontPageId();
+
+	const innerBlocksColors = getColors( context, true );
+
+	const navigationChildBlockProps =
+		getNavigationChildBlockProps( innerBlocksColors );
+	const blockProps = useBlockProps( navigationChildBlockProps, {
+		className: 'wp-block-pages-list__item',
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps );
+
+	return (
+		<li
+			key={ id }
+			className={ classnames( 'wp-block-pages-list__item', {
+				'has-child': hasChildren,
+				'wp-block-navigation-item': isNavigationChild,
+				'open-on-click': context.openSubmenusOnClick,
+				'open-on-hover-click':
+					! context.openSubmenusOnClick && context.showSubmenuIcon,
+				'menu-item-home': id === frontPageId,
+			} ) }
+		>
+			{ hasChildren && context.openSubmenusOnClick ? (
+				<>
+					<button
+						className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+						aria-expanded="false"
+					>
+						{ label }
+					</button>
+					<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
+						<ItemSubmenuIcon />
+					</span>
+				</>
+			) : (
+				<a
+					className={ classnames( 'wp-block-pages-list__item__link', {
+						'wp-block-navigation-item__content': isNavigationChild,
+					} ) }
+					href={ link }
+				>
+					{ label }
+				</a>
+			) }
+			{ hasChildren && (
+				<>
+					{ ! context.openSubmenusOnClick &&
+						context.showSubmenuIcon && (
+							<button
+								className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
+								aria-expanded="false"
+							>
+								<ItemSubmenuIcon />
+							</button>
+						) }
+					<ul { ...innerBlocksProps }></ul>
+				</>
+			) }
+		</li>
+	);
+}

package/src/page-list-item/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { pages as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit.js';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	__experimentalLabel: ( { label } ) => label,
+	icon,
+	example: {},
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/page-list-item/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/paragraph/index.js

@@ -30,12 +30,6 @@ export const settings = {
 			content: __(
 				'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
 			),
-			style: {
-				typography: {
-					fontSize: 28,
-				},
-			},
-			dropCap: true,
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {

package/src/post-author/edit.js

@@ -62,7 +62,7 @@ function PostAuthorEdit( {
 		attributes;
 	const avatarSizes = [];
 	const authorName = authorDetails?.name || __( 'Post Author' );
-	if ( authorDetails ) {
+	if ( authorDetails?.avatar_urls ) {
 		Object.keys( authorDetails.avatar_urls ).forEach( ( size ) => {
 			avatarSizes.push( {
 				value: size,
@@ -103,6 +103,7 @@ function PostAuthorEdit( {
 						authorOptions.length &&
 						( ( showCombobox && (
 							<ComboboxControl
+								__nextHasNoMarginBottom
 								label={ __( 'Author' ) }
 								options={ authorOptions }
 								value={ authorId }
@@ -172,7 +173,7 @@ function PostAuthorEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				{ showAvatar && authorDetails && (
+				{ showAvatar && authorDetails?.avatar_urls && (
 					<div className="wp-block-post-author__avatar">
 						<img
 							width={ attributes.avatarSize }

package/src/post-content/index.php

@@ -25,8 +25,7 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 	if ( isset( $seen_ids[ $post_id ] ) ) {
 		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
 		// is set in `wp_debug_mode()`.
-		$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
-			defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
+		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
 
 		return $is_debug ?
 			// translators: Visible only in the front end, this warning takes the place of a faulty block.

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

@@ -19,14 +19,19 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
+	// Check is needed for backward compatibility with third-party plugins
+	// that might rely on the `in_the_loop` check; calling `the_post` sets it to true.
+	if ( ! in_the_loop() && have_posts() ) {
+		the_post();
+	}
+
 	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
 	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
-		$attr['alt'] = $post_title;
+		$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
 	}
 
 	if ( ! empty( $attributes['height'] ) ) {

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

@@ -66,7 +66,6 @@ const Overlay = ( {
 			) }
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown
-					__experimentalHasMultipleOrigins
 					__experimentalIsRenderedInSidebar
 					settings={ [
 						{
@@ -98,6 +97,7 @@ const Overlay = ( {
 					panelId={ clientId }
 				>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Overlay opacity' ) }
 						value={ dimRatio }
 						onChange={ ( newDimRatio ) =>

package/src/post-template/block.json

@@ -22,6 +22,14 @@
 		"__experimentalLayout": {
 			"allowEditing": false
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/preformatted/transforms.js

@@ -34,7 +34,10 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				createBlock( 'core/paragraph', attributes ),
+				createBlock( 'core/paragraph', {
+					...attributes,
+					content: attributes.content.replace( /\n/g, '<br>' ),
+				} ),
 		},
 		{
 			type: 'block',

package/src/query/block.json

@@ -50,14 +50,6 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"color": {
-			"gradients": true,
-			"link": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true
-			}
-		},
 		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-query-editor"