[RNMobile] Update native BlockOutline component styles (#51222)

* Remove BlockOutline * Remove outline from post title * Update PostTitle padding * Reduce vertical margin for native blocks * Reimplement BlockOutline component * Remove solid border styles from BlockOutline * Reimplement dashed border styles * Update CHANGELOG * Update Editor Media Blocks E2E test * Update BlockOutline to remove unused view, it also remvoves uneeded props * Update paddings/margins for the Post Title and default placeholder block * Remove BlockOutline component * Column - Update selected placeholder --------- Co-authored-by: Gerardo <gerardo.pacheco@automattic.com>
WordPress · Jul 7, 2023 · 5b61016 · 5b61016
1 parent b4daf92
commit 5b61016
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 178 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-outline.native.js b/packages/block-editor/src/components/block-list/block-outline.native.js
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Pressable, useWindowDimensions, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,6 @@ import { compose, ifCondition, pure } from '@wordpress/compose';
 import BlockEdit from '../block-edit';
 import BlockDraggable from '../block-draggable';
 import BlockInvalidWarning from './block-invalid-warning';
-import BlockOutline from './block-outline';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import useSetting from '../use-setting';
@@ -65,14 +64,12 @@ function BlockWrapper( {
 	draggingClientId,
 	draggingEnabled,
 	isDescendentBlockSelected,
-	isParentSelected,
 	isSelected,
 	isTouchable,
 	marginHorizontal,
 	marginVertical,
 	onFocus,
 } ) {
-	const { width: screenWidth } = useWindowDimensions();
 	const blockWrapperStyles = { flex: 1 };
 	const blockWrapperStyle = [
 		blockWrapperStyles,
@@ -92,11 +89,6 @@ function BlockWrapper( {
 			onPress={ onFocus }
 			style={ blockWrapperStyle }
 		>
-			<BlockOutline
-				isSelected={ isSelected }
-				isParentSelected={ isParentSelected }
-				screenWidth={ screenWidth }
-			/>
 			<BlockDraggable
 				clientId={ clientId }
 				draggingClientId={ draggingClientId }
@@ -292,7 +284,6 @@ function BlockListBlock( {
 			draggingEnabled={ draggingEnabled }
 			isFocused={ isFocused }
 			isDescendentBlockSelected={ isDescendentBlockSelected }
-			isParentSelected={ isParentSelected }
 			isSelected={ isSelected }
 			isStackedHorizontally={ isStackedHorizontally }
 			isTouchable={ isTouchable }

diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
@@ -2,32 +2,6 @@
 	flex: 1 1 auto;
 }
 
-.solidBorderColor {
-	border-color: $blue-wordpress;
-}
-
-.solidBorderColorDark {
-	border-color: $blue-30;
-}
-
-.dashedBorderColor {
-	border-color: $gray;
-}
-
-.dashedBorderColorDark {
-	border-color: $gray-70;
-}
-
-.borderFullWidth {
-	left: 0;
-	right: 0;
-}
-
-.containerBorderFullWidth {
-	left: -$solid-border-space * 0.5;
-	right: -$solid-border-space * 0.5;
-}
-
 .dimmed {
 	opacity: $dimmed-opacity;
 }
@@ -51,29 +25,6 @@
 	min-height: 50px;
 }
 
-.solidBorder {
-	position: absolute;
-	top: -$solid-border-space;
-	bottom: -$solid-border-space;
-	left: -$solid-border-space;
-	right: -$solid-border-space;
-	border-width: $block-selected-border-width;
-	border-radius: 4px;
-	border-style: solid;
-	z-index: 1;
-}
-
-.dashedBorder {
-	position: absolute;
-	top: -$dashed-border-space;
-	bottom: -$dashed-border-space;
-	left: -$dashed-border-space;
-	right: -$dashed-border-space;
-	border-width: $block-selected-border-width;
-	border-radius: 2px;
-	border-style: dashed;
-}
-
 .fullWidthPadding {
 	padding: $block-selected-to-content;
 }
diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
@@ -66,12 +66,12 @@
 }
 
 .defaultBlock {
-	margin: $block-edge-to-content;
+	margin: $block-edge-to-content * 0.5 $block-edge-to-content;
 }
 
 .defaultAppender {
-	margin-top: $block-edge-to-content;
-	margin-bottom: $block-edge-to-content;
+	margin-top: $grid-unit;
+	margin-bottom: $grid-unit;
 	width: 100%;
 }
 

diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
@@ -42,7 +42,6 @@ function ColumnEdit( {
 	hasChildren,
 	isSelected,
 	getStylesFromColorScheme,
-	isParentSelected,
 	contentStyle,
 	columns,
 	selectedColumnIndex,
@@ -140,12 +139,10 @@ function ColumnEdit( {
 		return (
 			<View
 				style={ [
-					! isParentSelected &&
-						getStylesFromColorScheme(
-							styles.columnPlaceholder,
-							styles.columnPlaceholderDark
-						),
-					styles.columnPlaceholderNotSelected,
+					getStylesFromColorScheme(
+						styles.columnPlaceholder,
+						styles.columnPlaceholderDark
+					),
 					contentStyle[ clientId ],
 				] }
 			/>
@@ -258,8 +255,6 @@ export default compose( [
 
 		const parentId = getBlockRootClientId( clientId );
 		const hasChildren = !! getBlockCount( clientId );
-		const isParentSelected =
-			selectedBlockClientId && selectedBlockClientId === parentId;
 
 		const blockOrder = getBlockOrder( parentId );
 
@@ -271,7 +266,6 @@ export default compose( [
 
 		return {
 			hasChildren,
-			isParentSelected,
 			isSelected,
 			selectedColumnIndex,
 			columns,

diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss
@@ -1,7 +1,3 @@
-.columnPlaceholderNotSelected {
-	padding-top: $block-selected-to-content;
-}
-
 .columnPlaceholder {
 	flex: 1;
 	padding: $block-selected-to-content;

diff --git a/packages/edit-post/src/components/visual-editor/header.native.js b/packages/edit-post/src/components/visual-editor/header.native.js
@@ -16,32 +16,16 @@ import {
 	useEditorWrapperStyles,
 } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
 const Header = memo(
-	function EditorHeader( {
-		editTitle,
-		setTitleRef,
-		title,
-		getStylesFromColorScheme,
-	} ) {
+	function EditorHeader( { editTitle, setTitleRef, title } ) {
 		const [ wrapperStyles ] = useEditorWrapperStyles();
-		const blockHolderFocusedStyle = getStylesFromColorScheme(
-			styles.blockHolderFocused,
-			styles.blockHolderFocusedDark
-		);
 		return (
 			<View style={ wrapperStyles }>
 				<PostTitle
 					innerRef={ setTitleRef }
 					title={ title }
 					onUpdate={ editTitle }
 					placeholder={ __( 'Add title' ) }
-					borderStyle={ styles.blockHolderFullBordered }
-					focusedBorderColor={ blockHolderFocusedStyle.borderColor }
 					accessibilityLabel="post-title"
 				/>
 			</View>

diff --git a/packages/edit-post/src/components/visual-editor/style.native.scss b/packages/edit-post/src/components/visual-editor/style.native.scss
diff --git a/packages/editor/src/components/post-title/style.native.scss b/packages/editor/src/components/post-title/style.native.scss
@@ -1,10 +1,10 @@
 
 .titleContainer {
-	padding-left: 12;
-	padding-right: 16;
-	padding-top: 12;
-	padding-bottom: 12;
-	margin-top: 24;
+	padding-left: $block-edge-to-content;
+	padding-right: $block-edge-to-content;
+	padding-top: 6;
+	padding-bottom: 6;
+	margin-top: 12;
 }
 
 .dimmed {

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -10,11 +10,12 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [**] Add media inserter buttons to editor toolbar [#51827]
+-   [**] Update native BlockOutline component styles to remove blue border from blocks [#51222]
 
 ## 1.99.0
 -   [*] Rename "Reusable blocks" to "Synced patterns", aligning with the web editor. [#51704]
 -   [**] Fix a crash related to Reanimated when closing the editor [#52320]
--   [**] Add media inserter buttons to editor toolbar [#51827]
 
 ## 1.98.1
 -   [*] fix: Display heading level dropdown icons and labels [#52004]

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
@@ -125,9 +125,9 @@ onlyOniOS( 'Gutenberg Editor Cover Block test', () => {
 
 		const { height } = await coverBlock.getSize();
 		// Height is set to 20rem, where 1rem is 16.
-		// There is also block's vertical padding equal 32.
-		// Finally, the total height should be 20 * 16 + 32 = 352.
-		expect( height ).toBe( 352 );
+		// There is also block's vertical padding equal 16.
+		// Finally, the total height should be 20 * 16 + 16 = 336.
+		expect( height ).toBe( 336 );
 
 		await coverBlock.click();
 		expect( coverBlock ).toBeTruthy();