Skip to content

Commit

Permalink
query-pagination-next and previous: Changing the markup on the first …
Browse files Browse the repository at this point in the history 
…and last pages of a pagination (#36681)

* add an empty wrapper when at first/last page

* keep label on placeholder, add extra class

* Query pagination previous link: Avoids printing the link if there are no pages to paginate

* Query pagination next: removing custom 'last-page' class.

We can target the same element and know when we are navigating the last page with a selector like this: "span.wp-block-query-pagination-next"

* php code style format

* removing repeated line of code

* php code style

* Query pagination previous and next: non clickeable elements are hidden

When we render non clickeable elements <span> instead of <a>  for the next and previous elements we make them not visible and hidden from screen readers

* php lint

* Adding a class to the wrapper layout element rendered by Gutenberg

Adding a class describing the justify value of the layout element to be able to target the different justifications with CSS selectors.

* Query pagination: hiding non visible elements when the justification is right or left

In this way we will avoid unwanted spaces when the justification is right or left.

* avoid printing class if is a value is missing

* Fixing elements rendered on a few edge cases

* removing not needed CSS

* fixing css selectors

* removing debugging line

Co-authored-by: Maggie <maggie.cabrera@automattic.com>
  • Loading branch information
@matiasbenedetto @MaggieCabrera
matiasbenedetto and MaggieCabrera committed Dec 3, 2021
1 parent e96d47b commit 18214af
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 37 deletions.
8 changes: 5 additions & 3 deletions lib/block-supports/layout.php
View file
Expand Up @@ -160,13 +160,15 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$used_layout = $default_layout;
}

