diff --git a/packages/block-library/src/pullquote/blockquote.native.js b/packages/block-library/src/pullquote/blockquote.native.js
index 36bfa0c582eef7..5f92f625f2323c 100644
--- 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
new file mode 100644
index 00000000000000..78d99775d87680
--- /dev/null
+++ 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 (
+ <>
+
+ {
+ setAttributes( { textAlign: nextAlign } );
+ } }
+ />
+
+
+ >
+ );
+}
+
+export default PullQuoteEdit;
diff --git a/packages/block-library/src/pullquote/figure.native.js b/packages/block-library/src/pullquote/figure.native.js
index 57323c46ab6aec..c95e188cd3c39c 100644
--- 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 { children };
-} );
+ const customStyles = {};
+ if ( borderColor ) {
+ customStyles.borderTopColor = borderColor;
+ customStyles.borderBottomColor = borderColor;
+ }
+
+ if ( backgroundColor ) {
+ customStyles.backgroundColor = backgroundColor;
+ }
+
+ return (
+ { children }
+ );
+};
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index c71eb720a5bbd9..9b202174ede2dd 100644
--- 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]