From 0de0598b1453f079b5fcba60c674fa651d7e05aa Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Wed, 7 Jul 2021 09:37:43 +0200 Subject: [PATCH] Mobile - Global styles: Block-specific styles (#30997) * 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 32a2b3aff85ed83d2a3c953f94d4f37685b4f2ca. * 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 Co-authored-by: Chip --- .../src/components/block-list/block.native.js | 5 +- .../block-library/src/button/edit.native.js | 13 ++-- .../src/column/editor.native.scss | 2 - .../block-library/src/columns/edit.native.js | 6 +- .../block-library/src/group/edit.native.js | 8 +-- packages/block-library/src/heading/edit.js | 4 +- packages/block-library/src/list/edit.js | 5 +- .../src/media-text/edit.native.js | 36 +++++----- .../src/media-text/style.native.scss | 4 ++ .../src/paragraph/edit.native.js | 10 ++- packages/block-library/src/quote/edit.js | 4 +- packages/block-library/src/verse/edit.js | 2 + .../src/color-palette/index.native.js | 2 + .../color-settings/palette.screen.native.js | 32 ++++++++- .../mobile/color-settings/style.native.scss | 12 ++++ .../global-styles-context/index.native.js | 13 +++- .../global-styles-context/utils.native.js | 65 +++++++++++++++++-- 17 files changed, 166 insertions(+), 57 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index c81a2d5469ecc..3f700ec22a292 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -58,7 +58,8 @@ function BlockForType( { globalStyle, wrapperProps.style, attributes, - defaultColors + defaultColors, + name ); }, [ defaultColors, @@ -85,7 +86,7 @@ function BlockForType( { // Block level styles wrapperProps={ wrapperProps } // inherited styles merged with block level styles - mergedStyle={ mergedStyle } + style={ mergedStyle } clientId={ clientId } parentWidth={ parentWidth } contentStyle={ contentStyle } diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index d4fb5862c80d4..923ed47282efb 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -184,7 +184,7 @@ class ButtonEdit extends Component { } getBackgroundColor() { - const { attributes, colors, gradients } = this.props; + const { attributes, colors, gradients, style } = this.props; const { backgroundColor, gradient } = attributes; // Return named gradient value if available. @@ -207,12 +207,13 @@ class ButtonEdit extends Component { colorObject?.color || colorProps.style?.backgroundColor || colorProps.style?.background || + style?.backgroundColor || styles.defaultButton.backgroundColor ); } getTextColor() { - const { attributes, colors } = this.props; + const { attributes, colors, style } = this.props; const colorProps = getColorClassesAndStyles( attributes ); // Retrieve named color object to force inline styles for themes that @@ -225,6 +226,7 @@ class ButtonEdit extends Component { return ( colorObject?.color || colorProps.style?.color || + style?.color || styles.defaultButton.color ); } @@ -375,11 +377,12 @@ class ButtonEdit extends Component { mergeBlocks, parentWidth, setAttributes, + style, } = this.props; const { placeholder, text, - style, + style: buttonStyle, url, align = 'center', width, @@ -391,7 +394,7 @@ class ButtonEdit extends Component { return null; } - const borderRadius = style?.border?.radius; + const borderRadius = buttonStyle?.border?.radius; const borderRadiusValue = Number.isInteger( borderRadius ) ? borderRadius @@ -463,7 +466,7 @@ class ButtonEdit extends Component { } } textAlign={ align } placeholderTextColor={ - styles.placeholderTextColor.color + style?.color || styles.placeholderTextColor.color } identifier="text" tagName="p" diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss index 7beba9942dc70..ef937134a43c3 100644 --- a/packages/block-library/src/column/editor.native.scss +++ b/packages/block-library/src/column/editor.native.scss @@ -5,13 +5,11 @@ .columnPlaceholder { flex: 1; padding: $block-selected-to-content; - background-color: $white; border: $border-width dashed $gray; border-radius: 4px; } .columnPlaceholderDark { - background-color: $black; border: $border-width dashed $gray-70; } diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index b387febedf369..40afe71538fde 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -442,7 +442,7 @@ const ColumnsEditContainerWrapper = withDispatch( )( memo( ColumnsEditContainer ) ); const ColumnsEdit = ( props ) => { - const { clientId, isSelected } = props; + const { clientId, isSelected, style } = props; const { columnCount, isDefaultColumns, @@ -505,7 +505,7 @@ const ColumnsEdit = ( props ) => { }, [] ); return ( - <> + { clientId={ clientId } isVisible={ isVisible } /> - + ); }; diff --git a/packages/block-library/src/group/edit.native.js b/packages/block-library/src/group/edit.native.js index 791c95ff07969..23b5628cb219d 100644 --- a/packages/block-library/src/group/edit.native.js +++ b/packages/block-library/src/group/edit.native.js @@ -32,7 +32,7 @@ function GroupEdit( { isSelected, isLastInnerBlockSelected, getStylesFromColorScheme, - mergedStyle, + style, blockWidth, } ) { const { align } = attributes; @@ -79,13 +79,13 @@ function GroupEdit( { diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 0f8d900b62c4c..023184969babd 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -25,7 +25,7 @@ function HeadingEdit( { setAttributes, mergeBlocks, onReplace, - mergedStyle, + style, clientId, } ) { const { textAlign, content, level, placeholder } = attributes; @@ -34,7 +34,7 @@ function HeadingEdit( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, } ), - style: mergedStyle, + style, } ); return ( diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js index c64041fe8d9b9..8d39252aee128 100644 --- a/packages/block-library/src/list/edit.js +++ b/packages/block-library/src/list/edit.js @@ -41,6 +41,7 @@ export default function ListEdit( { setAttributes, mergeBlocks, onReplace, + style, } ) { const { ordered, values, type, reversed, start, placeholder } = attributes; const tagName = ordered ? 'ol' : 'ul'; @@ -132,7 +133,9 @@ export default function ListEdit( { ); - const blockProps = useBlockProps(); + const blockProps = useBlockProps( { + style, + } ); return ( <> diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js index 49239ae4d0c30..895dc40e7d7be 100644 --- a/packages/block-library/src/media-text/edit.native.js +++ b/packages/block-library/src/media-text/edit.native.js @@ -254,7 +254,7 @@ class MediaTextEdit extends Component { setAttributes, isSelected, isRTL, - wrapperProps, + style, blockWidth, } = this.props; const { @@ -273,14 +273,21 @@ class MediaTextEdit extends Component { ? 100 : this.state.mediaWidth || mediaWidth; const widthString = `${ temporaryMediaWidth }%`; + const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth; + const innerBlockWidthString = `${ innerBlockWidth }%`; - const innerBlockContainerStyle = ! shouldStack - ? styles.innerBlock - : { - ...( mediaPosition === 'left' - ? styles.innerBlockStackMediaLeft - : styles.innerBlockStackMediaRight ), - }; + const innerBlockContainerStyle = [ + { width: innerBlockWidthString }, + ! shouldStack + ? styles.innerBlock + : { + ...( mediaPosition === 'left' + ? styles.innerBlockStackMediaLeft + : styles.innerBlockStackMediaRight ), + }, + ( style?.backgroundColor || backgroundColor.color ) && + styles.innerBlockPaddings, + ]; const containerStyles = { ...styles[ 'wp-block-media-text' ], @@ -295,14 +302,10 @@ class MediaTextEdit extends Component { ? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ] : {} ), ...( isSelected && styles[ 'is-selected' ] ), - backgroundColor: - wrapperProps?.style?.backgroundColor || backgroundColor.color, + backgroundColor: style?.backgroundColor || backgroundColor.color, paddingBottom: 0, }; - const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth; - const innerBlockWidthString = `${ innerBlockWidth }%`; - const mediaContainerStyle = [ { flex: 1 }, shouldStack @@ -375,12 +378,7 @@ class MediaTextEdit extends Component { > { this.renderMediaArea( shouldStack ) } - + { const route = useRoute(); const navigation = useNavigation(); @@ -50,6 +52,10 @@ const PaletteScreen = () => { styles.horizontalSeparator, styles.horizontalSeparatorDark ); + const clearButtonStyle = usePreferredColorSchemeStyle( + styles.clearButton, + styles.clearButtonDark + ); const isSolidSegment = currentSegment === segments[ 0 ]; const isCustomGadientShown = ! isSolidSegment && isGradientColor; @@ -67,6 +73,15 @@ const PaletteScreen = () => { } }; + function onClear() { + setCurrentValue( undefined ); + if ( isSolidSegment ) { + onColorChange( '' ); + } else { + onGradientChange( '' ); + } + } + function onCustomPress() { if ( isSolidSegment ) { navigation.navigate( colorsUtils.screens.picker, { @@ -82,6 +97,16 @@ const PaletteScreen = () => { } } + function getClearButton() { + return ( + + + { __( 'Reset' ) } + + + ); + } + function getFooter() { if ( onGradientChange ) { return ( @@ -97,6 +122,7 @@ const PaletteScreen = () => { /> ) } + addonRight={ currentValue && getClearButton() } /> ); } @@ -116,7 +142,9 @@ const PaletteScreen = () => { > { __( 'Select a color' ) } - + + { currentValue && getClearButton() } + ); } diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index 5ea2417761c2d..a86ebe02388d7 100644 --- a/packages/components/src/mobile/color-settings/style.native.scss +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -33,3 +33,15 @@ flex: 1; } +.clearButtonContainer { + align-items: flex-end; +} + +.clearButton { + color: $blue-50; + font-size: 17px; +} + +.clearButtonDark { + color: $blue-30; +} diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js index 1d4d0d45be676..2626e0cec5ba6 100644 --- a/packages/components/src/mobile/global-styles-context/index.native.js +++ b/packages/components/src/mobile/global-styles-context/index.native.js @@ -26,7 +26,8 @@ export const getMergedGlobalStyles = ( globalStyle, wrapperPropsStyle, blockAttributes, - defaultColors + defaultColors, + blockName ) => { const baseGlobalColors = { baseColors: baseGlobalStyles || {}, @@ -40,12 +41,18 @@ export const getMergedGlobalStyles = ( ...globalStyle, ...wrapperPropsStyle, }; + const blockColors = getBlockColors( + blockStyleAttributes, + defaultColors, + blockName, + baseGlobalStyles + ); const blockPaddings = getBlockPaddings( mergedStyle, wrapperPropsStyle, - blockStyleAttributes + blockStyleAttributes, + blockColors ); - const blockColors = getBlockColors( blockStyleAttributes, defaultColors ); return { ...mergedStyle, ...blockPaddings, ...blockColors }; }; diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index 0cf5bee75c4c7..bdf4064f00146 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -3,26 +3,37 @@ */ import { find, startsWith } from 'lodash'; -export const BLOCK_STYLE_ATTRIBUTES = [ 'textColor', 'backgroundColor' ]; +export const BLOCK_STYLE_ATTRIBUTES = [ + 'textColor', + 'backgroundColor', + 'style', +]; // Mapping style properties name to native const BLOCK_STYLE_ATTRIBUTES_MAPPING = { textColor: 'color', + text: 'color', + background: 'backgroundColor', + link: 'linkColor', + placeholder: 'placeholderColor', }; -const PADDING = 12; // solid-border-space +const PADDING = 12; // $solid-border-space +const UNKNOWN_VALUE = 'undefined'; export function getBlockPaddings( mergedStyle, wrapperPropsStyle, - blockStyleAttributes + blockStyleAttributes, + blockColors ) { const blockPaddings = {}; if ( ! mergedStyle.padding && ( wrapperPropsStyle?.backgroundColor || - blockStyleAttributes?.backgroundColor ) + blockStyleAttributes?.backgroundColor || + blockColors?.backgroundColor ) ) { blockPaddings.padding = PADDING; return blockPaddings; @@ -32,7 +43,8 @@ export function getBlockPaddings( if ( mergedStyle?.padding && ! wrapperPropsStyle?.backgroundColor && - ! blockStyleAttributes?.backgroundColor + ! blockStyleAttributes?.backgroundColor && + ! blockColors?.backgroundColor ) { blockPaddings.padding = undefined; } @@ -40,9 +52,44 @@ export function getBlockPaddings( return blockPaddings; } -export function getBlockColors( blockStyleAttributes, defaultColors ) { +export function getBlockColors( + blockStyleAttributes, + defaultColors, + blockName, + baseGlobalStyles +) { const blockStyles = {}; + const customBlockStyles = blockStyleAttributes?.style?.color || {}; + const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ]; + + // Global styles colors + if ( blockGlobalStyles?.color ) { + Object.entries( blockGlobalStyles.color ).forEach( + ( [ key, value ] ) => { + const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[ key ]; + + if ( styleKey && value !== UNKNOWN_VALUE ) { + const color = customBlockStyles[ key ] ?? value; + blockStyles[ styleKey ] = color; + } + } + ); + } else if ( baseGlobalStyles?.styles?.color?.text ) { + blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.text ] = + baseGlobalStyles?.styles?.color?.text; + } + // Global styles elements + if ( blockGlobalStyles?.elements ) { + const linkColor = blockGlobalStyles.elements?.link?.color?.text; + const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link; + + if ( styleKey && linkColor && linkColor !== UNKNOWN_VALUE ) { + blockStyles[ styleKey ] = linkColor; + } + } + + // Custom colors Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => { const isCustomColor = startsWith( value, '#' ); let styleKey = key; @@ -64,6 +111,12 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) { } } ); + // Color placeholder + if ( blockStyles?.color ) { + blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder ] = + blockStyles.color; + } + return blockStyles; }