[Mobile] - Quote block V2 support (#40133)

* Mobile - Update Quote block to support V2 * Mobile - React Native editor tests - Update to pick the first main block list wrapper * Mobile - Add Quote block V2 experimental flag * Mobile - React native editor test - Revert block list change, this will be needed once the quote block v2 is enabled by default * Mobile - Block library - registerCoreBlocks - Make param optional * Mobile - Edit post test - Update beforeAll call * Mobile - BlockQuotation - Restore removed code
WordPress · Apr 13, 2022 · 2fee6a6 · 2fee6a6
1 parent 32bb60d
commit 2fee6a6
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 16 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
@@ -47,6 +47,7 @@ function BlockForType( {
 	onDeleteBlock,
 	onReplace,
 	parentWidth,
+	parentBlockAlignment,
 	wrapperProps,
 	blockWidth,
 	baseGlobalStyles,
@@ -95,6 +96,7 @@ function BlockForType( {
 				contentStyle={ contentStyle }
 				onDeleteBlock={ onDeleteBlock }
 				blockWidth={ blockWidth }
+				parentBlockAlignment={ parentBlockAlignment }
 			/>
 			<View onLayout={ getBlockWidth } />
 		</GlobalStylesContext.Provider>

diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
@@ -179,6 +179,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
+// To be removed once Quote V2 is released on the web editor.
+function quoteCheck( quoteBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableQuoteBlockV2 ) {
+		quoteBlock.settings = quoteBlock?.settingsV2;
+	}
+	return quoteBlock;
+}
+
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -230,8 +238,10 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
+ * @param {Object} [blocksFlags] Experimental flags
+ *
  */
-export const registerCoreBlocks = () => {
+export const registerCoreBlocks = ( blocksFlags ) => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -244,7 +254,7 @@ export const registerCoreBlocks = () => {
 		nextpage,
 		separator,
 		list,
-		quote,
+		quoteCheck( quote, blocksFlags ),
 		mediaText,
 		preformatted,
 		gallery,

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
@@ -14,13 +14,16 @@ import { useSelect } from '@wordpress/data';
 
 const name = 'core/paragraph';
 
+const allowedParentBlockAlignments = [ 'left', 'center', 'right' ];
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
 	onReplace,
 	setAttributes,
 	style,
 	clientId,
+	parentBlockAlignment,
 } ) {
 	const isRTL = useSelect( ( select ) => {
 		return !! select( blockEditorStore ).getSettings().isRTL;
@@ -40,6 +43,15 @@ function ParagraphBlock( {
 	const onAlignmentChange = useCallback( ( nextAlign ) => {
 		setAttributes( { align: nextAlign } );
 	}, [] );
+
+	const parentTextAlignment = allowedParentBlockAlignments.includes(
+		parentBlockAlignment
+	)
+		? parentBlockAlignment
+		: undefined;
+
+	const textAlignment = align || parentTextAlignment;
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -82,7 +94,7 @@ function ParagraphBlock( {
 				onReplace={ onReplace }
 				onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 				placeholder={ placeholder || __( 'Start writing…' ) }
-				textAlign={ align }
+				textAlign={ textAlignment }
 				__unstableEmbedURLOnPaste
 			/>
 		</>

diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
@@ -16,7 +16,7 @@ import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name };
+export { metadata, name, settingsV2 };
 
 export const settingsV1 = {
 	icon,

diff --git a/packages/block-library/src/quote/v2/edit.js b/packages/block-library/src/quote/v2/edit.js
@@ -74,6 +74,7 @@ export default function QuoteEdit( {
 	insertBlocksAfter,
 	clientId,
 	className,
+	style,
 } ) {
 	const { citation, align } = attributes;
 
@@ -88,6 +89,7 @@ export default function QuoteEdit( {
 		className: classNames( className, {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
+		...( ! isWebPlatform && { style } ),
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -128,6 +130,7 @@ export default function QuoteEdit( {
 						__unstableOnSplitAtEnd={ () =>
 							insertBlocksAfter( createBlock( 'core/paragraph' ) )
 						}
+						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
 					/>
 				) }
 			</BlockQuotation>

diff --git a/packages/edit-post/src/test/editor.native.js b/packages/edit-post/src/test/editor.native.js
@@ -28,7 +28,9 @@ const unsupportedBlock = `
 jest.useFakeTimers( 'legacy' );
 
 describe( 'Editor', () => {
-	beforeAll( registerCoreBlocks );
+	beforeAll( () => {
+		registerCoreBlocks();
+	} );
 
 	it( 'detects unsupported block and sends hasUnsupportedBlocks true to native', () => {
 		RNReactNativeGutenbergBridge.editorDidMount = jest.fn();

diff --git a/packages/primitives/src/block-quotation/index.native.js b/packages/primitives/src/block-quotation/index.native.js
@@ -5,24 +5,26 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Children, cloneElement } from '@wordpress/element';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { Children, cloneElement, forwardRef } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-export const BlockQuotation = withPreferredColorScheme( ( props ) => {
-	const { getStylesFromColorScheme, style } = props;
+export const BlockQuotation = forwardRef( ( { ...props }, ref ) => {
+	const { style } = props;
 
 	const blockQuoteStyle = [
-		getStylesFromColorScheme(
+		usePreferredColorSchemeStyle(
 			styles.wpBlockQuoteLight,
 			styles.wpBlockQuoteDark
 		),
 		style?.color && {
 			borderLeftColor: style.color,
 		},
+		style,
+		style?.backgroundColor && styles.paddingWithBackground,
 	];
 	const colorStyle = style?.color ? { color: style.color } : {};
 
@@ -43,5 +45,9 @@ export const BlockQuotation = withPreferredColorScheme( ( props ) => {
 		}
 		return child;
 	} );
-	return <View style={ blockQuoteStyle }>{ newChildren }</View>;
+	return (
+		<View ref={ ref } style={ blockQuoteStyle }>
+			{ newChildren }
+		</View>
+	);
 } );
diff --git a/packages/primitives/src/block-quotation/style.native.scss b/packages/primitives/src/block-quotation/style.native.scss
@@ -1,7 +1,8 @@
 %wpBlockQuote-shared {
 	border-left-width: 4px;
 	border-left-style: solid;
-	padding-left: 8px;
+	padding-left: $block-edge-to-content;
+	padding-top: $dashed-border-space;
 	margin-left: 0;
 }
 
@@ -19,3 +20,7 @@
 	margin-top: 16px;
 	font-size: 14px;
 }
+
+.paddingWithBackground {
+	padding-top: $block-edge-to-content - $block-selected-margin;
+}
diff --git a/...id/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/...id/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
@@ -50,6 +50,8 @@ data class GutenbergProps @JvmOverloads constructor(
                     ?.let { putSerializable(PROP_IS_FSE_THEME, it) }
             theme.getSerializable(PROP_GALLERY_WITH_IMAGE_BLOCKS)
                     ?.let { putSerializable(PROP_GALLERY_WITH_IMAGE_BLOCKS, it) }
+            theme.getSerializable(PROP_QUOTE_BLOCK_V2)
+                    ?.let { putSerializable(PROP_QUOTE_BLOCK_V2, it) }
         }
     }
 
@@ -90,6 +92,7 @@ data class GutenbergProps @JvmOverloads constructor(
         private const val PROP_FEATURES = "rawFeatures"
         private const val PROP_IS_FSE_THEME = "isFSETheme"
         private const val PROP_GALLERY_WITH_IMAGE_BLOCKS = "galleryWithImageBlocks"
+        private const val PROP_QUOTE_BLOCK_V2 = "quoteBlockV2"
 
         const val PROP_LOCALE = "locale"
         const val PROP_CAPABILITIES = "capabilities"

diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift
@@ -204,6 +204,10 @@ public class Gutenberg: UIResponder {
             settingsUpdates["galleryWithImageBlocks"] = galleryWithImageBlocks
         }
 
+        if let quoteBlockV2 = editorSettings?.quoteBlockV2 {
+            settingsUpdates["quoteBlockV2"] = quoteBlockV2
+        }
+
         if let rawStyles = editorSettings?.rawStyles {
             settingsUpdates["rawStyles"] = rawStyles
         }

diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
@@ -78,6 +78,7 @@ public extension GutenbergBridgeDataSource {
 public protocol GutenbergEditorSettings {
     var isFSETheme: Bool { get }
     var galleryWithImageBlocks: Bool { get }
+    var quoteBlockV2: Bool { get }
     var rawStyles: String? { get }
     var rawFeatures: String? { get }
     var colors: [[String: String]]? { get }

diff --git a/packages/react-native-editor/src/setup.js b/packages/react-native-editor/src/setup.js
@@ -58,9 +58,13 @@ const gutenbergSetup = () => {
 
 const setupInitHooks = () => {
 	addAction( 'native.pre-render', 'core/react-native-editor', ( props ) => {
-		registerBlocks();
-
 		const capabilities = props.capabilities ?? {};
+		const blocksFlags = {
+			__experimentalEnableQuoteBlockV2: props?.quoteBlockV2,
+		};
+
+		registerBlocks( blocksFlags );
+
 		// Unregister non-supported blocks by capabilities
 		if (
 			getBlockType( 'core/block' ) !== undefined &&
@@ -115,12 +119,12 @@ const setupInitHooks = () => {
 };
 
 let blocksRegistered = false;
-const registerBlocks = () => {
+const registerBlocks = ( blocksFlags ) => {
 	if ( blocksRegistered ) {
 		return;
 	}
 
-	registerCoreBlocks();
+	registerCoreBlocks( blocksFlags );
 
 	blocksRegistered = true;
 };