$id = uniqid();
$style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
$id = uniqid();
$style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
$container_class = 'wp-container-' . $id . ' ';
$justify_class = $used_layout['justifyContent'] ? 'wp-justify-' . $used_layout['justifyContent'] . ' ' : '';
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="wp-container-' . $id . ' ',
'class="' . $container_class . $justify_class,
$block_content,
1
);
Expand Down
61 changes: 42 additions & 19 deletions packages/block-library/src/query-pagination-next/index.php
View file
Expand Up @@ -17,40 +17,63 @@
function render_block_core_query_pagination_next( $attributes, $content, $block ) {
$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
$page = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;

$wrapper_attributes = get_block_wrapper_attributes();
$default_label = __( 'Next Page' );
$label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
$pagination_arrow = get_query_pagination_arrow( $block, true );
$wrapper_attributes = get_block_wrapper_attributes();
$hidden_wrapper_attributes = get_block_wrapper_attributes( array( 'aria-hidden' => 'true' ) );
$default_label = __( 'Next Page' );
$label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
$pagination_arrow = get_query_pagination_arrow( $block, true );
$content = '';

if ( $pagination_arrow ) {
$label .= $pagination_arrow;
}
$content = '';

// Check if the pagination is for Query that inherits the global context.
if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
global $wp_query;
// Take into account if we have set a bigger `max page`
// than what the query has.
$max_page = ! $max_page || $max_page > $wp_query->max_num_pages ? $wp_query->max_num_pages : $max_page;
$filter_link_attributes = function() use ( $wrapper_attributes ) {
return $wrapper_attributes;
};
add_filter( 'next_posts_link_attributes', $filter_link_attributes );
// Take into account if we have set a bigger `max page`
// than what the query has.
global $wp_query;
if ( $max_page > $wp_query->max_num_pages ) {
$max_page = $wp_query->max_num_pages;

// If there are pages to paginate.
if ( 1 < $max_page ) {
if ( (int) $max_page !== $paged ) { // If we are NOT in the last one.
$content = get_next_posts_link( $label, $max_page );
} else { // If we are in the last one.
$content = sprintf(
'<span %1$s>%2$s</span>',
$hidden_wrapper_attributes,
$label
);
}
}
$content = get_next_posts_link( $label, $max_page );
remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
} elseif ( ! $max_page || $max_page > $page ) {
$custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
if ( (int) $custom_query->max_num_pages !== $page ) {
$content = sprintf(
'<a href="%1$s" %2$s>%3$s</a>',
esc_url( add_query_arg( $page_key, $page + 1 ) ),
$wrapper_attributes,
$label
);
$custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
$max_num_pages = $custom_query->max_num_pages ? $custom_query->max_num_pages : 1;
// If there are pages to paginate.
if ( 1 < $max_num_pages ) {
if ( (int) $max_num_pages !== $page ) { // If we are NOT in the last one.
$content = sprintf(
'<a href="%1$s" %2$s>%3$s</a>',
esc_url( add_query_arg( $page_key, $page + 1 ) ),
$wrapper_attributes,
$label
);
} else { // If we are in the last one.
$content = sprintf(
'<span %1$s>%2$s</span>',
$hidden_wrapper_attributes,
$label
);
}
}
wp_reset_postdata(); // Restore original Post Data.
}
Expand Down
58 changes: 45 additions & 13 deletions packages/block-library/src/query-pagination-previous/index.php
View file
Expand Up @@ -17,31 +17,63 @@
function render_block_core_query_pagination_previous( $attributes, $content, $block ) {
$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
$page = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;

$wrapper_attributes = get_block_wrapper_attributes();
$hidden_wrapper_attributes = get_block_wrapper_attributes( array( 'aria-hidden' => 'true' ) );
$default_label = __( 'Previous Page' );
$label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
$pagination_arrow = get_query_pagination_arrow( $block, false );
$content = '';

$wrapper_attributes = get_block_wrapper_attributes();
$default_label = __( 'Previous Page' );
$label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
$pagination_arrow = get_query_pagination_arrow( $block, false );
if ( $pagination_arrow ) {
$label = $pagination_arrow . $label;
}
$content = '';
// Check if the pagination is for Query that inherits the global context
// and handle appropriately.
if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
global $wp_query;
$max_page = ! $max_page || $max_page > $wp_query->max_num_pages ? $wp_query->max_num_pages : $max_page;
$filter_link_attributes = function() use ( $wrapper_attributes ) {
return $wrapper_attributes;
};

add_filter( 'previous_posts_link_attributes', $filter_link_attributes );
$content = get_previous_posts_link( $label );

// If there are pages to paginate...
if ( 1 < $max_page ) {
if ( 1 !== $paged ) { // ... and we are NOT in the first one.
$content = get_previous_posts_link( $label );
} else { // ... and we are in the first one.
$content = sprintf(
'<span %1$s>%2$s</span>',
$hidden_wrapper_attributes,
$label
);
}
}
remove_filter( 'previous_posts_link_attributes', $filter_link_attributes );
} elseif ( 1 !== $page ) {
$content = sprintf(
'<a href="%1$s" %2$s>%3$s</a>',
esc_url( add_query_arg( $page_key, $page - 1 ) ),
$wrapper_attributes,
$label
);
} elseif ( ! $max_page || $max_page > $page ) {
$custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
$max_num_pages = $custom_query->max_num_pages ? $custom_query->max_num_pages : 1;
// If there are pages to paginate...
if ( 1 < $max_num_pages ) {
if ( 1 !== $page ) { // ... and we are NOT in the first one.
$content = sprintf(
'<a href="%1$s" %2$s>%3$s</a>',
esc_url( add_query_arg( $page_key, $page - 1 ) ),
$wrapper_attributes,
$label
);
} else { // ... and we are in the first one.
$content = sprintf(
'<span %1$s>%2$s</span>',
$hidden_wrapper_attributes,
$label
);
}
}
}
return $content;
}
Expand Down
14 changes: 12 additions & 2 deletions packages/block-library/src/query-pagination/style.scss
View file
Expand Up @@ -32,7 +32,17 @@ $pagination-margin: 0.5em;
}
}

&.aligncenter {
justify-content: center;
// Non-clickeable previous and next elements are not visible
>span.wp-block-query-pagination-next,
>span.wp-block-query-pagination-previous {
visibility: hidden;
}

&.wp-justify-left,
&.wp-justify-right {
> [aria-hidden="true"] {
display: none;
}
}

}

0 comments on commit 18214af

Please sign in to comment.