@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/src/query-pagination/edit.js

@@ -1,10 +1,21 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
+	InspectorControls,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getBlockSupport } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
 
 const TEMPLATE = [
 	[ 'core/query-pagination-previous' ],
@@ -12,7 +23,35 @@ const TEMPLATE = [
 	[ 'core/query-pagination-next' ],
 ];
 
-export default function QueryPaginationEdit() {
+const getDefaultBlockLayout = ( blockTypeOrName ) => {
+	const layoutBlockSupportConfig = getBlockSupport(
+		blockTypeOrName,
+		'__experimentalLayout'
+	);
+	return layoutBlockSupportConfig?.default;
+};
+
+export default function QueryPaginationEdit( {
+	attributes: { paginationArrow, layout },
+	setAttributes,
+	clientId,
+	name,
+} ) {
+	const usedLayout = layout || getDefaultBlockLayout( name );
+	const hasNextPreviousBlocks = useSelect( ( select ) => {
+		const { getBlocks } = select( blockEditorStore );
+		const innerBlocks = getBlocks( clientId );
+		/**
+		 * Show the `paginationArrow` control only if a
+		 * `QueryPaginationNext/Previous` block exists.
+		 */
+		return innerBlocks?.find( ( innerBlock ) => {
+			return [
+				'core/query-pagination-next',
+				'core/query-pagination-previous',
+			].includes( innerBlock.name );
+		} );
+	}, [] );
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -21,7 +60,23 @@ export default function QueryPaginationEdit() {
 			'core/query-pagination-numbers',
 			'core/query-pagination-next',
 		],
-		orientation: 'horizontal',
+		__experimentalLayout: usedLayout,
 	} );
-	return <div { ...innerBlocksProps } />;
+	return (
+		<>
+			{ hasNextPreviousBlocks && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<QueryPaginationArrowControls
+							value={ paginationArrow }
+							onChange={ ( value ) => {
+								setAttributes( { paginationArrow: value } );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<div { ...innerBlocksProps } />
+		</>
+	);
 }

package/src/query-pagination/editor.scss

@@ -1,9 +1,8 @@
 $pagination-margin: 0.5em;
 
-.wp-block > .wp-block-query-pagination {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
+// Center flex items. This has an equivalent in style.scss.
+.wp-block[data-align="center"] > .wp-block-query-pagination {
+	justify-content: center;
 }
 
 .editor-styles-wrapper {
@@ -23,8 +22,6 @@ $pagination-margin: 0.5em;
 	> .wp-block-query-pagination-next,
 	> .wp-block-query-pagination-previous,
 	> .wp-block-query-pagination-numbers {
-		display: inline-block;
-
 		// Override editor auto block margins.
 		margin-left: 0;
 		margin-top: $pagination-margin;

package/src/query-pagination/index.js

@@ -9,6 +9,7 @@ import { queryPagination as icon } from '@wordpress/icons';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -17,4 +18,5 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };

package/src/query-pagination/index.php

@@ -5,12 +5,35 @@
  * @package WordPress
  */
 
+/**
+ * Renders the `core/query-pagination` block on the server.
+ *
+ * @param array  $attributes Block attributes.
+ * @param string $content    Block default content.
+ *
+ * @return string Returns the wrapper for the Query pagination.
+ */
+function render_block_core_query_pagination( $attributes, $content ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
 /**
  * Registers the `core/query-pagination` block on the server.
  */
 function register_block_core_query_pagination() {
 	register_block_type_from_metadata(
-		__DIR__ . '/query-pagination'
+		__DIR__ . '/query-pagination',
+		array(
+			'render_callback' => 'render_block_core_query_pagination',
+		)
 	);
 }
 add_action( 'init', 'register_block_core_query_pagination' );

package/src/query-pagination/query-pagination-arrow-controls.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+export function QueryPaginationArrowControls( { value, onChange } ) {
+	return (
+		<ToggleGroupControl
+			label={ __( 'Arrow' ) }
+			value={ value }
+			onChange={ onChange }
+			help={ __(
+				'A decorative arrow appended to the next and previous page link.'
+			) }
+			isBlock
+		>
+			<ToggleGroupControlOption
+				value="none"
+				label={ _x(
+					'None',
+					'Arrow option for Query Pagination Next/Previous blocks'
+				) }
+			/>
+			<ToggleGroupControlOption
+				value="arrow"
+				label={ _x(
+					'Arrow',
+					'Arrow option for Query Pagination Next/Previous blocks'
+				) }
+			/>
+			<ToggleGroupControlOption
+				value="chevron"
+				label={ _x(
+					'Chevron',
+					'Arrow option for Query Pagination Next/Previous blocks'
+				) }
+			/>
+		</ToggleGroupControl>
+	);
+}

package/src/query-pagination/save.js

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

package/src/query-pagination/style.scss

@@ -1,14 +1,9 @@
 $pagination-margin: 0.5em;
 .wp-block-query-pagination {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-
 	// Increased specificity to override blocks default margin.
 	> .wp-block-query-pagination-next,
 	> .wp-block-query-pagination-previous,
 	> .wp-block-query-pagination-numbers {
-		display: inline-block;
 		/*rtl:ignore*/
 		margin-right: $pagination-margin;
 		margin-bottom: $pagination-margin;
@@ -18,4 +13,26 @@ $pagination-margin: 0.5em;
 			margin-right: 0;
 		}
 	}
+	.wp-block-query-pagination-previous-arrow {
+		margin-right: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// 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-query-pagination-next-arrow {
+		margin-left: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// 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.
+		}
+	}
+
+	&.aligncenter {
+		justify-content: center;
+	}
 }

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

@@ -11,7 +11,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query" ],
+	"usesContext": [ "queryId", "query", "paginationArrow" ],
 	"supports": {
 		"reusable": false,
 		"html": false,
@@ -21,7 +21,14 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/query-pagination-next/edit.js

@@ -4,19 +4,41 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, PlainText } from '@wordpress/block-editor';
 
+const arrowMap = {
+	none: '',
+	arrow: '→',
+	chevron: '»',
+};
+
 export default function QueryPaginationNextEdit( {
 	attributes: { label },
 	setAttributes,
+	context: { paginationArrow },
 } ) {
+	const displayArrow = arrowMap[ paginationArrow ];
 	return (
-		<PlainText
-			__experimentalVersion={ 2 }
-			tagName="a"
-			aria-label={ __( 'Next page link' ) }
-			placeholder={ __( 'Next Page' ) }
-			value={ label }
-			onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }
+		<a
+			href="#pagination-next-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
-		/>
+		>
+			<PlainText
+				__experimentalVersion={ 2 }
+				tagName="span"
+				aria-label={ __( 'Next page link' ) }
+				placeholder={ __( 'Next Page' ) }
+				value={ label }
+				onChange={ ( newLabel ) =>
+					setAttributes( { label: newLabel } )
+				}
+			/>
+			{ displayArrow && (
+				<span
+					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
+				>
+					{ displayArrow }
+				</span>
+			) }
+		</a>
 	);
 }

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

@@ -22,7 +22,11 @@ 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;
-	$content            = '';
+	$pagination_arrow   = get_query_pagination_arrow( $block, true );
+	if ( $pagination_arrow ) {
+		$label .= $pagination_arrow;
+	}
+	$content = '';
 
 	// Check if the pagination is for Query that inherits the global context.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {

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

@@ -11,7 +11,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query" ],
+	"usesContext": [ "queryId", "query", "paginationArrow" ],
 	"supports": {
 		"reusable": false,
 		"html": false,
@@ -21,7 +21,14 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/query-pagination-previous/edit.js

@@ -4,19 +4,41 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, PlainText } from '@wordpress/block-editor';
 
+const arrowMap = {
+	none: '',
+	arrow: '←',
+	chevron: '«',
+};
+
 export default function QueryPaginationPreviousEdit( {
 	attributes: { label },
 	setAttributes,
+	context: { paginationArrow },
 } ) {
+	const displayArrow = arrowMap[ paginationArrow ];
 	return (
-		<PlainText
-			__experimentalVersion={ 2 }
-			tagName="a"
-			aria-label={ __( 'Previous page link' ) }
-			placeholder={ __( 'Previous Page' ) }
-			value={ label }
-			onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }
+		<a
+			href="#pagination-previous-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
-		/>
+		>
+			{ displayArrow && (
+				<span
+					className={ `wp-block-query-pagination-previous-arrow is-arrow-${ paginationArrow }` }
+				>
+					{ displayArrow }
+				</span>
+			) }
+			<PlainText
+				__experimentalVersion={ 2 }
+				tagName="span"
+				aria-label={ __( 'Previous page link' ) }
+				placeholder={ __( 'Previous Page' ) }
+				value={ label }
+				onChange={ ( newLabel ) =>
+					setAttributes( { label: newLabel } )
+				}
+			/>
+		</a>
 	);
 }

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

@@ -21,7 +21,11 @@ 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;
-	$content            = '';
+	$pagination_arrow   = get_query_pagination_arrow( $block, false );
+	if ( $pagination_arrow ) {
+		$label = $pagination_arrow . $label;
+	}
+	$content = '';
 	// Check if the pagination is for Query that inherits the global context
 	// and handle appropriately.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {

package/src/query-title/block.json

@@ -23,10 +23,22 @@
 		"color": {
 			"gradients": true
 		},
+		"spacing": {
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontFamily": true
+			"__experimentalFontFamily": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true,
+				"textTransform": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-query-title-editor"

package/src/query-title/deprecated.js

@@ -0,0 +1,51 @@
+/**
+ * Internal dependencies
+ */
+import migrateFontFamily from '../utils/migrate-font-family';
+
+const v1 = {
+	attributes: {
+		type: {
+			type: 'string',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		level: {
+			type: 'number',
+			default: 1,
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+		},
+		spacing: {
+			margin: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateFontFamily,
+	isEligible( { style } ) {
+		return style?.typography?.fontFamily;
+	},
+};
+
+/**
+ * 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 [ v1 ];

package/src/query-title/index.js

@@ -4,6 +4,7 @@
 import metadata from './block.json';
 import edit from './edit';
 import variations from './variations';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -11,4 +12,5 @@ export { metadata, name };
 export const settings = {
 	edit,
 	variations,
+	deprecated,
 };

package/src/quote/block.json

@@ -27,7 +27,20 @@
 		}
 	},
 	"supports": {
-		"anchor": true
+		"anchor": true,
+		"__experimentalSlashInserter": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true
+			}
+		}
 	},
 	"styles": [
 		{
@@ -35,6 +48,7 @@
 			"label": "Default",
 			"isDefault": true
 		},
+		{ "name": "plain", "label": "Plain" },
 		{ "name": "large", "label": "Large" }
 	],
 	"editorStyle": "wp-block-quote-editor",

package/src/quote/deprecated.js

@@ -96,6 +96,16 @@ const deprecated = [
 			},
 		},
 
+		migrate( attributes ) {
+			if ( ! isNaN( parseInt( attributes.style ) ) ) {
+				return {
+					...omit( attributes, [ 'style' ] ),
+				};
+			}
+
+			return attributes;
+		},
+
 		save( { attributes } ) {
 			const { align, value, citation, style } = attributes;
 

package/src/quote/style.scss

@@ -1,4 +1,6 @@
 .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 {
 		margin-bottom: 1em;

package/src/quote/theme.scss

@@ -23,6 +23,7 @@
 		padding-left: 0;
 	}
 
+	&.is-style-plain,
 	&.is-style-large,
 	&.is-large {
 		border: none;

package/src/reset.scss

@@ -8,8 +8,6 @@
 // We use :where to keep specificity minimal.
 // https://css-tricks.com/almanac/selectors/w/where/
 html :where(.editor-styles-wrapper) {
-	padding: 8px;
-
 	/**
 	* The following styles revert to the browser defaults overriding the WPAdmin styles.
 	* This is only needed while the block editor is not being loaded in an iframe.
@@ -24,13 +22,6 @@ html :where(.editor-styles-wrapper) {
 	// So to match browser defaults, we provide a white default here as well.
 	background: #fff;
 
-	// For full-wide blocks, we compensate for the base padding.
-	// These margins should match the padding value above.
-	.block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"] {
-		margin-left: -8px;
-		margin-right: -8px;
-	}
-
 	.wp-align-wrapper {
 		max-width: $content-width;
 
@@ -127,7 +118,8 @@ html :where(.editor-styles-wrapper) {
 	select:focus {
 		color: revert;
 		border-color: revert;
-		background: revert;
+		background-color: revert;
+		background-image: revert;
 		box-shadow: revert;
 		text-shadow: revert;
 		cursor: revert;

package/src/search/edit.js

@@ -14,7 +14,10 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseColorProps as useColorProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
@@ -58,6 +61,7 @@ export default function SearchEdit( {
 	setAttributes,
 	toggleSelection,
 	isSelected,
+	clientId,
 } ) {
 	const {
 		label,
@@ -72,6 +76,31 @@ export default function SearchEdit( {
 		style,
 	} = attributes;
 
+	const insertedInNavigationBlock = useSelect(
+		( select ) => {
+			const { getBlockParentsByBlockName, wasBlockJustInserted } = select(
+				blockEditorStore
+			);
+			return (
+				!! getBlockParentsByBlockName( clientId, 'core/navigation' )
+					?.length && wasBlockJustInserted( clientId )
+			);
+		},
+		[ clientId ]
+	);
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+	useEffect( () => {
+		if ( ! insertedInNavigationBlock ) return;
+		// This side-effect should not create an undo level.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( {
+			showLabel: false,
+			buttonUseIcon: true,
+			buttonPosition: 'button-inside',
+		} );
+	}, [ insertedInNavigationBlock ] );
 	const borderRadius = style?.border?.radius;
 	const borderColor = style?.border?.color;
 	const borderProps = useBorderProps( attributes );