Query Pagination: allow hiding the label text (#50779)

* Add showLabel attribute * Add QueryPaginationLabelControl * Add showLabel to query-pagination-next * Update docs * Add showLabel to query-pagination-previous * Always show label if there is no pagination arrow * Update test fixtures * Update toggle label and description * Make comment backticks consistent
WordPress · May 31, 2023 · a450434 · a450434
1 parent 244c2e5
commit a450434
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 16 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -676,7 +676,7 @@ Displays a paginated navigation to next/previous set of posts, when applicable.
 -	**Category:** theme
 -	**Parent:** core/query
 -	**Supports:** align, anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** paginationArrow
+-	**Attributes:** paginationArrow, showLabel
 
 ## Next Page
 

diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json
@@ -12,7 +12,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow" ],
+	"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
 	"supports": {
 		"anchor": true,
 		"reusable": false,

diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js
@@ -13,7 +13,7 @@ const arrowMap = {
 export default function QueryPaginationNextEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow },
+	context: { paginationArrow, showLabel },
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -26,8 +26,8 @@ export default function QueryPaginationNextEdit( {
 				__experimentalVersion={ 2 }
 				tagName="span"
 				aria-label={ __( 'Next page link' ) }
-				placeholder={ __( 'Next Page' ) }
-				value={ label }
+				placeholder={ showLabel ? __( 'Next Page' ) : '' }
+				value={ showLabel ? label : '' }
 				onChange={ ( newLabel ) =>
 					setAttributes( { label: newLabel } )
 				}

diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php
@@ -20,10 +20,15 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 	$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Next Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label              = $show_label ? $label_text : '';
 	$pagination_arrow   = get_query_pagination_arrow( $block, true );
 
+	if ( ! $label ) {
+		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+	}
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}

diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json
@@ -12,7 +12,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow" ],
+	"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
 	"supports": {
 		"anchor": true,
 		"reusable": false,

diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js
@@ -13,7 +13,7 @@ const arrowMap = {
 export default function QueryPaginationPreviousEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow },
+	context: { paginationArrow, showLabel },
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -34,8 +34,8 @@ export default function QueryPaginationPreviousEdit( {
 				__experimentalVersion={ 2 }
 				tagName="span"
 				aria-label={ __( 'Previous page link' ) }
-				placeholder={ __( 'Previous Page' ) }
-				value={ label }
+				placeholder={ showLabel ? __( 'Previous Page' ) : '' }
+				value={ showLabel ? label : '' }
 				onChange={ ( newLabel ) =>
 					setAttributes( { label: newLabel } )
 				}

diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php
@@ -19,9 +19,14 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Previous Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label              = $show_label ? $label_text : '';
 	$pagination_arrow   = get_query_pagination_arrow( $block, false );
+	if ( ! $label ) {
+		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+	}
 	if ( $pagination_arrow ) {
 		$label = $pagination_arrow . $label;
 	}

diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json
@@ -11,11 +11,16 @@
 		"paginationArrow": {
 			"type": "string",
 			"default": "none"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"usesContext": [ "queryId", "query" ],
 	"providesContext": {
-		"paginationArrow": "paginationArrow"
+		"paginationArrow": "paginationArrow",
+		"showLabel": "showLabel"
 	},
 	"supports": {
 		"anchor": true,

diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js
@@ -15,6 +15,7 @@ import { PanelBody } from '@wordpress/components';
  * Internal dependencies
  */
 import { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
+import { QueryPaginationLabelControl } from './query-pagination-label-control';
 
 const TEMPLATE = [
 	[ 'core/query-pagination-previous' ],
@@ -28,15 +29,15 @@ const ALLOWED_BLOCKS = [
 ];
 
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow },
+	attributes: { paginationArrow, showLabel },
 	setAttributes,
 	clientId,
 } ) {
 	const hasNextPreviousBlocks = useSelect( ( select ) => {
 		const { getBlocks } = select( blockEditorStore );
 		const innerBlocks = getBlocks( clientId );
 		/**
-		 * Show the `paginationArrow` control only if a
+		 * Show the `paginationArrow` and `showLabel` controls only if a
 		 * `QueryPaginationNext/Previous` block exists.
 		 */
 		return innerBlocks?.find( ( innerBlock ) => {
@@ -51,6 +52,10 @@ export default function QueryPaginationEdit( {
 		template: TEMPLATE,
 		allowedBlocks: ALLOWED_BLOCKS,
 	} );
+	// Always show label text if paginationArrow is set to 'none'.
+	if ( paginationArrow === 'none' ) {
+		setAttributes( { showLabel: true } );
+	}
 	return (
 		<>
 			{ hasNextPreviousBlocks && (
@@ -62,6 +67,14 @@ export default function QueryPaginationEdit( {
 								setAttributes( { paginationArrow: value } );
 							} }
 						/>
+						{ paginationArrow !== 'none' && (
+							<QueryPaginationLabelControl
+								value={ showLabel }
+								onChange={ ( value ) => {
+									setAttributes( { showLabel: value } );
+								} }
+							/>
+						) }
 					</PanelBody>
 				</InspectorControls>
 			) }

diff --git a/packages/block-library/src/query-pagination/query-pagination-label-control.js b/packages/block-library/src/query-pagination/query-pagination-label-control.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl } from '@wordpress/components';
+
+export function QueryPaginationLabelControl( { value, onChange } ) {
+	return (
+		<ToggleControl
+			__nextHasNoMarginBottom
+			label={ __( 'Show label text' ) }
+			help={ __(
+				'Toggle off to hide the label text, e.g. "Next Page".'
+			) }
+			onChange={ onChange }
+			checked={ value === true }
+		/>
+	);
+}
diff --git a/test/integration/fixtures/blocks/core__query-pagination.json b/test/integration/fixtures/blocks/core__query-pagination.json
@@ -3,7 +3,8 @@
 		"name": "core/query-pagination",
 		"isValid": true,
 		"attributes": {
-			"paginationArrow": "none"
+			"paginationArrow": "none",
+			"showLabel": true
 		},
 		"innerBlocks": []
 	}

diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json
@@ -87,7 +87,8 @@
 						"name": "core/query-pagination",
 						"isValid": true,
 						"attributes": {
-							"paginationArrow": "none"
+							"paginationArrow": "none",
+							"showLabel": true
 						},
 						"innerBlocks": [
 							{