From f4759b75013df13a971a3181e40743a17b007f83 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 5 May 2022 17:20:49 +0300 Subject: [PATCH 1/3] [Block Library - Query Pagination]: Try rendering hidden element when no next/previous link exists --- .../src/query-pagination-next/block.json | 2 +- .../src/query-pagination-next/index.php | 11 +++++++++++ .../src/query-pagination-previous/block.json | 2 +- .../src/query-pagination-previous/index.php | 15 +++++++++++++++ .../block-library/src/query-pagination/block.json | 3 ++- 5 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json index 8bbef630e2f83..d3281b50379b9 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", "layout" ], "supports": { "reusable": false, "html": false, diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index e92b58938d53b..fbd0613005ee1 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -56,6 +56,17 @@ 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. + if ( empty( $content ) && isset( $block->context['layout']['justifyContent'] ) && in_array( $block->context['layout']['justifyContent'], array( 'center', 'space-between' ), true ) ) { + return sprintf( + '%2$s', + get_block_wrapper_attributes( array( 'style' => 'visibility:hidden;' ) ), + $label + ); + } return $content; } diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json index f1290952bbc6d..66ff66995089d 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", "layout" ], "supports": { "reusable": false, "html": false, diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php index 9bb9f0d1f2bfb..6268274da240c 100644 --- a/packages/block-library/src/query-pagination-previous/index.php +++ b/packages/block-library/src/query-pagination-previous/index.php @@ -44,6 +44,21 @@ 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. + if ( empty( $content ) && isset( $block->context['layout']['justifyContent'] ) && in_array( $block->context['layout']['justifyContent'], array( 'center', 'space-between' ), true ) ) { + return sprintf( + '%2$s', + get_block_wrapper_attributes( + array( + 'aria-hidden' => 'true', + 'style' => 'visibility:hidden;', + ) + ), + $label + ); + } return $content; } diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json index 74636d7bec45e..17c50d0b20ba2 100644 --- a/packages/block-library/src/query-pagination/block.json +++ b/packages/block-library/src/query-pagination/block.json @@ -15,7 +15,8 @@ }, "usesContext": [ "queryId", "query" ], "providesContext": { - "paginationArrow": "paginationArrow" + "paginationArrow": "paginationArrow", + "layout": "layout" }, "supports": { "align": true, From f9275213032ab44dd1efb051833dc0b345cf8346 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 5 May 2022 17:40:52 +0300 Subject: [PATCH 2/3] quickly add `horizontal` check --- packages/block-library/src/query-pagination-next/index.php | 3 ++- packages/block-library/src/query-pagination-previous/index.php | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index fbd0613005ee1..27f6a5d32aff2 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -60,7 +60,8 @@ function render_block_core_query_pagination_next( $attributes, $content, $block // 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. - if ( empty( $content ) && isset( $block->context['layout']['justifyContent'] ) && in_array( $block->context['layout']['justifyContent'], array( 'center', 'space-between' ), true ) ) { + $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( '%2$s', get_block_wrapper_attributes( array( 'style' => 'visibility:hidden;' ) ), diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php index 6268274da240c..ddbc84442a9a7 100644 --- a/packages/block-library/src/query-pagination-previous/index.php +++ b/packages/block-library/src/query-pagination-previous/index.php @@ -47,7 +47,8 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl // 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. - if ( empty( $content ) && isset( $block->context['layout']['justifyContent'] ) && in_array( $block->context['layout']['justifyContent'], array( 'center', 'space-between' ), true ) ) { + $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( '%2$s', get_block_wrapper_attributes( From 12eb0b19a86992aa8e8606c72a3ab4830b549e6b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 28 Jul 2022 14:57:46 +0300 Subject: [PATCH 3/3] rough poc implementation for not rendering with hidden next/previous blocks --- packages/block-library/src/query-pagination/index.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/query-pagination/index.php b/packages/block-library/src/query-pagination/index.php index eaa784be08e7d..02787db12e462 100644 --- a/packages/block-library/src/query-pagination/index.php +++ b/packages/block-library/src/query-pagination/index.php @@ -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 ''; }