Skip to content

Commit cc28b4d

Browse files
Gerardo Pachecoantonischipsnyder
authored and
sarayourfriend
committed
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 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]>
1 parent 17ece0a commit cc28b4d

File tree

17 files changed

+166
-57
lines changed

17 files changed

+166
-57
lines changed

‎packages/block-editor/src/components/block-list/block.native.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ function BlockForType( {
5858
globalStyle,
5959
wrapperProps.style,
6060
attributes,
61-
defaultColors
61+
defaultColors,
62+
name
6263
);
6364
}, [
6465
defaultColors,
@@ -85,7 +86,7 @@ function BlockForType( {
8586
// Block level styles
8687
wrapperProps={ wrapperProps }
8788
// inherited styles merged with block level styles
88-
mergedStyle={ mergedStyle }
89+
style={ mergedStyle }
8990
clientId={ clientId }
9091
parentWidth={ parentWidth }
9192
contentStyle={ contentStyle }

‎packages/block-library/src/button/edit.native.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ class ButtonEdit extends Component {
184184
}
185185

186186
getBackgroundColor() {
187-
const { attributes, colors, gradients } = this.props;
187+
const { attributes, colors, gradients, style } = this.props;
188188
const { backgroundColor, gradient } = attributes;
189189

190190
// Return named gradient value if available.
@@ -207,12 +207,13 @@ class ButtonEdit extends Component {
207207
colorObject?.color ||
208208
colorProps.style?.backgroundColor ||
209209
colorProps.style?.background ||
210+
style?.backgroundColor ||
210211
styles.defaultButton.backgroundColor
211212
);
212213
}
213214

214215
getTextColor() {
215-
const { attributes, colors } = this.props;
216+
const { attributes, colors, style } = this.props;
216217
const colorProps = getColorClassesAndStyles( attributes );
217218

218219
// Retrieve named color object to force inline styles for themes that
@@ -225,6 +226,7 @@ class ButtonEdit extends Component {
225226
return (
226227
colorObject?.color ||
227228
colorProps.style?.color ||
229+
style?.color ||
228230
styles.defaultButton.color
229231
);
230232
}
@@ -375,11 +377,12 @@ class ButtonEdit extends Component {
375377
mergeBlocks,
376378
parentWidth,
377379
setAttributes,
380+
style,
378381
} = this.props;
379382
const {
380383
placeholder,
381384
text,
382-
style,
385+
style: buttonStyle,
383386
url,
384387
align = 'center',
385388
width,
@@ -391,7 +394,7 @@ class ButtonEdit extends Component {
391394
return null;
392395
}
393396

394-
const borderRadius = style?.border?.radius;
397+
const borderRadius = buttonStyle?.border?.radius;
395398

396399
const borderRadiusValue = Number.isInteger( borderRadius )
397400
? borderRadius
@@ -463,7 +466,7 @@ class ButtonEdit extends Component {
463466
} }
464467
textAlign={ align }
465468
placeholderTextColor={
466-
styles.placeholderTextColor.color
469+
style?.color || styles.placeholderTextColor.color
467470
}
468471
identifier="text"
469472
tagName="p"

‎packages/block-library/src/column/editor.native.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@
55
.columnPlaceholder {
66
flex: 1;
77
padding: $block-selected-to-content;
8-
background-color: $white;
98
border: $border-width dashed $gray;
109
border-radius: 4px;
1110
}
1211

1312
.columnPlaceholderDark {
14-
background-color: $black;
1513
border: $border-width dashed $gray-70;
1614
}
1715

‎packages/block-library/src/columns/edit.native.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ const ColumnsEditContainerWrapper = withDispatch(
442442
)( memo( ColumnsEditContainer ) );
443443

444444
const ColumnsEdit = ( props ) => {
445-
const { clientId, isSelected } = props;
445+
const { clientId, isSelected, style } = props;
446446
const {
447447
columnCount,
448448
isDefaultColumns,
@@ -505,7 +505,7 @@ const ColumnsEdit = ( props ) => {
505505
}, [] );
506506

507507
return (
508-
<>
508+
<View style={ style }>
509509
<ColumnsEditContainerWrapper
510510
columnCount={ columnCount }
511511
innerWidths={ memoizedInnerWidths }
@@ -520,7 +520,7 @@ const ColumnsEdit = ( props ) => {
520520
clientId={ clientId }
521521
isVisible={ isVisible }
522522
/>
523-
</>
523+
</View>
524524
);
525525
};
526526

‎packages/block-library/src/group/edit.native.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function GroupEdit( {
3232
isSelected,
3333
isLastInnerBlockSelected,
3434
getStylesFromColorScheme,
35-
mergedStyle,
35+
style,
3636
blockWidth,
3737
} ) {
3838
const { align } = attributes;
@@ -79,13 +79,13 @@ function GroupEdit( {
7979
<View
8080
style={ [
8181
isSelected && hasInnerBlocks && styles.innerBlocks,
82-
mergedStyle,
82+
style,
8383
isSelected &&
8484
hasInnerBlocks &&
85-
mergedStyle?.backgroundColor &&
85+
style?.backgroundColor &&
8686
styles.hasBackgroundAppender,
8787
isLastInnerBlockSelected &&
88-
mergedStyle?.backgroundColor &&
88+
style?.backgroundColor &&
8989
styles.isLastInnerBlockSelected,
9090
] }
9191
>

‎packages/block-library/src/heading/edit.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function HeadingEdit( {
2525
setAttributes,
2626
mergeBlocks,
2727
onReplace,
28-
mergedStyle,
28+
style,
2929
clientId,
3030
} ) {
3131
const { textAlign, content, level, placeholder } = attributes;
@@ -34,7 +34,7 @@ function HeadingEdit( {
3434
className: classnames( {
3535
[ `has-text-align-${ textAlign }` ]: textAlign,
3636
} ),
37-
style: mergedStyle,
37+
style,
3838
} );
3939

4040
return (

‎packages/block-library/src/list/edit.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export default function ListEdit( {
4141
setAttributes,
4242
mergeBlocks,
4343
onReplace,
44+
style,
4445
} ) {
4546
const { ordered, values, type, reversed, start, placeholder } = attributes;
4647
const tagName = ordered ? 'ol' : 'ul';
@@ -132,7 +133,9 @@ export default function ListEdit( {
132133
</>
133134
);
134135

135-
const blockProps = useBlockProps();
136+
const blockProps = useBlockProps( {
137+
style,
138+
} );
136139

137140
return (
138141
<>

‎packages/block-library/src/media-text/edit.native.js‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ class MediaTextEdit extends Component {
254254
setAttributes,
255255
isSelected,
256256
isRTL,
257-
wrapperProps,
257+
style,
258258
blockWidth,
259259
} = this.props;
260260
const {
@@ -273,14 +273,21 @@ class MediaTextEdit extends Component {
273273
? 100
274274
: this.state.mediaWidth || mediaWidth;
275275
const widthString = `${ temporaryMediaWidth }%`;
276+
const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
277+
const innerBlockWidthString = `${ innerBlockWidth }%`;
276278

277-
const innerBlockContainerStyle = ! shouldStack
278-
? styles.innerBlock
279-
: {
280-
...( mediaPosition === 'left'
281-
? styles.innerBlockStackMediaLeft
282-
: styles.innerBlockStackMediaRight ),
283-
};
279+
const innerBlockContainerStyle = [
280+
{ width: innerBlockWidthString },
281+
! shouldStack
282+
? styles.innerBlock
283+
: {
284+
...( mediaPosition === 'left'
285+
? styles.innerBlockStackMediaLeft
286+
: styles.innerBlockStackMediaRight ),
287+
},
288+
( style?.backgroundColor || backgroundColor.color ) &&
289+
styles.innerBlockPaddings,
290+
];
284291

285292
const containerStyles = {
286293
...styles[ 'wp-block-media-text' ],
@@ -295,14 +302,10 @@ class MediaTextEdit extends Component {
295302
? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ]
296303
: {} ),
297304
...( isSelected && styles[ 'is-selected' ] ),
298-
backgroundColor:
299-
wrapperProps?.style?.backgroundColor || backgroundColor.color,
305+
backgroundColor: style?.backgroundColor || backgroundColor.color,
300306
paddingBottom: 0,
301307
};
302308

303-
const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
304-
const innerBlockWidthString = `${ innerBlockWidth }%`;
305-
306309
const mediaContainerStyle = [
307310
{ flex: 1 },
308311
shouldStack
@@ -375,12 +378,7 @@ class MediaTextEdit extends Component {
375378
>
376379
{ this.renderMediaArea( shouldStack ) }
377380
</View>
378-
<View
379-
style={ {
380-
width: innerBlockWidthString,
381-
...innerBlockContainerStyle,
382-
} }
383-
>
381+
<View style={ innerBlockContainerStyle }>
384382
<InnerBlocks
385383
template={ TEMPLATE }
386384
blockWidth={ blockWidth }

‎packages/block-library/src/media-text/style.native.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,10 @@ $media-to-text: 12px;
141141
padding-left: $media-to-text;
142142
}
143143

144+
.innerBlockPaddings {
145+
padding: 0 $media-to-text $media-to-text;
146+
}
147+
144148
// Media STACK
145149
.mediaStackLeft {
146150
margin-bottom: $media-to-text;

‎packages/block-library/src/paragraph/edit.native.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ function ParagraphBlock( {
1919
mergeBlocks,
2020
onReplace,
2121
setAttributes,
22-
mergedStyle,
2322
style,
2423
clientId,
2524
} ) {
@@ -30,12 +29,11 @@ function ParagraphBlock( {
3029
const { align, content, placeholder } = attributes;
3130

3231
const styles = {
33-
...( mergedStyle?.baseColors && {
34-
color: mergedStyle.baseColors?.color?.text,
35-
placeholderColor: mergedStyle.baseColors?.color?.text,
36-
linkColor: mergedStyle.baseColors?.elements?.link?.color?.text,
32+
...( style?.baseColors && {
33+
color: style.baseColors?.color?.text,
34+
placeholderColor: style.color || style.baseColors?.color?.text,
35+
linkColor: style.baseColors?.elements?.link?.color?.text,
3736
} ),
38-
...mergedStyle,
3937
...style,
4038
};
4139

0 commit comments

Comments
 (0)