[RNMobile] Fix background and text colour on pullquote block (#34451)

* [RNMobile] Fix background and text colour on pullquote block Fixes #34358 * Make sure that className can be undefined * update the mixed up styles colours * Destructure props for readability * Revert core edit function and replace with a native version * Add placeholder colour Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> * Add textAlign support Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> * Add textAlign support Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> * Removed unused classnames * Center the textAlignment by default Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> * Use the baseColour if it exists. * Minor comment update * Remove the is-style-solid-colour class case in styling the border * Mobile - Update CHANGELOG Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com>
WordPress · Oct 13, 2021 · f6ba963 · f6ba963
1 parent c1ea8d6
commit f6ba963
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 9 deletions.
diff --git a/packages/block-library/src/pullquote/blockquote.native.js b/packages/block-library/src/pullquote/blockquote.native.js
@@ -12,15 +12,25 @@ import { Children, cloneElement } from '@wordpress/element';
 import styles from './blockquote.scss';
 
 export const BlockQuote = ( props ) => {
+	const citationStyle = { ...styles.citation };
+	const quoteStyle = { ...styles.quote };
+
+	if ( props.textColor ) {
+		quoteStyle.color = props.textColor;
+		quoteStyle.placeholderColor = props.textColor;
+		citationStyle.color = props.textColor;
+		citationStyle.placeholderColor = props.textColor;
+	}
+
 	const newChildren = Children.map( props.children, ( child ) => {
 		if ( child && child.props.identifier === 'value' ) {
 			return cloneElement( child, {
-				style: styles.quote,
+				style: quoteStyle,
 			} );
 		}
 		if ( child && child.props.identifier === 'citation' ) {
 			return cloneElement( child, {
-				style: styles.citation,
+				style: citationStyle,
 			} );
 		}
 		return child;

diff --git a/packages/block-library/src/pullquote/edit.native.js b/packages/block-library/src/pullquote/edit.native.js
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+	getColorObjectByAttributeValues,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { Figure } from './figure';
+import { BlockQuote } from './blockquote';
+
+const getBackgroundColor = ( { attributes, colors, style } ) => {
+	const { backgroundColor } = attributes;
+
+	const colorProps = getColorClassesAndStyles( attributes );
+	const colorObject = getColorObjectByAttributeValues(
+		colors,
+		backgroundColor
+	);
+
+	return (
+		colorObject?.color ||
+		colorProps.style?.backgroundColor ||
+		colorProps.style?.background ||
+		style?.backgroundColor
+	);
+};
+
+const getTextColor = ( { attributes, colors, style } ) => {
+	const colorProps = getColorClassesAndStyles( attributes );
+	const colorObject = getColorObjectByAttributeValues(
+		colors,
+		attributes.textColor
+	);
+	return (
+		colorObject?.color ||
+		colorProps.style?.color ||
+		style?.color ||
+		style?.baseColors?.color?.text
+	);
+};
+const getBorderColor = ( props ) => {
+	const { wrapperProps } = props;
+	const defaultColor = getTextColor( props );
+
+	return wrapperProps?.style?.borderColor || defaultColor;
+};
+/**
+ * Internal dependencies
+ */
+
+function PullQuoteEdit( props ) {
+	const { attributes, setAttributes, isSelected, insertBlocksAfter } = props;
+	const { textAlign, citation, value } = attributes;
+
+	const blockProps = useBlockProps( {
+		backgroundColor: getBackgroundColor( props ),
+		borderColor: getBorderColor( props ),
+	} );
+
+	const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<Figure { ...blockProps }>
+				<BlockQuote textColor={ getTextColor( props ) }>
+					<RichText
+						identifier="value"
+						multiline
+						value={ value }
+						onChange={ ( nextValue ) =>
+							setAttributes( {
+								value: nextValue,
+							} )
+						}
+						aria-label={ __( 'Pullquote text' ) }
+						placeholder={
+							// translators: placeholder text used for the quote
+							__( 'Add quote' )
+						}
+						textAlign={ textAlign ?? 'center' }
+					/>
+					{ shouldShowCitation && (
+						<RichText
+							identifier="citation"
+							value={ citation }
+							aria-label={ __( 'Pullquote citation text' ) }
+							placeholder={
+								// translators: placeholder text used for the citation
+								__( 'Add citation' )
+							}
+							onChange={ ( nextCitation ) =>
+								setAttributes( {
+									citation: nextCitation,
+								} )
+							}
+							__unstableMobileNoFocusOnMount
+							textAlign={ textAlign ?? 'center' }
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( 'core/paragraph' )
+								)
+							}
+						/>
+					) }
+				</BlockQuote>
+			</Figure>
+		</>
+	);
+}
+
+export default PullQuoteEdit;
diff --git a/packages/block-library/src/pullquote/figure.native.js b/packages/block-library/src/pullquote/figure.native.js
@@ -5,19 +5,29 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './figure.scss';
 
-export const Figure = withPreferredColorScheme( ( props ) => {
-	const { children, getStylesFromColorScheme } = props;
-
-	const wpPullquoteFigure = getStylesFromColorScheme(
+export const Figure = ( { children, backgroundColor, borderColor } ) => {
+	const wpPullquoteFigure = usePreferredColorSchemeStyle(
 		styles.light,
 		styles.dark
 	);
 
-	return <View style={ wpPullquoteFigure }>{ children }</View>;
-} );
+	const customStyles = {};
+	if ( borderColor ) {
+		customStyles.borderTopColor = borderColor;
+		customStyles.borderBottomColor = borderColor;
+	}
+
+	if ( backgroundColor ) {
+		customStyles.backgroundColor = backgroundColor;
+	}
+
+	return (
+		<View style={ [ wpPullquoteFigure, customStyles ] }>{ children }</View>
+	);
+};
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -13,6 +13,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [*] [Embed block] Fix inline preview cut-off when editing URL [#35321]
 -   [*] [Unsupported Block Editor] Fix text selection bug for Android [#34668]
 -   [*] [Embed block] Fix URL not editable after dismissing the edit URL bottom sheet with empty value [#35460]
+-   [**] Pullquote block - Added support for text and background color customization [#34451]
 
 ## 1.63.1
 -   [*] Fixed missing modal backdrop for Android help section [#35557]