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 c81a2d5469ecc1..3f700ec22a2920 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 d4fb5862c80d4d..923ed47282efb8 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 7beba9942dc70d..ef937134a43c3f 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 b387febedf3699..40afe71538fdef 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 791c95ff079697..23b5628cb219dc 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 0f8d900b62c4cf..023184969babd6 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 c64041fe8d9b95..8d39252aee128b 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 49239ae4d0c303..895dc40e7d7be1 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 5ea2417761c2da..a86ebe02388d7d 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 1d4d0d45be6761..2626e0cec5ba61 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 0cf5bee75c4c75..bdf4064f00146b 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;
}