-
Notifications
You must be signed in to change notification settings - Fork 52
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
Add style variations to the Site Editor #96
Conversation
3a88306
to
9b0a9ab
Compare
8aefd30
to
96c0528
Compare
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.
src/index.js
Outdated
return ( | ||
<PanelBody> | ||
<MenuGroup label={ __( 'Create style variation' ) }> | ||
<TextControl onChange={ ( value ) => setVariationName( value ) } placeholder={ __( 'Variation name' ) }></TextControl> |
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.
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 |
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.
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.
src/index.js
Outdated
|
||
const StyleVariations = () => { | ||
const [ variationName, setVariationName ] = useState( '' ); | ||
const [ canReset, onReset ] = wp.editSite.useGlobalStylesReset(); |
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.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's what we do in the PHP side of the tool.
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.
Ideally when in this perspective we could activate the variation (which would leave all of the styles as-set instead of resetting to default).
src/index.js
Outdated
|
||
return ( | ||
<PanelBody> | ||
<MenuGroup label={ __( 'Create style variation' ) }> |
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.
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.
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. |
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.
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.
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
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 |
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