From a450434af1d36a1bcd636db9d770ea40564f476f Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 31 May 2023 09:10:00 +0100 Subject: [PATCH] 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 --- docs/reference-guides/core-blocks.md | 2 +- .../src/query-pagination-next/block.json | 2 +- .../src/query-pagination-next/edit.js | 6 +++--- .../src/query-pagination-next/index.php | 7 ++++++- .../src/query-pagination-previous/block.json | 2 +- .../src/query-pagination-previous/edit.js | 6 +++--- .../src/query-pagination-previous/index.php | 7 ++++++- .../src/query-pagination/block.json | 7 ++++++- .../src/query-pagination/edit.js | 17 +++++++++++++++-- .../query-pagination-label-control.js | 19 +++++++++++++++++++ .../blocks/core__query-pagination.json | 3 ++- .../blocks/core__query__deprecated-3.json | 3 ++- 12 files changed, 65 insertions(+), 16 deletions(-) create mode 100644 packages/block-library/src/query-pagination/query-pagination-label-control.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 559417fa5dff76..6ef6b738210bbb 100644 --- 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 index d4861519f149ee..7c4f5797efa903 100644 --- 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 index c0b4916abccb3d..414a311283e7e2 100644 --- 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 index e92b58938d53b8..bd8d86eef04afa 100644 --- 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 index 823808b0fb054d..2efda01e20b6bd 100644 --- 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 index c863d637f7fb51..12fdd5763b07f2 100644 --- 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 index 9bb9f0d1f2bfbf..15bae30a041491 100644 --- 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 index fa980575ec969d..7217a3eb4f1a38 100644 --- 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 index 28e6af19ace347..3bd003f2f8a2d8 100644 --- 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,7 +29,7 @@ const ALLOWED_BLOCKS = [ ]; export default function QueryPaginationEdit( { - attributes: { paginationArrow }, + attributes: { paginationArrow, showLabel }, setAttributes, clientId, } ) { @@ -36,7 +37,7 @@ export default function QueryPaginationEdit( { 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' && ( + { + setAttributes( { showLabel: value } ); + } } + /> + ) } ) } 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 new file mode 100644 index 00000000000000..9ff80a663adeb5 --- /dev/null +++ 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 ( + + ); +} diff --git a/test/integration/fixtures/blocks/core__query-pagination.json b/test/integration/fixtures/blocks/core__query-pagination.json index 66b604f14b8a17..49d6992bac3a53 100644 --- 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 index 2c682de49bdda6..6b3327eacdc3f3 100644 --- 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": [ {