Global Styles: Try per block custom CSS #46571
Merged
+262
−59
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
|
Size Change: +236 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
|
🎉 This is looking good! I like the simple approach arrived at of not needing the |
|
I would like that, but how can we describe that so that users of all varied experiences can understand it? |
|
The changes need to be moved from lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php to class-wp-theme-json-gutenberg.php, but I am away for the holiday starting about now and I welcome anyone to pick it up. |
|
Just adding a note that this will also be impacted by this issue - so will need to account for a user's unfiltered HTML capability somehow. |
aristath
force-pushed
the
try/per-block-custom-css
branch
from
8666b2d to
16a7720
Compare
Rebased the PR on trunk. Moved the code to |
|
We can reuse logic from #46815 for the unfiltered HTML capability check. |
|
The permission check should be added to context-menu.js, but the new action needs to be merged first. |
Check for permission to edit CSS before displaying the panel. Fix duplication after merge conflict.
carolinan
commented
Jan 17, 2023
packages/edit-site/src/components/global-styles/context-menu.js
Outdated
Show resolved
Hide resolved
|
Flaky tests detected in d218090. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3956175372
|
carolinan
commented
Jan 17, 2023
Mamaduka
reviewed
Jan 18, 2023
Mamaduka
reviewed
Jan 18, 2023
|
@carolinan, @aristath, do you have time to work on core backports for changes in the |
aristath
added a commit
to aristath/wordpress-develop
that referenced
this pull request
Jan 27, 2023
aristath
added a commit
to aristath/wordpress-develop
that referenced
this pull request
Jan 27, 2023
10 tasks
juanmaguitar
added
[Type] Enhancement
aristath
added a commit
to aristath/wordpress-develop
that referenced
this pull request
Feb 1, 2023
aristath
added a commit
to aristath/wordpress-develop
that referenced
this pull request
Feb 2, 2023
aristath
added a commit
to aristath/wordpress-develop
that referenced
this pull request
Feb 3, 2023
aristath
added a commit
to aristath/wordpress-develop
that referenced
this pull request
Feb 3, 2023
|
Backporting to Core PR: WordPress/wordpress-develop#3977 for ticket https://core.trac.wordpress.org/ticket/57621 |
Dev noteWhen a theme that has support for the Site Editor is activated, users do not have easy access to adding additional CSS via the Customizer. To add CSS via the interface, open the Styles sidebar in the Site Editor. per-block-custom-css.movCSS added in this panel applies to all occurrences of the block. You can add per-block custom CSS in theme.json as a In addition, the use of & is supported for nested elements & pseudo-selectors, both in the theme.json file and the custom CSS input in global styles. Reviewed by @aristath |
carolinan
added
the
has dev note
34 tasks
|
@carolinan Does styling via |
|
Hi, |
|
@carolinan I opened a bug report: #52644 |
3 tasks
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.
What?
Adds the option to add custom CSS per block via the Styles sidebar in the Site Editor and via theme.json.
Continuation on #30142, #44412
Why?
To allow more customizations.
How?
This PR builds on the previous changes that adds the option to add custom CSS to the root via the Styles sidebar.
Testing Instructions
styles.blocks.blockname.css,for example to the paragraph block:
Open the Styles sidebar, select Blocks.
Confirm that the description contains the name of the current block:
"Add your own CSS to customize the appearance of the Paragraph block."
a text area for inputting CSS.
Activate the button to open the panel.
The panel should contain a
<pre>element with the CSS that you added to theme.json.Testing Instructions for Keyboard
The Styles sidebar in general has accessibility problems where the heading order is incorrect and where information
is not available to screen reader users.
These problems affect the sidebar as a whole and needs to be carefully tested and fixed in a separate PR.
Testing permissions
Disable unfiltered HTML by adding the following constant to wp-config.php - define( 'DISALLOW_UNFILTERED_HTML', true );
Refresh the Site Editor, open the Styles sidebar, select Blocks. Select a block, confirm that this panel does not have a custom CSS button.
Apply the PR
Activate the test theme, "empty theme"
In theme.json, add CSS to
styles.blocks.blockname.css,for example to the paragraph block:
7 - Note: The styles sidebar is now opened, but it is unclear to me how to best navigate to it because activating the button does not move focus to the sidebar content.
Instead, I needed to tab forward past the navigation and option buttons, and past the editor content.
The next focusable item is then a button labeled "open Style book". This button is inside the styles panel, but it is not the button we want to access.
Instead, press the tab key to tab forwards past More styles, close, browse styles, typography, colors, layout, until you arrive at the button "Block Styles". Activate this button.
Screenshots or screencast