Simplify CustomCSS UI #49721
Simplify CustomCSS UI #49721
Conversation
|
Size Change: +1.88 kB (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 78052d1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4667803675
|
|
One issue I noticed with this implementation is that it is not possible to delete the theme.json css and start from scratch - as soon as the input is empty it rerenders with the theme.json value: css-issue.mp4 |
|
I fixed the empty string issue in this branch but also extracted the fix as a more generic fix in #49750 |
|
Personally I don't feel like folks need access to the original custom CSS, it could be argued the same for any other theme.json property, not just CSS. That said, I can add a "clear" link to reset only CSS if needed. |
Is it expected that the original CSS gets wiped as soon as something is entered in the input? That would be a breaking change relative to current behaviour as, without the existing CSS being pre-added in the input, there's no way of keeping it. Adding custom CSS doesn't necessarily mean we don't want the theme-defined styles to be preserved. |
That should be the case in this PR too, but if you make modifications, it's your modifications that persist. Sounds legit to me. Am I missing anything? |
|
@tellthemachines this works the same as the existing functionality, ie. any custom css from custom-css-new.mp4The key difference from what we currently have is there is no indication to the user where that CSS came from, and there is no way to see what it was if deleted other than doing a full restore of all global styles - this could be overcome by adding the |
|
Oh, I meant that when I tested, the theme.json styles weren't appearing in the input at all, even before I started typing in it. If that's not the current behaviour on this branch, maybe it was an issue with my local dev env. |
There was a problem hiding this comment.
On further testing I think my previous issue was a local env one. Adding some custom CSS at the "styles" level in theme.json, in this branch:
- the additional CSS field in global styles is immediately visible (imo this is nicer than trunk, where the field only displays by default if there is user CSS)
- the theme.json CSS appears in the field, though the delimiting comments are gone.
| */ | ||
| import { default as transformStyles } from '../../utils/transform-styles'; | ||
|
|
||
| export default function AdvancedPanel( { |
There was a problem hiding this comment.
Is the intention that this component will be expanded with more functionality later? Otherwise it would be clearer to call it something like "CustomCSSPanel".
There was a problem hiding this comment.
The idea is the component is equivalent to the "Advanced" section of the block inspector panel. It can contain things like custom class, anchor, ... and any "common" advanced setting.
The issue here is kind of similar to the "filters" panel where we only have duotone and the "effects" panel where we only have "box shadow" so far.
There was a problem hiding this comment.
Got it. So this panel would replace the block inspector Advanced section, once it's expanded to handle custom classes etc.?
There was a problem hiding this comment.
That's my hope but I'm not entirely sure. Visually at least, it helps creates a relation between the two panels (local and global ones)
There was a problem hiding this comment.
I'm not sure I understand. Visually the custom CSS panel in this branch looks the same as in trunk; they both use similar fonts and spacing as the block inspector panels.
Is the idea to potentially add custom CSS to the block inspector so it can be set on individual blocks? Right now the logic in this AdvancedPanel is pretty specific to custom CSS.
There was a problem hiding this comment.
I'm not sure I understand. Visually the custom CSS panel in this branch looks the same as in trunk; they both use similar fonts and spacing as the block inspector panels.
Is the idea to potentially add custom CSS to the block inspector so it can be set on individual blocks? Right now the logic in this AdvancedPanel is pretty specific to custom CSS.
My logic is the following. Within "inspector controls" we have "panels" and each panel has "controls".
- Typography panel has a dozen of controls (font size, font family, line height...)
- Color panel has some controls too (background, text, link, ...)
- Dimensions panel has some controls too (height, width, padding, margin...)
- Effects panel has some controls (only box shadows now)
- Filters panel has some controls (only duotone now)
- Advanced panel has some controls too (custom CSS). It turns out that for this one right now, custom CSS is global style only and the rest are block inspector only, that said, it was the same for "duotone" when I implemented the panel, and I believe it's the same for the effects panel too. But it doesn't mean that it will always be the case, custom CSS can be added to block inspector at any point.
Does that make sense?
There was a problem hiding this comment.
custom CSS can be added to block inspector at any point
If that's the case then it makes sense to have this here. Though if we ever add more global styles controls here, it might be better to change the name of the site editor component from CustomCSSControl to something more generic too.
There was a problem hiding this comment.
better to change the name of the site editor component from CustomCSSControl to something more generic too.
I actually agree with this, It should be AdvancedPanel too there too. It's just that I got confused, I thought you were discussing the ones in the block editor package. I'll make the update.
There was a problem hiding this comment.
Ok, so I just took a look again. I think the issue right now with the naming is that we access the panel by clicking "Additional CSS" button and going into an "Custom CSS screen" which contains this component.
So if I update CustomCSSControl to AdvancedPanel, I'll be just moving the issue to another place because the CustomCSSScreen will include AdvancedPanel. (so same issue).
I think this is just a temporary issue though that will be solved when we unify the whole block sidebar in #49428 since we'll just be rendering all the panels inline exactly like the block inspector. So I think we shouldn't be doing anything here for now until the other PR.
There was a problem hiding this comment.
That makes sense! Another thing that would be good to look at in a follow up would be adding a "reset" button that wipes any user-added CSS and restores the theme CSS if there is any.
youknowriad
force-pushed
the
update/CSS-panel
branch
from
83d0c10
to
e8205ba
Compare
There was a problem hiding this comment.
I'm probably missing part of the picture here but it feels a bit weird to have a CustomCSSControl that only deals with passing generic global styles into an AdvancedPanel that in turn has all the specific logic for dealing with custom CSS. Shouldn't the naming be the other way around?
| */ | ||
| import { default as transformStyles } from '../../utils/transform-styles'; | ||
|
|
||
| export default function AdvancedPanel( { |
There was a problem hiding this comment.
I'm not sure I understand. Visually the custom CSS panel in this branch looks the same as in trunk; they both use similar fonts and spacing as the block inspector panels.
Is the idea to potentially add custom CSS to the block inspector so it can be set on individual blocks? Right now the logic in this AdvancedPanel is pretty specific to custom CSS.
packages/block-editor/src/components/global-styles/advanced-panel.js
Outdated
Show resolved
Hide resolved
| */ | ||
| import { default as transformStyles } from '../../utils/transform-styles'; | ||
|
|
||
| export default function AdvancedPanel( { |
There was a problem hiding this comment.
That makes sense! Another thing that would be good to look at in a follow up would be adding a "reset" button that wipes any user-added CSS and restores the theme CSS if there is any.
bph
added
[Package] Components
WHAT
🤖 Generated by Copilot at 78052d1
This pull request introduces a new
AdvancedPanelcomponent for editing custom CSS in global styles panels. It also refactors thecustom-csscomponent in theedit-sitemodule to use this new component and theuseGlobalStylehook.🤖 Generated by Copilot at 78052d1
WHY
Adds an AdvancedPanel component to the Styles UI folder (to be reused in block inspector too) and removes custom logic for the CSS panel (just map the behavior of all other global styles panels)
HOW
🤖 Generated by Copilot at 78052d1
AdvancedPanelcomponent from theglobal-stylesmodule (link)custom-csscomponent inedit-siteto use theAdvancedPanelcomponent and theuseGlobalStylehook (link, link)