@wordpress/block-library 7.1.0 → 7.3.0

package/src/query-no-results/index.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * Server-side rendering of the `core/query-no-results` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/query-no-results` 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 wrapper for the no results block.
+ */
+function render_block_core_query_no_results( $attributes, $content, $block ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	$page_key   = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$page       = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$query_args = build_query_vars_from_query_block( $block, $page );
+	// Override the custom query with the global query if needed.
+	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
+	if ( $use_global_query ) {
+		global $wp_query;
+		if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
+			$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
+		}
+	}
+	$query = new WP_Query( $query_args );
+
+	if ( $query->have_posts() ) {
+		return '';
+	}
+
+	wp_reset_postdata();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
+/**
+ * Registers the `core/query-no-results` block on the server.
+ */
+function register_block_core_query_no_results() {
+	register_block_type_from_metadata(
+		__DIR__ . '/query-no-results',
+		array(
+			'render_callback' => 'render_block_core_query_no_results',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_query_no_results' );

package/src/query-no-results/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function QueryNoResultsSave() {
+	return <InnerBlocks.Content />;
+}

package/src/query-pagination/edit.js

@@ -76,7 +76,7 @@ export default function QueryPaginationEdit( {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			<div { ...innerBlocksProps } />
+			<nav { ...innerBlocksProps } />
 		</>
 	);
 }

package/src/query-pagination/index.php

@@ -18,9 +18,16 @@ function render_block_core_query_pagination( $attributes, $content ) {
 		return '';
 	}
 
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'role'       => 'navigation',
+			'aria-label' => __( 'Pagination' ),
+		)
+	);
+
 	return sprintf(
-		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(),
+		'<nav %1$s>%2$s</nav>',
+		$wrapper_attributes,
 		$content
 	);
 }

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

@@ -10,7 +10,25 @@
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "query-pagination-numbers-editor"
 }

package/src/quote/block.json

@@ -41,6 +41,14 @@
 				"fontSize": true,
 				"fontAppearance": true
 			}
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		}
 	},
 	"styles": [

package/src/quote/index.js

@@ -12,12 +12,13 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import settingsV2 from './v2';
 
 const { name } = metadata;
 
 export { metadata, name };
 
-export const settings = {
+export const settingsV1 = {
 	icon,
 	example: {
 		attributes: {
@@ -51,3 +52,7 @@ export const settings = {
 	},
 	deprecated,
 };
+
+export const settings = window?.__experimentalEnableQuoteBlockV2
+	? settingsV2
+	: settingsV1;

package/src/quote/style.scss

@@ -1,4 +1,5 @@
 .wp-block-quote {
+	box-sizing: border-box;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	// .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),

package/src/quote/v2/deprecated.js

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import deprecationsForV1Block from '../deprecated';
+
+export const migrateToQuoteV2 = ( attributes ) => {
+	const { value } = attributes;
+
+	return [
+		{
+			...omit( attributes, [ 'value' ] ),
+		},
+		value
+			? parseWithAttributeSchema( value, {
+					type: 'array',
+					source: 'query',
+					selector: 'p',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+					},
+			  } ).map( ( { content } ) =>
+					createBlock( 'core/paragraph', { content } )
+			  )
+			: createBlock( 'core/paragraph' ),
+	];
+};
+
+const v3 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		align: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		__experimentalSlashInserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { align, value, citation } = attributes;
+
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateToQuoteV2,
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v3, ...deprecationsForV1Block ];

package/src/quote/v2/edit.js

@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { BlockQuotation } from '@wordpress/components';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { Platform, useEffect } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { migrateToQuoteV2 } from './deprecated';
+
+const isWebPlatform = Platform.OS === 'web';
+const TEMPLATE = [ [ 'core/paragraph', {} ] ];
+
+/**
+ * At the moment, deprecations don't handle create blocks from attributes
+ * (like when using CPT templates). For this reason, this hook is necessary
+ * to avoid breaking templates using the old quote block format.
+ *
+ * @param {Object} attributes Block attributes.
+ * @param {string} clientId   Block client ID.
+ */
+const useMigrateOnLoad = ( attributes, clientId ) => {
+	const registry = useRegistry();
+	const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(
+		blockEditorStore
+	);
+	useEffect( () => {
+		// As soon as the block is loaded, migrate it to the new version.
+
+		if ( ! attributes.value ) {
+			// No need to migrate if it doesn't have the value attribute.
+			return;
+		}
+
+		const [ newAttributes, newInnerBlocks ] = migrateToQuoteV2(
+			attributes
+		);
+
+		deprecated( 'Value attribute on the quote block', {
+			since: '6.0',
+			version: '6.5',
+			alternative: 'inner blocks',
+		} );
+
+		registry.batch( () => {
+			updateBlockAttributes( clientId, newAttributes );
+			replaceInnerBlocks( clientId, newInnerBlocks );
+		} );
+	}, [ attributes.value ] );
+};
+
+export default function QuoteEdit( {
+	attributes,
+	setAttributes,
+	isSelected,
+	insertBlocksAfter,
+	clientId,
+	className,
+} ) {
+	const { citation, align } = attributes;
+
+	useMigrateOnLoad( attributes, clientId );
+
+	const isAncestorOfSelectedBlock = useSelect( ( select ) =>
+		select( blockEditorStore ).hasSelectedInnerBlock( clientId )
+	);
+	const hasSelection = isSelected || isAncestorOfSelectedBlock;
+
+	const blockProps = useBlockProps( {
+		className: classNames( className, {
+			[ `has-text-align-${ align }` ]: align,
+		} ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		templateInsertUpdatesSelection: true,
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { align: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<BlockQuotation { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ ( ! RichText.isEmpty( citation ) || hasSelection ) && (
+					<RichText
+						identifier="citation"
+						tagName={ isWebPlatform ? 'cite' : undefined }
+						style={ { display: 'block' } }
+						value={ citation }
+						onChange={ ( nextCitation ) => {
+							setAttributes( {
+								citation: nextCitation,
+							} );
+						} }
+						__unstableMobileNoFocusOnMount
+						aria-label={ __( 'Quote citation' ) }
+						placeholder={
+							// translators: placeholder text used for the
+							// citation
+							__( 'Add citation' )
+						}
+						className="wp-block-quote__citation"
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+						}
+					/>
+				) }
+			</BlockQuotation>
+		</>
+	);
+}

package/src/quote/v2/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { quote as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import transforms from './transforms';
+import deprecated from './deprecated';
+
+const settings = {
+	icon,
+	example: {
+		attributes: {
+			citation: 'Julio Cortázar',
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: __( 'In quoting others, we cite ourselves.' ),
+				},
+			},
+		],
+	},
+	transforms,
+	edit,
+	save,
+	deprecated,
+};
+
+export default settings;

package/src/quote/v2/save.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { align, citation } = attributes;
+	const blockProps = useBlockProps.save( {
+		className: classNames( {
+			[ `has-text-align-${ align }` ]: align,
+		} ),
+	} );
+	return (
+		<blockquote { ...blockProps }>
+			<InnerBlocks.Content />
+			{ ! RichText.isEmpty( citation ) && (
+				<RichText.Content tagName="cite" value={ citation } />
+			) }
+		</blockquote>
+	);
+}

package/src/quote/v2/test/migrate.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockType,
+	serialize,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { migrateToQuoteV2 } from '../deprecated';
+import * as paragraph from '../../../paragraph';
+import * as quote from '../../../quote';
+import * as quoteV2 from '../../../quote/v2';
+
+describe( 'Migrate quote block', () => {
+	beforeAll( () => {
+		registerBlockType(
+			{ name: paragraph.name, ...paragraph.metadata },
+			paragraph.settings
+		);
+		registerBlockType(
+			{ name: quote.name, ...quote.metadata },
+			quoteV2.settings
+		);
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( paragraph.name );
+		unregisterBlockType( quote.name );
+	} );
+
+	it( 'should migrate the value attribute to inner blocks', () => {
+		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
+			value: '<p>First paragraph</p><p>Second paragraph</p>',
+			citation: 'Author',
+		} );
+		expect( attributes ).toEqual( {
+			citation: 'Author',
+		} );
+		expect( serialize( innerBlocks ) ).toEqual(
+			`<!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second paragraph</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	it( 'should create a paragraph if value is empty', () => {
+		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
+			value: undefined,
+			citation: 'Author',
+		} );
+		expect( attributes ).toEqual( {
+			citation: 'Author',
+		} );
+		expect( serialize( innerBlocks ) ).toEqual(
+			`<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	it( 'should keep the formats of the value', () => {
+		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
+			value:
+				'<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
+			citation: 'Author',
+		} );
+		expect( attributes ).toEqual( {
+			citation: 'Author',
+		} );
+		expect( serialize( innerBlocks ) ).toEqual(
+			`<!-- wp:paragraph -->
+<p><strong>Bold</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p> and </p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><em>italic</em></p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+} );