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.

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

Post Navigation Link: Add border and spacing block support #64258

Open
wants to merge 21 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a02df3f
Add border support to post mavigation block
akasunil Aug 5, 2024
f331538
Add box sizing style to post navigation link block
akasunil Aug 5, 2024
e9fff19
Return empty if the adjacent post is unavailable
akasunil Aug 7, 2024
6baaa15
Update comment text
akasunil Aug 7, 2024
de7485c
Merge branch 'trunk' of personal.github.com:WordPress/gutenberg into …
akasunil Aug 8, 2024
700f22c
Add spacing support to post navigation link
akasunil Aug 9, 2024
d9d51b7
Merge branch 'trunk' of personal.github.com:WordPress/gutenberg into …
akasunil Aug 13, 2024
4c25d1a
Merge branch 'trunk' of personal.github.com:WordPress/gutenberg into …
akasunil Aug 13, 2024
6aa39df
Revert changes of render function
akasunil Aug 13, 2024
0551091
Add selectors for border and spacing support
akasunil Aug 14, 2024
a14512f
Merge branch 'trunk' of personal.github.com:WordPress/gutenberg into …
akasunil Aug 16, 2024
c46823f
Remove styles from empty post navigation link element
akasunil Aug 16, 2024
f15548f
Merge branch 'trunk' of github.com:WordPress/gutenberg into add/post-…
akasunil Sep 25, 2024
311f5d8
Skip serialization of border and spacing support
akasunil Sep 26, 2024
6404d13
Apply border and spacing support manully
akasunil Sep 26, 2024
3fca4e4
Merge branch 'trunk' of github.com:WordPress/gutenberg into add/post-…
akasunil Sep 26, 2024
b0fdd00
Update comment texts
akasunil Sep 26, 2024
8dcec4d
Fix coding standards
akasunil Sep 26, 2024
c656936
Merge branch 'trunk' of github.com:WordPress/gutenberg into add/post-…
akasunil Oct 3, 2024
b027a57
Fix inline support style issue
akasunil Oct 3, 2024
2654826
Merge branch 'trunk' of github.com:WordPress/gutenberg into add/post-…
akasunil Oct 19, 2024
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
12 changes: 12 additions & 0 deletions packages/block-library/src/post-navigation-link/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,18 @@
},
"interactivity": {
"clientNavigation": true
},
"__experimentalBorder": {
"radius": true,
"color": true,
"width": true,
"style": true,
"__experimentalDefaultControls": {
"radius": true,
"color": true,
"width": true,
"style": true
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
"__experimentalDefaultControls": {
"radius": true,
"color": true,
"width": true,
"style": true
}

The prevailing design feedback lately has been for nice applications of border support to make the border controls optional i.e. not displayed by default.

The may indicator of that has been whether the spacing controls were displayed by default. This block doesn't even have spacing support yet. I'd take that as a sign this is very edge case territory and make the controls optional.

Copy link
Member Author

Choose a reason for hiding this comment

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

We could include spacing support also in this PR, and will make border and spacing optional by default. I'll update the PR.

}
},
"style": "wp-block-post-navigation-link"
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/post-navigation-link/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,11 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
$content = $get_link_function( $format, $link );
}

// Return empty if the adjacent post is unavailable.
if ( empty( $content ) ) {
return '';
}
Copy link
Member

Choose a reason for hiding this comment

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

This looks right to me so far. Thank you for the changes! 🙇🏻

There's one backwards compatibility case that @t-hamano already mentioned: without the "empty" block wrapper, the next navigation block will align left.

We might have to think about RTL languages too, so the "previous" block should align left? Not sure there, but we should test it.

Not sure what the best thing to do here - probably CSS as @t-hamano suggests.

Here's the difference I see.

T4 in trunk

Screenshot 2024-08-08 at 9 56 38 AM

T4 with this PR

Screenshot 2024-08-08 at 9 56 21 AM

Copy link
Contributor

Choose a reason for hiding this comment

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

This code looks good to me too 👍

without the "empty" block wrapper, the next navigation block will align left.

This needs to be addressed. By using maring-inline-{start|end}, we should be able to handle RTL languages ​​as well as LTR languages.

A similar approach has been attempted for the Query Pagination block, and these two PRs may be of help:

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure that simply removing the empty element solves all the backward compatibility issues here.

Removing the element and adding CSS may prevent visual regressions for the default situation. There might be use cases out in the wild though where changing the block's markup breaks other theme styles.

We can avoid all BC issues by only applying the styles when needed. I don't think it's a resource-intensive option and saves having to send additional CSS.

Copy link
Member

Choose a reason for hiding this comment

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

We can avoid all BC issues by only applying the styles when needed. I don't think it's a resource-intensive option and saves having to send additional CSS.

I agree that preserving the element would be the ideal approach. Some themes might expecting the element to be there for styling or structural purposes.

I wonder how it'd work with global styles, presets etc. Should we strip all classnames and styles from the element?

Then there's the issue of whether themes are relying on these classnames as hooks. 🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder how it'd work with global styles, presets etc. Should we strip all classnames and styles from the element?

Leveraging the Block Selectors API, we should be able to use something like the :empty pseudo selector in combination with :not() to ensure the Global Styles are only applied when they should be.

Completely untested example: .wp-block-post-navigation-link:not(:empty).

I've recently used a loosely similar approach to ensuring List and List Item global styles are only applied to top-level blocks rather than nested lists.

Copy link
Member

Choose a reason for hiding this comment

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

Good idea! Thanks for confirming.

So maybe my first comment wasn't so wild as I thought. 🤣

Copy link
Contributor

Choose a reason for hiding this comment

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

That or we're both just wild. Either way, they say great minds think alike 🤔

I completely forgot you'd already mentioned that selector sorry. I'm a bit slow sometimes.

Still, a combination of skipping serialization of the block supports, as necessary, with the custom global styles selector works for me.


return sprintf(
'<div %1$s>%2$s</div>',
$wrapper_attributes,
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/post-navigation-link/style.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.wp-block-post-navigation-link {
// This block has customizable padding, border-box makes that more predictable.
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
box-sizing: border-box;

.wp-block-post-navigation-link__arrow-previous {
display: inline-block;
Expand Down
Loading