-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Mobile - Global styles: Block-specific styles #30997
Conversation
…ure/global-styles-root-styles
…ure/global-styles-root-styles
Size Change: +12.2 kB (+1%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
…ents (#30684) * Mobile - Read global styles and set color palette and gradients * Parse all color variables * Fix gradients * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Remove mock data and update code to use latest API changes
# Conflicts: # packages/editor/src/components/provider/index.native.js
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.
Great work @geriux 👍
I started testing this on Android and everything looks great till now. The code also LGTM.
I'll resume testing tomorrow with more blocks and the iOS side.
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.
I tested this on Android (Pixel 2 XL/Android 11) and iOS (iPhone SE 2020/iOS 14.4.1) and everything works as expected. The code changes are consistent and overall LGTM 🎉
Great work @geriux 🙇
Hey @ellatrix 👋 I was wondering if you have some time to give this PR a look, I tested the web editor and these changes don't affect the current functionality. It adds the Thank you! |
@@ -41,6 +41,7 @@ export default function ListEdit( { | |||
setAttributes, | |||
mergeBlocks, | |||
onReplace, | |||
mergedStyle, |
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.
Why not simply "style"?
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.
Ok, for web this seems fine. |
* Mobile - Read global styles and set color palette and gradients * Mobile - Enable colors for blocks that support it * Parse all color variables * Mobile - Set background, title, text and link colors * Fix gradients * Add placeholder color * Add support to block styles * Add reset button in color picker * Fix placeholder colors * Fix paddings and remove Columns placeholder solid background * Don't reset paddings for inner blocks that have paddings already * Mobile - Block styles support * Add fallback text color to blocks * Adds new Prop for Global Styles Settings * Rename updateTheme to be more generic for update settings include GSS (#31566) * Fix wrong naming of subscribeUpdateEditorSettings * Update Gutenberg demo * Updates new props to rawStyles and rawFeatures * Update iOS Bridge for new values * Mobile - Global styles: Pass settings and set color palette and gradients (#30684) * Mobile - Read global styles and set color palette and gradients * Parse all color variables * Fix gradients * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Remove mock data and update code to use latest API changes * Removes Android rawFeatures prop * Mobile - Remove usage of rawFeatures * Remove rawFeatures * Adds raw Styles in React Native Bridge * Mobile - Pass rawStyles on initial props and fix colors and gradients * Add Raw Features back * Revert "Removes Android rawFeatures prop" This reverts commit 32a2b3a. * Add rawFeatures in the mobile editor * Mobile - Global styles: Set theme's background and text color (#30810) * Mobile - Read global styles and set color palette and gradients * Mobile - Enable colors for blocks that support it * Parse all color variables * Mobile - Set background, title, text and link colors * Fix gradients * Add placeholder color * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Add missing provider * Get the right color attribute * Remove mock data * Mobile - Fix base global colors * Remove old usage of useEditorFeature * Remove old mock data * Add support for block styles of the Verse block in mobile * Rename mergedStyle to style Co-authored-by: Antonis Lilis <[email protected]> Co-authored-by: Chip <[email protected]>
Fixes wordpress-mobile/gutenberg-mobile#2195
This PR is a continuation of #30684 and #30810
Description
This PR adds support to render the theme's block-specific styles. It also adds a reset option in the color picker.
How has this been tested?
Precondition
To be able to test this feature you need a WordPress 5.8 site running with the Gutenberg plugin and a FSE theme.
Now you should have all needed to test this PR.
In the WP Admin dashboard:
Group
,Paragraph
,Heading
,List
,Verse
,Media&Text
,Columns
,Column
,Buttons
.On the mobile editor
Android
[Global Styles] Adds Global Styles API Call and passes the value to the editor via a new prop wordpress-mobile/WordPress-Android#14597iOS
[Global Styles] Implement Global Styles endpoint wordpress-mobile/WordPress-iOS#16411Reset custom color selection
Screenshots
Types of changes
New feature
Checklist:
*.native.js
files for terms that need renaming or removal).