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 } ); + } } + /> + +
+
+ + setAttributes( { + value: nextValue, + } ) + } + aria-label={ __( 'Pullquote text' ) } + placeholder={ + // translators: placeholder text used for the quote + __( 'Add quote' ) + } + textAlign={ textAlign ?? 'center' } + /> + { shouldShowCitation && ( + + setAttributes( { + citation: nextCitation, + } ) + } + __unstableMobileNoFocusOnMount + textAlign={ textAlign ?? 'center' } + __unstableOnSplitAtEnd={ () => + insertBlocksAfter( + createBlock( 'core/paragraph' ) + ) + } + /> + ) } +
+
+ + ); +} + +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]