Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Query Pagination: allow hiding the label text #50779

Merged
merged 9 commits into from
May 31, 2023
Merged

Query Pagination: allow hiding the label text #50779

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
54c71e3
Add showLabel attribute
mikachan May 18, 2023
7b7aea3
Add QueryPaginationLabelControl
mikachan May 18, 2023
2d7603d
Add showLabel to query-pagination-next
mikachan May 18, 2023
4d97912
Update docs
mikachan May 18, 2023
a5ab7c4
Add showLabel to query-pagination-previous
mikachan May 19, 2023
db8b15d
Always show label if there is no pagination arrow
mikachan May 19, 2023
886cd26
Update test fixtures
mikachan May 19, 2023
0517411
Update toggle label and description
mikachan May 19, 2023
ece2e7f
Make comment backticks consistent
mikachan May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -654,7 +654,7 @@ Displays a paginated navigation to next/previous set of posts, when applicable.
- **Name:** core/query-pagination
- **Category:** theme
- **Supports:** align, anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** paginationArrow
- **Attributes:** paginationArrow, showLabel

## Next Page

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/query-pagination-next/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"type": "string"
}
},
"usesContext": [ "queryId", "query", "paginationArrow" ],
"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
"supports": {
"anchor": true,
"reusable": false,
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/query-pagination-next/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const arrowMap = {
export default function QueryPaginationNextEdit( {
attributes: { label },
setAttributes,
context: { paginationArrow },
context: { paginationArrow, showLabel },
} ) {
const displayArrow = arrowMap[ paginationArrow ];
return (
Expand All @@ -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 } )
}
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/query-pagination-next/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/query-pagination-previous/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"type": "string"
}
},
"usesContext": [ "queryId", "query", "paginationArrow" ],
"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
"supports": {
"anchor": true,
"reusable": false,
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/query-pagination-previous/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const arrowMap = {
export default function QueryPaginationPreviousEdit( {
attributes: { label },
setAttributes,
context: { paginationArrow },
context: { paginationArrow, showLabel },
} ) {
const displayArrow = arrowMap[ paginationArrow ];
return (
Expand All @@ -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' ) : '' }
mikachan marked this conversation as resolved.
Show resolved Hide resolved
value={ showLabel ? label : '' }
onChange={ ( newLabel ) =>
setAttributes( { label: newLabel } )
}
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/query-pagination-previous/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/query-pagination/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
17 changes: 15 additions & 2 deletions packages/block-library/src/query-pagination/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ],
Expand All @@ -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 ) => {
Expand All @@ -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' ) {
mikachan marked this conversation as resolved.
Show resolved Hide resolved
setAttributes( { showLabel: true } );
}
return (
<>
{ hasNextPreviousBlocks && (
Expand All @@ -62,6 +67,14 @@ export default function QueryPaginationEdit( {
setAttributes( { paginationArrow: value } );
} }
/>
{ paginationArrow !== 'none' && (
<QueryPaginationLabelControl
value={ showLabel }
onChange={ ( value ) => {
setAttributes( { showLabel: value } );
} }
/>
) }
</PanelBody>
</InspectorControls>
) }
Expand Down
19 changes: 19 additions & 0 deletions packages/block-library/src/query-pagination/query-pagination-label-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }
/>
);
}
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__query-pagination.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"name": "core/query-pagination",
"isValid": true,
"attributes": {
"paginationArrow": "none"
"paginationArrow": "none",
"showLabel": true
},
"innerBlocks": []
}
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__query__deprecated-3.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@
"name": "core/query-pagination",
"isValid": true,
"attributes": {
"paginationArrow": "none"
"paginationArrow": "none",
"showLabel": true
},
"innerBlocks": [
{
Expand Down