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

Jump to bottom

[Block Library - Query Pagination]: Try rendering hidden element when no next/previous link exists #40851

Closed
wants to merge 3 commits into from
Closed

[Block Library - Query Pagination]: Try rendering hidden element when no next/previous link exists #40851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4759b7
[Block Library - Query Pagination]: Try rendering hidden element when…
ntsekouras May 5, 2022
f927521
quickly add `horizontal` check
ntsekouras May 5, 2022
12eb0b1
rough poc implementation for not rendering with hidden next/previous …
ntsekouras Jul 28, 2022
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 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", "layout" ],
"supports": {
"reusable": false,
"html": false,
Expand Down
12 changes: 12 additions & 0 deletions 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 @@ -56,6 +56,18 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
}
wp_reset_postdata(); // Restore original Post Data.
}

// If there is no next page to navigate but a layout justification content setting
// is `center` or `space-between`, render a hidden element to avoid layout shifts when
// visting other pages.
$is_horizontal = isset( $block->context['layout']['orientation'] ) && 'horizontal' === $block->context['layout']['orientation'];
if ( empty( $content ) && $is_horizontal && isset( $block->context['layout']['justifyContent'] ) && in_array( $block->context['layout']['justifyContent'], array( 'center', 'space-between' ), true ) ) {
return sprintf(
'<a %1$s>%2$s</a>',
get_block_wrapper_attributes( array( 'style' => 'visibility:hidden;' ) ),
$label
);
}
return $content;
}

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", "layout" ],
"supports": {
"reusable": false,
"html": false,
Expand Down
16 changes: 16 additions & 0 deletions 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 @@ -44,6 +44,22 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
$label
);
}
// If there is no previous page to navigate but a layout justification content setting
// is `center` or `space-between`, render a hidden element to avoid layout shifts when
// visting other pages.
$is_horizontal = isset( $block->context['layout']['orientation'] ) && 'horizontal' === $block->context['layout']['orientation'];
if ( empty( $content ) && $is_horizontal && isset( $block->context['layout']['justifyContent'] ) && in_array( $block->context['layout']['justifyContent'], array( 'center', 'space-between' ), true ) ) {
return sprintf(
'<a %1$s>%2$s</a>',
get_block_wrapper_attributes(
array(
'aria-hidden' => 'true',
'style' => 'visibility:hidden;',
)
),
$label
);
}
return $content;
}

Expand Down
3 changes: 2 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 @@ -15,7 +15,8 @@
},
"usesContext": [ "queryId", "query" ],
"providesContext": {
"paginationArrow": "paginationArrow"
"paginationArrow": "paginationArrow",
"layout": "layout"
},
"supports": {
"align": true,
Expand Down
10 changes: 9 additions & 1 deletion packages/block-library/src/query-pagination/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,15 @@
* @return string Returns the wrapper for the Query pagination.
*/
function render_block_core_query_pagination( $attributes, $content ) {
if ( empty( trim( $content ) ) ) {
$content = trim( $content );
if ( empty( $content ) ) {
return '';
}
// TODO: This is a rough quick implementation to see if we can use this or something similar for our use case.
preg_match_all( '/visibility:hidden;/', $content, $hiddens );
preg_match_all( '/wp-block-query-pagination-next/', $content, $nexts );
preg_match_all( '/wp-block-query-pagination-previous/', $content, $prevs );
if ( count( $hiddens[0] ) === count( $nexts[0] ) + count( $prevs[0] ) ) {
return '';
}

Expand Down