Skip to content

Query Pagination Next: Add border and spacing support - #66394

Open
karthick-murugan wants to merge 3 commits into
WordPress:trunkfrom
karthick-murugan:add/query-pagination-next-border-support
Open

karthick-murugan wants to merge 3 commits into
WordPress:trunkfrom
karthick-murugan:add/query-pagination-next-border-support

Conversation

@karthick-murugan

@karthick-murugan karthick-murugan commented Oct 24, 2024 •

Copy link
Copy Markdown
Contributor

What?

Add border and spacing block support to the Query Pagination Next ( Next Page ) block.

Part of #43247
Part of #43243

Why?

Query Pagination Next ( Next Page ) block is missing border and spacing support.

How?

Adds the border and spacing block support in block.json

Testing Instructions

  • Go to Appearance > Editor > Styles > Edit Styles > Blocks.
  • Ensure the Query Pagination Next (Next Page) block's border and spacing is configurable via Global Styles.
  • Confirm Global Styles are applied correctly in both the editor and frontend.
  • Edit a template or page and add a Query Loop block.
  • Select a variation (e.g., Title & Date) and adjust pagination to display the "Next Link."
  • Select the Next Page block and verify border, radius and spacing settings are available.
  • Check that block styles take precedence over Global Styles.
  • Ensure borders and spacing display correctly in both the editor and frontend.

Testing Instructions for Keyboard

None

Screenshots or screencast

In Backend:
query_next_backend

In Frontend:

query_next_frontend

@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: karthick-murugan <karthickmurugan@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 24, 2024
@github-actions

Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @karthick-murugan! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@karthick-murugan karthick-murugan changed the title Query Pagination Next Border Support Query Pagination Next Border and Spacing Support Oct 24, 2024
@karthick-murugan karthick-murugan changed the title Query Pagination Next Border and Spacing Support Border and Spacing Support to Query Pagination Next Oct 24, 2024
@karthick-murugan karthick-murugan changed the title Border and Spacing Support to Query Pagination Next Query Pagination Next: Border and Spacing Support Oct 24, 2024
@karthick-murugan karthick-murugan changed the title Query Pagination Next: Border and Spacing Support Query Pagination Next: Add border and spacing support Oct 24, 2024
@akasunil akasunil added [Type] Enhancement A suggestion for improvement. [Block] Query Pagination Affects the Query Pagination Block - used for pagination within the Query Loop Block labels Oct 24, 2024

@aaronrobertshaw aaronrobertshaw left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR @karthick-murugan 👍

I've taken this for a spin on a local rebase onto trunk, testing borders and padding through Global Styles, a block instance value, and both again at different viewports, with and without enhanced pagination.

✅ Border and Padding work in the editor and on the frontend
✅ A block instance value overrides Global Styles

Before we merge this though I think there are a few things to address. #66393 has the same shape, so these apply there too.

Rebase

docs/reference-guides/core-blocks.md has since moved to docs/reference-guides/core-blocks/README.md. Running npm run docs:build after the rebase will regenerate it and the block's own README.md.

Margin support

  • A block instance left margin replaces the margin-inline-start: auto that positions this link for "Space between", so the Next link jumps to the left edge
  • A margin set in Global Styles never applies, because the flex layout resets child margins with .is-layout-flex > :is(*, div) { margin: 0 }
  • That reset wins over the :root :where(...) that Global Styles outputs

Padding is ok. The space between pagination links belongs to the container. core/buttons, core/social-links and core/navigation all put blockGap on the parent and keep margin off the children. core/button itself only adopts padding and border.

Query Pagination has no blockGap support yet but I will raise a PR for that separately.

Border controls shown by default

Recent border adoptions like Home Link and Post Navigation Link keep the border controls hidden by default. Setting __experimentalDefaultControls to false here would match them.

Box sizing

It'd be worth adding a style.scss with box-sizing: border-box while you're here, as Comment Edit Link and Post Navigation Link do.

Border screenshots

Image

Padding screenshots

Image

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Query Pagination Affects the Query Pagination Block - used for pagination within the Query Loop Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants