@wordpress/block-library 7.14.1 → 7.15.0

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

package/src/post-navigation-link/edit.js

@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ToggleControl,
+	PanelBody,
+} from '@wordpress/components';
 import {
 	InspectorControls,
 	RichText,
@@ -14,15 +19,23 @@ import {
 	AlignmentToolbar,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 export default function PostNavigationLinkEdit( {
-	attributes: { type, label, showTitle, textAlign, linkLabel },
+	attributes: { type, label, showTitle, textAlign, linkLabel, arrow },
 	setAttributes,
 } ) {
 	const isNext = type === 'next';
 	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
 
+	const arrowMap = {
+		none: '',
+		arrow: isNext ? '→' : '←',
+		chevron: isNext ? '»' : '«',
+	};
+
+	const displayArrow = arrowMap[ arrow ];
+
 	if ( showTitle ) {
 		/* translators: Label before for next and previous post. There is a space after the colon. */
 		placeholder = isNext ? __( 'Next: ' ) : __( 'Previous: ' );
@@ -63,6 +76,39 @@ export default function PostNavigationLinkEdit( {
 							}
 						/>
 					) }
+					<ToggleGroupControl
+						label={ __( 'Arrow' ) }
+						value={ arrow }
+						onChange={ ( value ) => {
+							setAttributes( { arrow: value } );
+						} }
+						help={ __(
+							'A decorative arrow for the next and previous link.'
+						) }
+						isBlock
+					>
+						<ToggleGroupControlOption
+							value="none"
+							label={ _x(
+								'None',
+								'Arrow option for Next/Previous link'
+							) }
+						/>
+						<ToggleGroupControlOption
+							value="arrow"
+							label={ _x(
+								'Arrow',
+								'Arrow option for Next/Previous link'
+							) }
+						/>
+						<ToggleGroupControlOption
+							value="chevron"
+							label={ _x(
+								'Chevron',
+								'Arrow option for Next/Previous link'
+							) }
+						/>
+					</ToggleGroupControl>
 				</PanelBody>
 			</InspectorControls>
 			<BlockControls>
@@ -74,6 +120,13 @@ export default function PostNavigationLinkEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
+				{ ! isNext && displayArrow && (
+					<span
+						className={ `wp-block-post-navigation-link__arrow-previous is-arrow-${ arrow }` }
+					>
+						{ displayArrow }
+					</span>
+				) }
 				<RichText
 					tagName="a"
 					aria-label={ ariaLabel }
@@ -92,6 +145,14 @@ export default function PostNavigationLinkEdit( {
 						{ __( 'An example title' ) }
 					</a>
 				) }
+				{ isNext && displayArrow && (
+					<span
+						className={ `wp-block-post-navigation-link__arrow-next is-arrow-${ arrow }` }
+						aria-hidden={ true }
+					>
+						{ displayArrow }
+					</span>
+				) }
 			</div>
 		</>
 	);

package/src/post-navigation-link/index.php

@@ -34,6 +34,18 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	$link   = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' );
 	$label  = '';
 
+	$arrow_map = array(
+		'none'    => '',
+		'arrow'   => array(
+			'next'     => '→',
+			'previous' => '←',
+		),
+		'chevron' => array(
+			'next'     => '»',
+			'previous' => '«',
+		),
+	);
+
 	// If a custom label is provided, make this a link.
 	// `$label` is used to prepend the provided label, if we want to show the page title as well.
 	if ( isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ) {
@@ -71,6 +83,17 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 		}
 	}
 
+	// Display arrows.
+	if ( isset( $attributes['arrow'] ) && ! empty( $attributes['arrow'] ) && 'none' !== $attributes['arrow'] ) {
+		$arrow = $arrow_map[ $attributes['arrow'] ][ $navigation_type ];
+
+		if ( 'next' === $navigation_type ) {
+			$format = '%link <span class="wp-block-post-navigation-link__arrow-next is-arrow-' . $attributes['arrow'] . '" aria-hidden="true">' . $arrow . '</span>';
+		} else {
+			$format = '<span class="wp-block-post-navigation-link__arrow-previous is-arrow-' . $attributes['arrow'] . '" aria-hidden="true">' . $arrow . '</span> %link';
+		}
+	}
+
 	// The dynamic portion of the function name, `$navigation_type`,
 	// refers to the type of adjacency, 'next' or 'previous'.
 	$get_link_function = "get_{$navigation_type}_post_link";

package/src/post-navigation-link/style.scss

@@ -0,0 +1,23 @@
+.wp-block-post-navigation-link {
+
+	.wp-block-post-navigation-link__arrow-previous {
+		display: inline-block;
+		margin-right: 1ch;
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+
+	.wp-block-post-navigation-link__arrow-next {
+		display: inline-block;
+		margin-left: 1ch;
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+
+}

package/src/post-template/edit.js

@@ -17,7 +17,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 
 const TEMPLATE = [
 	[ 'core/post-title' ],
@@ -101,19 +101,6 @@ export default function PostTemplateEdit( {
 } ) {
 	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
-
-	let categorySlug = null;
-	if ( templateSlug?.startsWith( 'category-' ) ) {
-		categorySlug = templateSlug.replace( 'category-', '' );
-	}
-	const { records: categories, hasResolved: hasResolvedCategories } =
-		useEntityRecords( 'taxonomy', 'category', {
-			context: 'view',
-			per_page: -1,
-			_fields: [ 'id' ],
-			slug: categorySlug,
-		} );
-
 	const { posts, blocks } = useSelect(
 		( select ) => {
 			const { getEntityRecords, getTaxonomies } = select( coreStore );
@@ -123,12 +110,22 @@ export default function PostTemplateEdit( {
 				per_page: -1,
 				context: 'view',
 			} );
+			const templateCategory =
+				inherit &&
+				templateSlug?.startsWith( 'category-' ) &&
+				getEntityRecords( 'taxonomy', 'category', {
+					context: 'view',
+					per_page: 1,
+					_fields: [ 'id' ],
+					slug: templateSlug.replace( 'category-', '' ),
+				} );
 			const query = {
 				offset: perPage ? perPage * ( page - 1 ) + offset : 0,
 				order,
 				orderby: orderBy,
 			};
-			if ( taxQuery ) {
+			// There is no need to build the taxQuery if we inherit.
+			if ( taxQuery && ! inherit ) {
 				// We have to build the tax query for the REST API and use as
 				// keys the taxonomies `rest_base` with the `term ids` as values.
 				const builtTaxQuery = Object.entries( taxQuery ).reduce(
@@ -174,11 +171,8 @@ export default function PostTemplateEdit( {
 				if ( templateSlug?.startsWith( 'archive-' ) ) {
 					query.postType = templateSlug.replace( 'archive-', '' );
 					postType = query.postType;
-				} else if ( !! categorySlug && hasResolvedCategories ) {
-					query.taxQuery = {
-						category: categories.map( ( { id } ) => id ),
-					};
-					taxQuery = query.taxQuery;
+				} else if ( templateCategory ) {
+					query.categories = templateCategory[ 0 ]?.id;
 				}
 			}
 			// When we preview Query Loop blocks we should prefer the current
@@ -210,9 +204,6 @@ export default function PostTemplateEdit( {
 			parents,
 			restQueryArgs,
 			previewPostType,
-			categories,
-			categorySlug,
-			hasResolvedCategories,
 		]
 	);
 	const blockContexts = useMemo(

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { debounce } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,6 +13,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
+import { debounce } from '@wordpress/compose';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 
 /**
@@ -137,7 +133,7 @@ export default function QueryInspectorControls( {
 								label={ __( 'Post type' ) }
 								onChange={ onPostTypeChange }
 								help={ __(
-									'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
+									'WordPress contains different types of content and they are divided into collections called “Post types”. By default there are a few different ones such as blog posts and pages, but plugins could add more.'
 								) }
 							/>
 						) }

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

@@ -18,7 +18,7 @@ export default function StickyControl( { value, onChange } ) {
 			value={ value }
 			onChange={ onChange }
 			help={ __(
-				'Blog posts can be "stickied", a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
+				'Blog posts can be “stickied”, a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
 			) }
 		/>
 	);

package/src/query/edit/query-placeholder.js

@@ -48,7 +48,10 @@ export default function QueryPlaceholder( {
 	);
 
 	const matchingVariation = getMatchingVariation( attributes, allVariations );
-	const icon = matchingVariation?.icon || blockType?.icon?.src;
+	const icon =
+		matchingVariation?.icon?.src ||
+		matchingVariation?.icon ||
+		blockType?.icon?.src;
 	const label = matchingVariation?.title || blockType?.title;
 	if ( isStartingBlank ) {
 		return (

package/src/query-title/edit.js

@@ -85,7 +85,7 @@ export default function QueryTitleEdit( {
 
 				<TagName { ...blockProps }>
 					{ showSearchTerm
-						? __( 'Search results for: "search term"' )
+						? __( 'Search results for: “search term”' )
 						: __( 'Search results' ) }
 				</TagName>
 			</>

package/src/quote/transforms.js

@@ -17,7 +17,7 @@ const transforms = {
 						fontSize,
 						style,
 					},
-					createBlock( 'core/paragraph', { content: value } )
+					[ createBlock( 'core/paragraph', { content: value } ) ]
 				);
 			},
 		},

package/src/read-more/edit.js

@@ -33,7 +33,7 @@ export default function ReadMore( {
 			</InspectorControls>
 			<RichText
 				tagName="a"
-				aria-label={ __( '"Read more" link text' ) }
+				aria-label={ __( '“Read more” link text' ) }
 				placeholder={ __( 'Read more' ) }
 				value={ content }
 				onChange={ ( newValue ) =>

package/src/site-tagline/block.json

@@ -4,7 +4,7 @@
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",
-	"description": "Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it's not displayed in the theme design.",
+	"description": "Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it’s not displayed in the theme design.",
 	"keywords": [ "description" ],
 	"textdomain": "default",
 	"attributes": {

package/src/social-links/edit.native.js

@@ -69,7 +69,13 @@ function SocialLinksEdit( {
 
 	function renderPlaceholder() {
 		return [ ...new Array( innerBlocks.length || 1 ) ].map(
-			( _, index ) => <View style={ placeholderStyle } key={ index } />
+			( _, index ) => (
+				<View
+					testID="social-links-placeholder"
+					style={ placeholderStyle }
+					key={ index }
+				/>
+			)
 		);
 	}
 

package/src/social-links/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social links block inserts block with the default icons and the WordPress link set as active 1`] = `
+"<!-- wp:social-links -->
+<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- /wp:social-links -->"
+`;
+
+exports[`Social links block shows active links correctly when not selected 1`] = `
+"<!-- wp:social-links -->
+<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- /wp:social-links -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Social links block shows the ghost placeholder when no icon is active 1`] = `
+"<!-- wp:social-links -->
+<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- /wp:social-links -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Social links block shows the social links bottom sheet when tapping on the inline appender 1`] = `
+"<!-- wp:social-links -->
+<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+
+<!-- wp:social-link {\\"service\\":\\"instagram\\"} /-->
+
+<!-- wp:social-link-amazon {\\"url\\":\\"\\"} /--></ul>
+<!-- /wp:social-links -->"
+`;