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

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 -->"
+`;

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

@@ -0,0 +1,199 @@
+/**
+ * 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';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Social links block', () => {
+	it( 'inserts block with the default icons and the WordPress link set as active', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Social Icons' );
+
+		// Get block
+		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+
+		// Trigger inner blocks layout
+		const innerBlockListWrapper = await waitFor( () =>
+			within( socialLinksBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 300,
+				},
+			},
+		} );
+
+		// Check the WordPress icon has a URL set (active)
+		const firstLinkBlock = await getBlock( screen, 'Social Icon' );
+		fireEvent.press( firstLinkBlock );
+		const firstLink = within( socialLinksBlock ).getByAccessibilityHint(
+			/WordPress has URL set/
+		);
+		expect( firstLink ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'shows active links correctly when not selected', async () => {
+		const screen = await initializeEditor();
+
+		// Add Social Icons block
+		await addBlock( screen, 'Social Icons' );
+
+		// Get block
+		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+
+		// Trigger inner blocks layout
+		const innerBlockListWrapper = await waitFor( () =>
+			within( socialLinksBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 300,
+				},
+			},
+		} );
+
+		// Add Paragraph block
+		await addBlock( screen, 'Paragraph' );
+
+		// Check there's only one active social link
+		const socialLinks =
+			within( socialLinksBlock ).getAllByA11yLabel( / social icon/ );
+		expect( socialLinks.length ).toBe( 1 );
+
+		// Check the WordPress link is shown when unselected
+		const firstLinkBlock = await getBlock( screen, 'Social Icon' );
+		fireEvent.press( firstLinkBlock );
+		const firstLink = within( socialLinksBlock ).getByAccessibilityHint(
+			/WordPress has URL set/
+		);
+		expect( firstLink ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'shows the social links bottom sheet when tapping on the inline appender', async () => {
+		const screen = await initializeEditor();
+		const { getByTestId, getByText } = screen;
+
+		// Add block
+		await addBlock( screen, 'Social Icons' );
+
+		// Get block
+		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+		fireEvent.press( socialLinksBlock );
+
+		// Trigger inner blocks layout
+		const innerBlockListWrapper = await waitFor( () =>
+			within( socialLinksBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 300,
+				},
+			},
+		} );
+
+		// Open the links bottom sheet
+		const appenderButton =
+			within( socialLinksBlock ).getByTestId( 'appender-button' );
+		fireEvent.press( appenderButton );
+
+		// Find a social link 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 the Amazon link
+		const amazonBlock = await waitFor( () => getByText( 'Amazon' ) );
+		expect( amazonBlock ).toBeVisible();
+
+		fireEvent.press( amazonBlock );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'shows the ghost placeholder when no icon is active', async () => {
+		const screen = await initializeEditor();
+		const { getByA11yLabel } = screen;
+
+		// Add block
+		await addBlock( screen, 'Social Icons' );
+
+		// Get block
+		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+
+		// Trigger inner blocks layout
+		const innerBlockListWrapper = await waitFor( () =>
+			within( socialLinksBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 300,
+				},
+			},
+		} );
+
+		// Get the first social link
+		const firstLinkBlock = await getBlock( screen, 'Social Icon' );
+		fireEvent.press( firstLinkBlock );
+
+		// Open block actions menu
+		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		fireEvent.press( blockActionsButton );
+
+		// Delete the social link
+		const deleteButton = getByA11yLabel( /Remove block/ );
+		fireEvent.press( deleteButton );
+
+		// Add Paragraph block
+		await addBlock( screen, 'Paragraph' );
+
+		// Check the ghost placeholders are visible
+		const socialLinks = within( socialLinksBlock ).getAllByTestId(
+			'social-links-placeholder'
+		);
+		expect( socialLinks.length ).toBe( 3 );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/style.scss

@@ -30,6 +30,7 @@
 @import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
+@import "./post-navigation-link/style.scss";
 @import "./post-terms/style.scss";
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";

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();