Try: Add new textAlign block support
#59531
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
t-hamano
added
[Feature] Block API
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
t-hamano
requested review from
youknowriad,
andrewserong,
a team,
ockham,
jorgefilipecosta,
draganescu,
ntsekouras,
ellatrix and
aaronrobertshaw
and removed request for
ajitbohra,
tellthemachines,
youknowriad,
andrewserong,
a team,
ockham and
jorgefilipecosta
|
Size Change: +434 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
This was referenced Apr 20, 2024
|
@t-hamano Does this need to be backported to 6.6? |
|
Thanks! It's fine to wait for more GB PRs, but I think generally we can already create backport PRs / Trac tickets and add to them? |
|
Ready to backport to the core. |
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jun 4, 2024
See WordPress/gutenberg#59531. See WordPress/gutenberg#61182. See WordPress/gutenberg#61717. See #6590. Fixes #61256. Props wildworks, ellatrix. git-svn-id: https://develop.svn.wordpress.org/trunk@58314 602fd350-edb4-49c9-b593-d223f7449a82
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Jun 4, 2024
See WordPress/gutenberg#59531. See WordPress/gutenberg#61182. See WordPress/gutenberg#61717. See WordPress/wordpress-develop#6590. Fixes #61256. Props wildworks, ellatrix. Built from https://develop.svn.wordpress.org/trunk@58314 git-svn-id: https://core.svn.wordpress.org/trunk@57771 1a063a9b-81f0-0310-95a4-ce76da25c4cd
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jun 4, 2024
See WordPress/gutenberg#59531. See WordPress/gutenberg#61182. See WordPress/gutenberg#61717. See WordPress/wordpress-develop#6590. Fixes #61256. Props wildworks, ellatrix. Built from https://develop.svn.wordpress.org/trunk@58314 git-svn-id: http://core.svn.wordpress.org/trunk@57771 1a063a9b-81f0-0310-95a4-ce76da25c4cd
|
Hi @t-hamano, is there a dev note for this change? |
As I understand it, dev notes are written when there is some impact on backward compatibility or when there are changes to existing functionality. This PR simply adds a new block support and does not affect backward compatibility. Is a developer note still necessary in this case? |
|
An added feature is also a change. I checked the handbook again and it does not limit it to existing functionality: https://make.wordpress.org/core/handbook/tutorials/writing-developer-notes/ The documentation, which is nothing but the theme.json schema, is not enough for developers to know that that setting the setting to false does not actually disable any text alignment setting on any core block. |
|
OK, I'd like to write some development notes 👍 |
Dev Note DraftAdd Text alignment block supportWordPress 6.6 adds new block support for setting the horizontal alignment of text. This support is controlled by Note: Currently, core blocks do not support The default horizontal alignment style can also be defined via GitHub pull request: #59531 Note: There is a known issue where the default horizontal alignment defined in the global styles or |
49 tasks
|
Thank you |
|
@juanmaguitar Based on this comment, I have added a note about the known issues to the Dev Note Draft:
I would be grateful if you could reflect this content in the Miscellaneous Editor changes dev note as well. If you have any questions, please feel free to ask. |
|
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.
Fixes #38427
Related to #8450, #48202
What?
This PR attempts to add a new
typography.textAlign(left/center/right/justify) block support. I only have a basic implementation at the moment, but I'd love to hear your thoughts on whether this approach makes sense!Why?
The current text-align setting is implemented ad hoc in each block. In other words, the code looks like this:
Code like this exists in over 20 core blocks, so I think it makes sense to unify the block support.
I also think there are two benefits for developers:
How?
The implementation itself is very similar to
alignsupport, with the following characteristics:boolean | arraycan be defined as a value.true, allleft/center/right/~~justify~~options can be controlled.array, only the options that match the array elements can be controlled.default, the toolbar control will not be available.Additionally, if we replace this support in the core blocks in the future, the markup saved will remain the same, so there should be no need to add a deprecation.Update: For all blocks, if text-align changes, the class namehas-text-align-{align}is added. This PR, on the other hand, is output as an inline style. Therefore, we will need to add deprecations in every block.However, I think we should note the following points:
The only exception is the Paragraph block, which is defined as an attribute calledaligninstead oftextAlign. Therefore, it will be necessary to add deprecation only to this block, and adjust the alignment inheritance when transforming from/to the heading block.Testing Instructions
Block Support
This PR purely adds block support only and has no impact on core blocks. Use the code below to register a block that supports
textAlignvia the browser console and check the operation of the block toolbar.Code
Additionally, to ensure that core blocks can migrate to this support in the future, we will temporarily make the following changes to ensure that they work with a variety of block types.
Static Block (Media & Text Block)
It should work as expected, both on the editor and on the frontend.
Dynamic Block (Archives Block)
It should work as expected, both on the editor and on the frontend.
Dynamic Block with __experimentalSkipSerialization (Search Block)
This block skips serializing typography support and gives each label, input field, and button a typography-related class name. On the editor side, the
text-align-{textAlign}class should not be output to the block wrapper div, but instead the class should be output for each label, input field, and button.Pasting Styles
text-alignsetting toright.text-alignsetting (right) should be applied.Screenshots or screencast
The video below shows that a block with temporary
textAlignsupport is registered via the browser console andtextAlignsupport works correctly.8c71ff29436ffdf74d9edb4556bde32f.mp4
ToDo
If it makes sense to move forward with this PR, I would like to work on the following tasks.