Query pagination with InnerBlocks #28125
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ntsekouras
added
[Feature] Full Site Editing
[Block] Query Pagination
ntsekouras
requested review from
mcsf,
youknowriad,
scruffian,
mtias,
aristath,
gziolo,
jameskoster,
kjellr,
jasmussen,
ellatrix and
carolinan
ntsekouras
requested review from
ajitbohra,
nerrad,
ntwb and
spacedmonkey
as code owners
|
Size Change: +1.4 kB (0%) Total Size: 1.29 MB
ℹ️ View Unchanged
|
|
Here are some icons. Pagination:
Numbers:
Next:
Previous:
|
|
Nice one, quite a good idea to use inner blocks for pagination items. Have you considered using one child block like Query Pagination Item and make everything else a block variation? |
|
Thanks for the icons @jasmussen! I really appreciate it!
@gziolo I think it will get quite messy quickly, as there are different implementations for each of these child blocks and will get messier when/and if we handle |
|
This is really nice! It worked fine for me on an archive page within the FSE, but I tried to make it work on a query block inside a page (in the page editor, outside FSE) and it showed up on the editor but not on the frontend. It would be nice to have it work outside FSE too. Is it possible to have alignment rules for this block? I see how we would want to align this left/right/center and also justify the 3 elements too (such as with space-between or space-around) |
|
Thanks for testing @MaggieCabrera !
It does work outside FSE. Did you forget to set the I have another PR that changes the default value when outside of FSE, but is still not merged (#27972).
That's definitely in my mind but in a follow up, because this PR is quite big as is. |
Oh yes, I missed that! It works perfectly then
That's great, makes it less confusing for the users
Fantastic. As far as I know, |
|
While trying to test this PR I was getting multiple errors, in npm as well as the browser (the browser issues were including #28212 as well as phantom files due to the npm fails). I merged the master branch here just to make it easier to test things since it was almost impossible to properly test & debug otherwise. 👍 |
ntsekouras
force-pushed
the
try/query-pagination-blocks
branch
from
1d060af
to
8480a6f
Compare
aristath
approved these changes
Jan 20, 2021
There was a problem hiding this comment.
Works as advertised. This is awesome! Thank you @ntsekouras
ntsekouras
force-pushed
the
try/query-pagination-blocks
branch
from
8480a6f
to
26db3c0
Compare
youknowriad
reviewed
Jan 20, 2021
| const placeholder = __( 'Next Page' ); | ||
| return ( | ||
| <> | ||
| <div { ...useBlockProps() }> |
There was a problem hiding this comment.
Is this div also output in the frontend? if not, we should remove it and use the RichText as the wrapper (see Paragraph for instance)
There was a problem hiding this comment.
(Maybe it's not possible because "a" is inline by default though). @ellatrix do you know?
There was a problem hiding this comment.
Is this div also output in the frontend?
It's not. I'm not sure about this though:
Maybe it's not possible because "a" is inline by default though
There was a problem hiding this comment.
It is possible, we just need to update the display property to inline-block for example.
youknowriad
reviewed
Jan 20, 2021
Yes, as these blocks mature more and more, tests are essential. I have this in mind. |
26 tasks
|
Not sure if it's related, but should next/previous posts be available in the block editor or only in the site editor?
|
|
@jasmussen these two blocks shown at the screenshot are the next/previous post link of single posts/pages etc... The one you're referring to are only available under The different wording is really subtle though: |
|
It might be good to change the name of "Next page link" to "Next archive". |
Sorry -
|
This was referenced Feb 5, 2021
This was referenced Aug 4, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Resolves: #26557 - other follow ups for improvements will come.
In this PR
Query Paginationblock is implemented with InnerBlocks and can support multi query pagination in the same page. The only allowed blocks inside it are three new blocks:QueryPaginationNext- Displays a next posts linkQueryPaginationPrevious- Displays a previous posts linkQueryPaginationNumbers- Displays numbered paginationIn
QueryPaginationNextandQueryPaginationPreviousyou can edit the labels and/or background/link color. I haven't added many options yet, as this PR is big as is and beautiful things can be achieved for now with just a couple of lines of css, like adding some padding to these blocks or changing thejustify-contentcss property inQueryPaginationblock.Testing Instructions
archivetemplate and add Query blockscustom Queryblocks and in each of them you should add aQueryPaginationblock (or more if you like, ex on top and bottom)Inherit query from URLoption, that is by defaulttruearchivepage (ex acategory'spage) and click pagination links.max pagesparam of theQueryblockAlternative Testing in pages - doesn't include the Queries that inherit from global context.
QueryandQueryPaginationblocks (don't forget to toggle theInherit query from URLoption)Notes
Query utilsinliband I'm not sure if this is how the file should be named or in that place. The problem is that I needed a function that constructs a WP_Query args object from aQueryblock properties. This is needed and used byQueryLoop,QueryPaginationNumbersandQueryPaginationNextblocks in order to work properly.livepreview in the editor, as there are context detection problems yet and to be honest I'm not sure it solves more problems if there was. For example you I think it's more important to place/style thelinks(like the Previous posts) even if you are previewing the first page of your query..Screenshots
Types of changes
This PR breaks previous
QueryPagination, but I haven't created a deprecation as it wasn't working properly before and I don't think it was used, besides the experimental nature of it.Checklist: