@wordpress/block-library 6.0.23 → 7.0.0

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

@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import { FormTokenField } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { getEntitiesInfo, useTaxonomies } from '../../utils';
+import { MAX_FETCHED_TERMS } from '../../constants';
+
+// Helper function to get the term id based on user input in terms `FormTokenField`.
+const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
+	// First we check for exact match by `term.id` or case sensitive `term.name` match.
+	const termId = termValue?.id || termsMappedByName[ termValue ]?.id;
+	if ( termId ) return termId;
+	/**
+	 * Here we make an extra check for entered terms in a non case sensitive way,
+	 * to match user expectations, due to `FormTokenField` behaviour that shows
+	 * suggestions which are case insensitive.
+	 *
+	 * Although WP tries to discourage users to add terms with the same name (case insensitive),
+	 * it's still possible if you manually change the name, as long as the terms have different slugs.
+	 * In this edge case we always apply the first match from the terms list.
+	 */
+	const termValueLower = termValue.toLocaleLowerCase();
+	for ( const term in termsMappedByName ) {
+		if ( term.toLocaleLowerCase() === termValueLower ) {
+			return termsMappedByName[ term ].id;
+		}
+	}
+};
+
+function TaxonomyControls( { onChange, query } ) {
+	const taxonomies = useTaxonomies( query.postType );
+	const taxonomiesInfo = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const termsQuery = { per_page: MAX_FETCHED_TERMS };
+			const _taxonomiesInfo = taxonomies?.map( ( { slug, name } ) => {
+				const _terms = getEntityRecords( 'taxonomy', slug, termsQuery );
+				return {
+					slug,
+					name,
+					terms: getEntitiesInfo( _terms ),
+				};
+			} );
+			return _taxonomiesInfo;
+		},
+		[ taxonomies ]
+	);
+	const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => {
+		const taxonomyInfo = taxonomiesInfo.find(
+			( { slug } ) => slug === taxonomySlug
+		);
+		if ( ! taxonomyInfo ) return;
+		const termIds = Array.from(
+			newTermValues.reduce( ( accumulator, termValue ) => {
+				const termId = getTermIdByTermValue(
+					taxonomyInfo.terms.mapByName,
+					termValue
+				);
+				if ( termId ) accumulator.add( termId );
+				return accumulator;
+			}, new Set() )
+		);
+		const newTaxQuery = {
+			...query.taxQuery,
+			[ taxonomySlug ]: termIds,
+		};
+		onChange( { taxQuery: newTaxQuery } );
+	};
+	// Returns only the existing term ids in proper format to be
+	// used in `FormTokenField`. This prevents the component from
+	// crashing in the editor, when non existing term ids were provided.
+	const getExistingTaxQueryValue = ( taxonomySlug ) => {
+		const taxonomyInfo = taxonomiesInfo.find(
+			( { slug } ) => slug === taxonomySlug
+		);
+		if ( ! taxonomyInfo ) return [];
+		return ( query.taxQuery?.[ taxonomySlug ] || [] ).reduce(
+			( accumulator, termId ) => {
+				const term = taxonomyInfo.terms.mapById[ termId ];
+				if ( term ) {
+					accumulator.push( {
+						id: termId,
+						value: term.name,
+					} );
+				}
+				return accumulator;
+			},
+			[]
+		);
+	};
+	return (
+		<>
+			{ !! taxonomiesInfo?.length &&
+				taxonomiesInfo.map( ( { slug, name, terms } ) => {
+					if ( ! terms?.names?.length ) {
+						return null;
+					}
+					return (
+						<FormTokenField
+							key={ slug }
+							label={ name }
+							value={ getExistingTaxQueryValue( slug ) }
+							suggestions={ terms.names }
+							onChange={ onTermsChange( slug ) }
+						/>
+					);
+				} ) }
+		</>
+	);
+}
+
+export default TaxonomyControls;

package/src/query/test/utils.js

@@ -2,15 +2,17 @@
  * Internal dependencies
  */
 import { terms } from './fixtures';
