[Mobile] - Support background colors for Group block (#25994)

* Mobile - Support background/foreground colors for Group block * Mobile - Enable ColorEdit * Mobile - Add paddings to text blocks with background color * Mobile - Add clear button to palette color screen * Mobile - Global styles context utils and tests * Mobile - Palette screen - Change text and keep the same sheet when resetting a color * Mobile - Quote block - Support to inherit colors from parent block * Mobile - Block quotation and Rich text styles * Mobile - Group block - Remove extra bottom padding when a background color is set * Mobile - Color settings - Remove clear button, to be added in another PR * Mobile - Disable ColorEdit for blocks that have color support * Mobile - Group - Background color fixes * Mobile - Update changelog
WordPress · Nov 20, 2020 · 8df048c · 8df048c
1 parent d27e094
commit 8df048c
Show file tree

Hide file tree

Showing 12 changed files with 334 additions and 59 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
@@ -7,13 +7,18 @@ import { View, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
  * WordPress dependencies
  */
 import { Component, createRef } from '@wordpress/element';
-import { GlobalStylesContext, WIDE_ALIGNMENTS } from '@wordpress/components';
+import {
+	GlobalStylesContext,
+	getMergedGlobalStyles,
+	WIDE_ALIGNMENTS,
+} from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
 	getBlockType,
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
 } from '@wordpress/blocks';
+import { __experimentalUseEditorFeature as useEditorFeature } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -23,6 +28,66 @@ import BlockEdit from '../block-edit';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockMobileToolbar from '../block-mobile-toolbar';
 
+function BlockForType( {
+	attributes,
+	clientId,
+	contentStyle,
+	getBlockWidth,
+	insertBlocksAfter,
+	isSelected,
+	mergeBlocks,
+	name,
+	onBlockFocus,
+	onCaretVerticalPositionChange,
+	onChange,
+	onDeleteBlock,
+	onReplace,
+	parentWidth,
+	wrapperProps,
+} ) {
+	const defaultColors = useEditorFeature( 'color.palette' ) || [];
+
+	return (
+		<GlobalStylesContext.Consumer>
+			{ ( globalStyle ) => {
+				const mergedStyle = getMergedGlobalStyles(
+					globalStyle,
+					wrapperProps.style,
+					attributes,
+					defaultColors
+				);
+
+				return (
+					<GlobalStylesContext.Provider value={ mergedStyle }>
+						<BlockEdit
+							name={ name }
+							isSelected={ isSelected }
+							attributes={ attributes }
+							setAttributes={ onChange }
+							onFocus={ onBlockFocus }
+							onReplace={ onReplace }
+							insertBlocksAfter={ insertBlocksAfter }
+							mergeBlocks={ mergeBlocks }
+							onCaretVerticalPositionChange={
+								onCaretVerticalPositionChange
+							}
+							// Block level styles
+							wrapperProps={ wrapperProps }
+							// inherited styles merged with block level styles
+							mergedStyle={ mergedStyle }
+							clientId={ clientId }
+							parentWidth={ parentWidth }
+							contentStyle={ contentStyle }
+							onDeleteBlock={ onDeleteBlock }
+						/>
+						<View onLayout={ getBlockWidth } />
+					</GlobalStylesContext.Provider>
+				);
+			} }
+		</GlobalStylesContext.Consumer>
+	);
+}
+
 class BlockListBlock extends Component {
 	constructor() {
 		super( ...arguments );
@@ -65,40 +130,12 @@ class BlockListBlock extends Component {
 
 	getBlockForType() {
 		return (
-			<GlobalStylesContext.Consumer>
-				{ ( globalStyle ) => {
-					const mergedStyle = {
-						...globalStyle,
-						...this.props.wrapperProps.style,
-					};
-					return (
-						<GlobalStylesContext.Provider value={ mergedStyle }>
-							<BlockEdit
-								name={ this.props.name }
-								isSelected={ this.props.isSelected }
-								attributes={ this.props.attributes }
-								setAttributes={ this.props.onChange }
-								onFocus={ this.onFocus }
-								onReplace={ this.props.onReplace }
-								insertBlocksAfter={ this.insertBlocksAfter }
-								mergeBlocks={ this.props.mergeBlocks }
-								onCaretVerticalPositionChange={
-									this.props.onCaretVerticalPositionChange
-								}
-								// Block level styles
-								wrapperProps={ this.props.wrapperProps }
-								// inherited styles merged with block level styles
-								mergedStyle={ mergedStyle }
-								clientId={ this.props.clientId }
-								parentWidth={ this.props.parentWidth }
-								contentStyle={ this.props.contentStyle }
-								onDeleteBlock={ this.props.onDeleteBlock }
-							/>
-							<View onLayout={ this.getBlockWidth } />
-						</GlobalStylesContext.Provider>
-					);
-				} }
-			</GlobalStylesContext.Consumer>
+			<BlockForType
+				{ ...this.props }
+				onBlockFocus={ this.onFocus }
+				insertBlocksAfter={ this.insertBlocksAfter }
+				getBlockWidth={ this.getBlockWidth }
+			/>
 		);
 	}
 

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -34,9 +34,6 @@ export const COLOR_SUPPORT_KEY = 'color';
 const EMPTY_ARRAY = [];
 
 const hasColorSupport = ( blockType ) => {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 	return (
 		colorSupport &&
@@ -68,20 +65,12 @@ const hasGradientSupport = ( blockType ) => {
 };
 
 const hasBackgroundColorSupport = ( blockType ) => {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
 	return colorSupport && colorSupport.background !== false;
 };
 
 const hasTextColorSupport = ( blockType ) => {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
 	return colorSupport && colorSupport.text !== false;
@@ -226,7 +215,7 @@ export function ColorEdit( props ) {
 		localAttributes.current = attributes;
 	}, [ attributes ] );
 
-	if ( ! hasColorSupport( blockName ) ) {
+	if ( ! hasColorSupport( blockName ) || Platform.OS !== 'web' ) {
 		return null;
 	}
 

diff --git a/packages/block-library/src/group/edit.native.js b/packages/block-library/src/group/edit.native.js
@@ -8,7 +8,7 @@ import { View } from 'react-native';
  */
 import { withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { InnerBlocks, withColors } from '@wordpress/block-editor';
+import { InnerBlocks } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
 import { WIDE_ALIGNMENTS } from '@wordpress/components';
 
@@ -21,7 +21,9 @@ function GroupEdit( {
 	attributes,
 	hasInnerBlocks,
 	isSelected,
+	isLastInnerBlockSelected,
 	getStylesFromColorScheme,
+	mergedStyle,
 } ) {
 	const { align } = attributes;
 	const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full;
@@ -64,6 +66,14 @@ function GroupEdit( {
 					! hasInnerBlocks &&
 					isFullWidth &&
 					styles.fullWidth,
+				mergedStyle,
+				isSelected &&
+					hasInnerBlocks &&
+					mergedStyle?.backgroundColor &&
+					styles.hasBackgroundAppender,
+				isLastInnerBlockSelected &&
+					mergedStyle?.backgroundColor &&
+					styles.isLastInnerBlockSelected,
 			] }
 		>
 			<InnerBlocks renderAppender={ isSelected && renderAppender } />
@@ -72,14 +82,31 @@ function GroupEdit( {
 }
 
 export default compose( [
-	withColors( 'backgroundColor' ),
 	withSelect( ( select, { clientId } ) => {
-		const { getBlock } = select( 'core/block-editor' );
+		const {
+			getBlock,
+			getBlockIndex,
+			hasSelectedInnerBlock,
+			getSelectedBlockClientId,
+		} = select( 'core/block-editor' );
 
 		const block = getBlock( clientId );
+		const hasInnerBlocks = !! ( block && block.innerBlocks.length );
+		const isInnerBlockSelected =
+			hasInnerBlocks && hasSelectedInnerBlock( clientId, true );
+		let isLastInnerBlockSelected = false;
+
+		if ( isInnerBlockSelected ) {
+			const { innerBlocks } = block;
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const totalInnerBlocks = innerBlocks.length - 1;
+			const blockIndex = getBlockIndex( selectedBlockClientId, clientId );
+			isLastInnerBlockSelected = totalInnerBlocks === blockIndex;
+		}
 
 		return {
-			hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+			hasInnerBlocks,
+			isLastInnerBlockSelected,
 		};
 	} ),
 	withPreferredColorScheme,

diff --git a/packages/block-library/src/group/editor.native.scss b/packages/block-library/src/group/editor.native.scss
@@ -36,3 +36,11 @@
 	margin-left: $block-edge-to-content;
 	margin-right: $block-edge-to-content;
 }
+
+.hasBackgroundAppender {
+	padding-bottom: $grid-unit-30;
+}
+
+.isLastInnerBlockSelected {
+	padding-bottom: 0;
+}
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -24,12 +24,14 @@ export default function QuoteEdit( {
 	onReplace,
 	className,
 	insertBlocksAfter,
+	mergedStyle,
 } ) {
 	const { align, value, citation } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( className, {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
+		style: mergedStyle,
 	} );
 
 	return (

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -99,4 +99,5 @@ export {
 	default as GlobalStylesContext,
 	useGlobalStyles,
 	withGlobalStyles,
+	getMergedGlobalStyles,
 } from './mobile/global-styles-context';
diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
@@ -1,10 +1,48 @@
+/**
+ * External dependencies
+ */
+import { pick } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { createContext, useContext } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import {
+	BLOCK_STYLE_ATTRIBUTES,
+	getBlockPaddings,
+	getBlockColors,
+} from './utils';
+
 const GlobalStylesContext = createContext( { style: {} } );
 
+export const getMergedGlobalStyles = (
+	globalStyle,
+	wrapperPropsStyle,
+	blockAttributes,
+	defaultColors
+) => {
+	const blockStyleAttributes = pick(
+		blockAttributes,
+		BLOCK_STYLE_ATTRIBUTES
+	);
+	const mergedStyle = {
+		...globalStyle,
+		...wrapperPropsStyle,
+	};
+	const blockPaddings = getBlockPaddings(
+		mergedStyle,
+		wrapperPropsStyle,
+		blockStyleAttributes
+	);
+	const blockColors = getBlockColors( blockStyleAttributes, defaultColors );
+
+	return { ...mergedStyle, ...blockPaddings, ...blockColors };
+};
+
 export const useGlobalStyles = () => {
 	const globalStyles = useContext( GlobalStylesContext );