-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Global Styles: Site Edit Integration (FSE) #20061
Conversation
Do you think we should extract the ColorControl component to its own PR? |
Really excited to see this taking shape, thanks for kicking this off @ItsJonQ |
@youknowriad I can if that's preferable 👍 The code originally came from my branch here: |
844102e
to
921c99f
Compare
Heya all! The latest update I've pushed includes a (mock) rigging of the global style controls with placeholder content on Edit Site. This update helps simulate the experience of setting global styles: Demo GIF WP GS EnvironmentWithin the Gutenberg Editor, we can't add the Note: Non-block rendered Component UI may still be affected, depending on their CSS specificity. Mock State/RendererI've written a mock state manager ( Block Components x VariablesI've rigged up the Placeholder contentFor now, I've added This is still incredibly early! It's a good starting point though! Very cool to see all of the pieces come together :) |
6be771a
to
cfdd15a
Compare
@nosolosw + @karmatosed Haiii! I have some updates :) By the blockI've improved the Global Styles Sidebar/Panel experience in the context of Edit Site. The biggest UX change is that block specific block styles only show when the block is selected (demo below): Note: Global site values like Color and Typography are always there
|
export { | ||
default as BlockEdit, | ||
useBlockEditContext, | ||
ifBlockEditSelected, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Need this piece for the global styles slot/fill
@@ -0,0 +1,3 @@ | |||
export function isEditSite() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pretty hack implementation 😅
This is super cool so far! A couple of my initial thoughts with it:
If these have been addressed elsewhere already, my apologies! I am doing my best to track the latest status of everything in the Red Phase! |
@johnstonphilip Awesome! Thank you so much for checking it out and providing feedback 😍
Not yet! At the moment, the changes aren't actually saved yet. We're working on bringing in the saving and rendering on the actual site part next 🙌
It's very top of mind for me. However, the ideas I have are very premature. Handling responsiveness is something we need to improve for blocks in general. Changing styles from an aesthetics point of view is one thing (e.g. color), but changing values/behaviour based on layout is another. If you have any ideas or have seen good examples of this, let's create a Github issue and explore it together :)
No apologies needed! For global styles updates, I've tried my best to keep current work update to date on the Github project board. |
I like how this is shaping up. It's going to be easy to reason with the levels of fallback: I agree with splitting the color part away, specially since we need to revise how the picker and the notion of palettes work. It'd be interesting to connect a line-height control on the paragraph block in subsequent PRs to see how the base style relates to custom modifications. |
</EntityProvider> | ||
</DropZoneProvider> | ||
</SlotFillProvider> | ||
<GlobalStylesStateProvider> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does Global Style need to be the outer-most provider?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For this current implementation. Most likely would not once content is provided by @wordpress/data
. At the moment, I'm simulating that data flow with a React.Context
instance
I'll note this one is quite difficult for me to parse. It feels extremely odd to have one block selected, but see global styles change on multiple blocks (even unselected ones). I get that this is a way to surface block-specific global styles, but nevertheless, when I have one specific block selected, I only expect changes to apply to that one block. Global styles is... well... global. When I enter into that mode, I don't expect to have a particular block selected because I'm ready to change all related content... wherever it may live. Where I have the most trouble is block-type global styling. I agree that it's a necessary part, and probably the hardest part for getting the UI right. I don't want to derail the work, so let's get some testing around this to see if I'm just being a cantankerous old man on this one. 😉 |
Just closing a loop from another issue this came up, if we can see about getting all blocks of a type selected when you click one, that might ease. See: #20212 (comment) for context. |
Size Change: +1.26 kB (0%) Total Size: 863 kB
ℹ️ View Unchanged
|
Description
This update creates an initial interface for the Global Styles controls as part of the initial Global Styles work.
We're starting off with the simplest implementation.
The purpose is to rig up the various data/render mechanics within the Global Styles system with the FSE experience. We're currently exploring how the user experience will be improved in regards to the controls.
How has this been tested?
Changes and notes
GlobalStyles Panel
The GlobalStyles controls are rendered in a
Panel
within the new FSEedit-site
component. This implementation is subject to change. I had added it there just to get startedColorControl
Part of this change involves adding a new Color picking component,
ColorControl
. We don't necessarily need to ship both the controls and the new global styles interface. However, this simplified control is much easier to work with compared to the other Color pickers from our current@wordpress/components
library.Getting and Setting data
This still needs to be rigged up. For the initial push, I've just added the UI controls. We still need to resolve, hydrate, update and render the global style values
@nosolosw, @jorgefilipecosta, and I have worked together to build the various pieces.
@karmatosed has helped with initial designs.
cc'ing all you lovely folks so that we can work through this together :)
Thank you!
Todos