-import { getTermsInfo } from '../utils';
+import { getEntitiesInfo } from '../utils';
 
 describe( 'Query block utils', () => {
-	describe( 'getTermsInfo', () => {
+	describe( 'getEntitiesInfo', () => {
 		it( 'should return an empty object when no terms provided', () => {
-			expect( getTermsInfo() ).toEqual( { terms: undefined } );
+			expect( getEntitiesInfo() ).toEqual( {
+				terms: undefined,
+			} );
 		} );
 		it( 'should return proper terms info object', () => {
-			expect( getTermsInfo( terms ) ).toEqual(
+			expect( getEntitiesInfo( terms ) ).toEqual(
 				expect.objectContaining( {
 					mapById: expect.objectContaining( {
 						4: expect.objectContaining( { name: 'nba' } ),

package/src/query/utils.js

@@ -6,53 +6,43 @@ import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
- * WordPress term object from REST API.
- * Categories ref: https://developer.wordpress.org/rest-api/reference/categories/
- * Tags ref: https://developer.wordpress.org/rest-api/reference/tags/
- *
- * @typedef {Object} WPTerm
- * @property {number} id          Unique identifier for the term.
- * @property {number} count       Number of published posts for the term.
- * @property {string} description HTML description of the term.
- * @property {string} link        URL of the term.
- * @property {string} name        HTML title for the term.
- * @property {string} slug        An alphanumeric identifier for the term unique to its type.
- * @property {string} taxonomy    Type attribution for the term.
- * @property {Object} meta        Meta fields
- * @property {number} [parent]    The parent term ID.
+ * @typedef IHasNameAndId
+ * @property {string|number} id   The entity's id.
+ * @property {string}        name The entity's name.
  */
 
 /**
  * The object used in Query block that contains info and helper mappings
- * from an array of WPTerm.
+ * from an array of IHasNameAndId objects.
  *
- * @typedef {Object} QueryTermsInfo
- * @property {WPTerm[]}               terms     The array of terms.
- * @property {Object<string, WPTerm>} mapById   Object mapping with the term id as key and the term as value.
- * @property {Object<string, WPTerm>} mapByName Object mapping with the term name as key and the term as value.
- * @property {string[]}               names     Array with the terms' names.
+ * @typedef {Object} QueryEntitiesInfo
+ * @property {IHasNameAndId[]}               entities  The array of entities.
+ * @property {Object<string, IHasNameAndId>} mapById   Object mapping with the id as key and the entity as value.
+ * @property {Object<string, IHasNameAndId>} mapByName Object mapping with the name as key and the entity as value.
+ * @property {string[]}                      names     Array with the entities' names.
  */
 
 /**
- * Returns a helper object with mapping from WPTerms.
+ * Returns a helper object with mapping from Objects that implement
+ * the `IHasNameAndId` interface. The returned object is used for
+ * integration with `FormTokenField` component.
  *
- * @param {WPTerm[]} terms The terms to extract of helper object.
- * @return {QueryTermsInfo} The object with the terms information.
+ * @param {IHasNameAndId[]} entities The entities to extract of helper object.
+ * @return {QueryEntitiesInfo} The object with the entities information.
  */
-export const getTermsInfo = ( terms ) => {
-	const mapping = terms?.reduce(
-		( accumulator, term ) => {
+export const getEntitiesInfo = ( entities ) => {
+	const mapping = entities?.reduce(
+		( accumulator, entity ) => {
 			const { mapById, mapByName, names } = accumulator;
-			mapById[ term.id ] = term;
-			mapByName[ term.name ] = term;
-			names.push( term.name );
+			mapById[ entity.id ] = entity;
+			mapByName[ entity.name ] = entity;
+			names.push( entity.name );
 			return accumulator;
 		},
 		{ mapById: {}, mapByName: {}, names: [] }
 	);
-
 	return {
-		terms,
+		entities,
 		...mapping,
 	};
 };
@@ -65,16 +55,14 @@ export const getTermsInfo = ( terms ) => {
  * @return {Object} The helper object related to post types.
  */
 export const usePostTypes = () => {
-	const { postTypes } = useSelect( ( select ) => {
+	const postTypes = useSelect( ( select ) => {
 		const { getPostTypes } = select( coreStore );
 		const excludedPostTypes = [ 'attachment' ];
 		const filteredPostTypes = getPostTypes( { per_page: -1 } )?.filter(
 			( { viewable, slug } ) =>
 				viewable && ! excludedPostTypes.includes( slug )
 		);
-		return {
-			postTypes: filteredPostTypes,
-		};
+		return filteredPostTypes;
 	}, [] );
 	const postTypesTaxonomiesMap = useMemo( () => {
 		if ( ! postTypes?.length ) return;
@@ -94,6 +82,28 @@ export const usePostTypes = () => {
 	return { postTypesTaxonomiesMap, postTypesSelectOptions };
 };
 
+/**
+ * Hook that returns the taxonomies associated with a specific post type.
+ *
+ * @param {string} postType The post type from which to retrieve the associated taxonomies.
+ * @return {Object[]} An array of the associated taxonomies.
+ */
+export const useTaxonomies = ( postType ) => {
+	const taxonomies = useSelect(
+		( select ) => {
+			const { getTaxonomies } = select( coreStore );
+			const filteredTaxonomies = getTaxonomies( {
+				type: postType,
+				per_page: -1,
+				context: 'view',
+			} );
+			return filteredTaxonomies;
+		},
+		[ postType ]
+	);
+	return taxonomies;
+};
+
 /**
  * Recurses over a list of blocks and returns the first found
  * Query Loop block's clientId.

package/src/query/variations.js

@@ -20,8 +20,6 @@ const QUERY_DEFAULT_ATTRIBUTES = {
 		pages: 0,
 		offset: 0,
 		postType: 'post',
-		categoryIds: [],
-		tagIds: [],
 		order: 'desc',
 		orderBy: 'date',
 		author: '',
@@ -46,8 +44,6 @@ const variations = [
 				pages: 1,
 				offset: 0,
 				postType: 'post',
-				categoryIds: [],
-				tagIds: [],
 				order: 'desc',
 				orderBy: 'date',
 				author: '',

package/src/query-pagination/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination",
 	"title": "Pagination",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query" ],
 	"description": "Displays a paginated navigation to next/previous set of posts, when applicable.",
 	"textdomain": "default",
@@ -22,7 +23,12 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
 		},
 		"__experimentalLayout": {
 			"allowSwitching": false,

package/src/query-pagination/editor.scss

@@ -14,10 +14,6 @@ $pagination-margin: 0.5em;
 	}
 }
 
-.block-library-query-pagination-toolbar__popover .components-popover__content {
-	min-width: 230px;
-}
-
 .wp-block-query-pagination {
 	> .wp-block-query-pagination-next,
 	> .wp-block-query-pagination-previous,

package/src/query-pagination-next/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-next",
 	"title": "Next Page",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query-pagination" ],
 	"description": "Displays the next posts page link.",
 	"textdomain": "default",
@@ -17,7 +18,10 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"text": false
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/query-pagination-next/index.php

@@ -21,8 +21,9 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$default_label      = __( 'Next Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
 	$pagination_arrow   = get_query_pagination_arrow( $block, true );
+
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}

package/src/query-pagination-numbers/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-numbers",
 	"title": "Page Numbers",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query-pagination" ],
 	"description": "Displays a list of page numbers for pagination",
 	"textdomain": "default",

package/src/query-pagination-previous/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-previous",
 	"title": "Previous Page",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query-pagination" ],
 	"description": "Displays the previous posts page link.",
 	"textdomain": "default",
@@ -17,7 +18,10 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"text": false
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/query-pagination-previous/index.php

@@ -20,7 +20,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$default_label      = __( 'Previous Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
 	$pagination_arrow   = get_query_pagination_arrow( $block, false );
 	if ( $pagination_arrow ) {
 		$label = $pagination_arrow . $label;
@@ -32,6 +32,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		$filter_link_attributes = function() use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
+
 		add_filter( 'previous_posts_link_attributes', $filter_link_attributes );
 		$content = get_previous_posts_link( $label );
 		remove_filter( 'previous_posts_link_attributes', $filter_link_attributes );

package/src/query-title/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-title",
 	"title": "Query Title",
@@ -21,7 +22,11 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {
-			"gradients": true
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"margin": true

package/src/query-title/index.js

@@ -6,10 +6,16 @@ import edit from './edit';
 import variations from './variations';
 import deprecated from './deprecated';
 
+/**
+ * WordPress dependencies
+ */
+import { queryTitle as icon } from '@wordpress/icons';
+
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
+	icon,
 	edit,
 	variations,
 	deprecated,

package/src/quote/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/quote",
 	"title": "Quote",
@@ -48,8 +49,7 @@
 			"label": "Default",
 			"isDefault": true
 		},
-		{ "name": "plain", "label": "Plain" },
-		{ "name": "large", "label": "Large" }
+		{ "name": "plain", "label": "Plain" }
 	],
 	"editorStyle": "wp-block-quote-editor",
 	"style": "wp-block-quote"

package/src/quote/index.js

@@ -24,7 +24,6 @@ export const settings = {
 			value:
 				'<p>' + __( 'In quoting others, we cite ourselves.' ) + '</p>',
 			citation: 'Julio Cortázar',
-			className: 'is-style-large',
 		},
 	},
 	transforms,

package/src/quote/style.scss

@@ -1,8 +1,8 @@
 .wp-block-quote {
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
-
-	&.is-style-large,
-	&.is-large {
+	// .is-style-large and .is-large are kept for backwards compatibility. The :not pseudo-class is used to enable switching styles. See PR #37580.
+	&.is-style-large:not(.is-style-plain),
+	&.is-large:not(.is-style-plain) {
 		margin-bottom: 1em;
 		padding: 0 1em;
 

package/src/quote/theme.scss

@@ -22,7 +22,7 @@
 		border: none;
 		padding-left: 0;
 	}
-
+	// .is-style-large and .is-large are kept for backwards compatibility.
 	&.is-style-plain,
 	&.is-style-large,
 	&.is-large {

package/src/read-more/block.json

@@ -0,0 +1,56 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/read-more",
+	"title": "Read More",
+	"category": "theme",
+	"description": "Displays the link of a post, page, or any other content-type.",
+	"textdomain": "default",
+	"attributes": {
+		"content": {
+			"type": "string"
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		}
+	},
+	"usesContext": [ "postId" ],
+	"supports": {
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"textDecoration": true
+			}
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"width": true
+			}
+		}
+	},
+	"style": "wp-block-read-more"
+}

package/src/read-more/edit.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+export default function ReadMore( {
+	attributes: { content, linkTarget },
+	setAttributes,
+	insertBlocksAfter,
+} ) {
+	const blockProps = useBlockProps();
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								linkTarget: value ? '_blank' : '_self',
+							} )
+						}
+						checked={ linkTarget === '_blank' }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<RichText
+				tagName="a"
+				aria-label={ __( '"Read more" link text' ) }
+				placeholder={ __( 'Read more' ) }
+				value={ content }
+				onChange={ ( newValue ) =>
+					setAttributes( { content: newValue } )
+				}
+				__unstableOnSplitAtEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
+				withoutInteractiveFormatting={ true }
+				{ ...blockProps }
+			/>
+		</>
+	);
+}

package/src/read-more/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { link as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};

package/src/read-more/index.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Server-side rendering of the `core/read-more` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/read-more` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string  Returns the post link.
+ */
+function render_block_core_read_more( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$post_ID            = $block->context['postId'];
+	$justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}";
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) );
+	$more_text          = ! empty( $attributes['content'] ) ? wp_kses_post( $attributes['content'] ) : __( 'Read more' );
+	return sprintf(
+		'<a %1s href="%2s" target="%3s">%4s</a>',
+		$wrapper_attributes,
+		get_the_permalink( $post_ID ),
+		esc_attr( $attributes['linkTarget'] ),
+		$more_text
+	);
+}
+
+/**
+ * Registers the `core/read-more` block on the server.
+ */
+function register_block_core_read_more() {
+	register_block_type_from_metadata(
+		__DIR__ . '/read-more',
+		array(
+			'render_callback' => 'render_block_core_read_more',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_read_more' );