Add style variations to the Site Editor#96
Conversation
scruffian
force-pushed
the
update/add-to-site-editor
branch
2 times, most recently
from
3a88306 to
9b0a9ab
Compare
scruffian
force-pushed
the
update/add-to-site-editor
branch
from
8aefd30 to
96c0528
Compare
|
I also added blank theme creation to the site editor:
|
madhusudhand
left a comment
madhusudhand
left a comment
There was a problem hiding this comment.
Plugin is crashing on click of the button.
| return ( | ||
| <PanelBody> | ||
| <MenuGroup label={ __( 'Create style variation' ) }> | ||
| <TextControl onChange={ ( value ) => setVariationName( value ) } placeholder={ __( 'Variation name' ) }></TextControl> |
There was a problem hiding this comment.
May be a short description can be added to give the context of the feature.
Save user changes as a new style variation of the current theme
|
@madhusudhand @pbking sorry I forgot to mention that you also need this associated Gutenberg PR: WordPress/gutenberg#42824 |
jffng
left a comment
jffng
left a comment
There was a problem hiding this comment.
This worked well for me in combination with the WordPress/gutenberg#42824.
If Gutenberg is deactivated, the editor crashes when I click on the Create Block Theme panel, so perhaps a check should be added for whether to initialize this panel.
|
|
||
| const StyleVariations = () => { | ||
| const [ variationName, setVariationName ] = useState( '' ); | ||
| const [ canReset, onReset ] = wp.editSite.useGlobalStylesReset(); |
There was a problem hiding this comment.
It's nice for demo purposes but I'm wondering from a UX perspective, does it make sense to reset the styles when the variation is created?
There was a problem hiding this comment.
That's what we do in the PHP side of the tool.
There was a problem hiding this comment.
Ideally when in this perspective we could activate the variation (which would leave all of the styles as-set instead of resetting to default).
|
|
||
| return ( | ||
| <PanelBody> | ||
| <MenuGroup label={ __( 'Create style variation' ) }> |
There was a problem hiding this comment.
There's a padding applied to this label that I think looks off, I think it should be just left aligned, if possible. Maybe that's a problem with the component though.
There was a problem hiding this comment.
Yeah I'd rather fix that in the component itself.
Yeah, definitely either need a check for capabilities or wait for that change to land in CORE to release this. |
Done in dfbc74f. |
jffng
left a comment
jffng
left a comment
There was a problem hiding this comment.
Would like to see this one land since it makes designing a variation in the site editor so much easier, especially if you are switching around between versions / branches a lot.
|
Ah just as I green checked, I noticed one bug — when I try to save a variation with a space in its name, it 404s:
|
scruffian
force-pushed
the
update/add-to-site-editor
branch
from
dfbc74f to
6891b91
Compare
save the variation locally generate a zip with the variation shanged wording, added script to toggle between forms wording and paths duplicate variations with the same name instead of replacing them revert disconnected changes
What: - Move Style Variations to secondary navigation screen - Remove outdated API Some of the removed code has to be re-worked using current APIs.i
vcanales
force-pushed
the
update/add-to-site-editor
branch
from
86f4dbf to
742c7e7
Compare
|
It's been a while, so I took the liberty to bring this up to date removing some code that was breaking due to changes in the App. I also refactored it to reflect how other parts of the Plugin behave within the Site Editor. If @scruffian has no objections, I'd be happy to dedicate a bit of time to this. |
|
I would love to see this wrap up and land. It was the inspiration and reference for other site editor changes but that never included variations! Would be keen to review or assist on wrapping this up. |
|
I'm happy for anyone to take this over. |
|
closing this in favour of #532 |
5 participants
This adds style variation creation to the Site Editor:
Jul-29-2022.17-43-33.mp4
This adds a new JS package that allows us to integrate this tool more deeply into the Gutenberg Site Editor.
The initial step is to add the creation of style variations, but in the future we should move across other tools.
To test you need to use this Gutenberg PR: WordPress/gutenberg#42824