diff --git a/packages/block-editor/src/components/block-list-appender/index.native.js b/packages/block-editor/src/components/block-list-appender/index.native.js
index 6d8fb4e6cee97..2a77fe797d132 100644
--- a/packages/block-editor/src/components/block-list-appender/index.native.js
+++ b/packages/block-editor/src/components/block-list-appender/index.native.js
@@ -21,6 +21,7 @@ function BlockListAppender( {
canInsertDefaultBlock,
isLocked,
renderAppender: CustomAppender,
+ showSeparator,
} ) {
if ( isLocked ) {
return null;
@@ -28,7 +29,7 @@ function BlockListAppender( {
if ( CustomAppender ) {
return (
-
+
);
}
@@ -39,6 +40,7 @@ function BlockListAppender( {
lastBlockClientId={ last( blockClientIds ) }
containerStyle={ styles.blockListAppender }
placeholder={ blockClientIds.length > 0 ? '' : null }
+ showSeparator={ showSeparator }
/>
);
}
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 267d214e3eccc..971b5429c4b86 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -2,13 +2,12 @@
* External dependencies
*/
import { identity } from 'lodash';
-import { Text, View, Platform, TouchableWithoutFeedback } from 'react-native';
+import { View, Platform, TouchableWithoutFeedback } from 'react-native';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
@@ -20,6 +19,7 @@ import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/component
import styles from './style.scss';
import BlockListBlock from './block';
import BlockListAppender from '../block-list-appender';
+import BlockInsertionPoint from './insertion-point';
import __experimentalBlockListFooter from '../block-list-footer';
const innerToolbarHeight = 44;
@@ -29,7 +29,6 @@ export class BlockList extends Component {
super( ...arguments );
this.renderItem = this.renderItem.bind( this );
- this.renderAddBlockSeparator = this.renderAddBlockSeparator.bind( this );
this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
this.renderDefaultBlockAppender = this.renderDefaultBlockAppender.bind( this );
this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind( this );
@@ -59,13 +58,11 @@ export class BlockList extends Component {
const willShowInsertionPoint = shouldShowInsertionPointBefore(); // call without the client_id argument since this is the appender
return (
- { willShowInsertionPoint ?
- this.renderAddBlockSeparator() : // show the new-block indicator when we're inserting a block or
-
- }
+
);
}
@@ -131,7 +128,7 @@ export class BlockList extends Component {
const { shouldShowBlockAtIndex, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter } = this.props;
return (
- { shouldShowInsertionPointBefore( clientId ) && this.renderAddBlockSeparator() }
+ { shouldShowInsertionPointBefore( clientId ) && }
{ shouldShowBlockAtIndex( index ) && (
) }
- { shouldShowInsertionPointAfter( clientId ) && this.renderAddBlockSeparator() }
+ { shouldShowInsertionPointAfter( clientId ) && }
);
}
- renderAddBlockSeparator() {
- const lineStyle = this.props.getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
- const labelStyle = this.props.getStylesFromColorScheme( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
- return (
-
-
- { __( 'ADD BLOCK HERE' ) }
-
-
- );
- }
-
renderBlockListFooter() {
const paragraphBlock = createBlock( 'core/paragraph' );
return (
diff --git a/packages/block-editor/src/components/block-list/insertion-point.native.js b/packages/block-editor/src/components/block-list/insertion-point.native.js
index d6caa88f407fb..a9a2741514783 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.native.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.native.js
@@ -7,40 +7,24 @@ import { Text, View } from 'react-native';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import styles from './style.scss';
-const BlockInsertionPoint = ( { showInsertionPoint } ) => {
- if ( ! showInsertionPoint ) {
- return null;
- }
+const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
+ const lineStyle = getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
+ const labelStyle = getStylesFromColorScheme( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
return (
-
- { __( 'ADD BLOCK HERE' ) }
-
+
+ { __( 'ADD BLOCK HERE' ) }
+
);
};
-export default withSelect( ( select, { clientId, rootClientId } ) => {
- const {
- getBlockIndex,
- getBlockInsertionPoint,
- isBlockInsertionPointVisible,
- } = select( 'core/block-editor' );
- const blockIndex = getBlockIndex( clientId, rootClientId );
- const insertionPoint = getBlockInsertionPoint();
- const showInsertionPoint = (
- isBlockInsertionPointVisible() &&
- insertionPoint.index === blockIndex &&
- insertionPoint.rootClientId === rootClientId
- );
-
- return { showInsertionPoint };
-} )( BlockInsertionPoint );
+export default withPreferredColorScheme( BlockInsertionPoint );
diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js
index 5792097acc606..2a3f6ef2ea9fb 100644
--- a/packages/block-editor/src/components/button-block-appender/index.native.js
+++ b/packages/block-editor/src/components/button-block-appender/index.native.js
@@ -15,7 +15,7 @@ import { Button, Dashicon } from '@wordpress/components';
import Inserter from '../inserter';
import styles from './styles.scss';
-function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme } ) {
+function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme, showSeparator } ) {
const appenderStyle = { ...styles.appender, ...getStylesFromColorScheme( styles.appenderLight, styles.appenderDark ) };
const addBlockButtonStyle = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
@@ -41,6 +41,7 @@ function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme } ) {
) }
isAppender
+ showSeparator={ showSeparator }
/>
>
);
diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index af4f355e861ef..6e26bb0856b5a 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -4,9 +4,9 @@
import BaseButtonBlockAppender from '../button-block-appender';
import withClientId from './with-client-id';
-export const ButtonBlockAppender = ( { clientId } ) => {
+export const ButtonBlockAppender = ( { clientId, showSeparator } ) => {
return (
-
+
);
};
diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
index b898c747426bc..8f66f5458f229 100644
--- a/packages/block-editor/src/components/inserter/index.native.js
+++ b/packages/block-editor/src/components/inserter/index.native.js
@@ -13,6 +13,7 @@ import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
*/
import styles from './style.scss';
import InserterMenu from './menu';
+import BlockInsertionPoint from '../block-list/insertion-point';
const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
;
+ }
const style = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
return renderToggle( { onToggle, isOpen, disabled, style } );
}