Extract separator component out of nextpage block

packages/block-library/src/nextpage/edit.js

@@ -2,11 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Separator } from '@wordpress/components';
 
 export default function NextPageEdit() {
 	return (
-		<div className="wp-block-nextpage">
-			<span>{ __( 'Page break' ) }</span>
-		</div>
+		<Separator customText={ __( 'Page break' ) } />
 	);
 }

packages/block-library/src/nextpage/editor.scss

@@ -1,34 +1,3 @@
 .editor-visual-editor__block[data-type="core/nextpage"] {
 	max-width: 100%;
 }
-
-.wp-block-nextpage {
-	display: block;
-	text-align: center;
-	white-space: nowrap;
-
-	// Label
-	> span {
-		font-size: $default-font-size;
-		position: relative;
-		display: inline-block;
-		text-transform: uppercase;
-		font-weight: 600;
-		font-family: $default-font;
-		color: $dark-gray-300;
-		border-radius: 4px;
-		background: $white;
-		padding: 6px 8px;
-		height: $icon-button-size-small;
-	}
-
-	// Dashed line
-	&::before {
-		content: "";
-		position: absolute;
-		top: calc(50%);
-		left: 0;
-		right: 0;
-		border-top: 3px dashed $light-gray-700;
-	}
-}

packages/components/src/index.js

@@ -51,6 +51,7 @@ export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as SelectControl } from './select-control';
+export { default as Separator } from './separator';
 export { default as Spinner } from './spinner';
 export { default as ServerSideRender } from './server-side-render';
 export { default as TabPanel } from './tab-panel';

packages/components/src/index.native.js

@@ -9,6 +9,7 @@ export { default as Spinner } from './spinner';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 export { default as BaseControl } from './base-control';
 export { default as TextareaControl } from './textarea-control';
+export { default as Separator } from './separator';
 
 // Higher-Order Components
 export { default as withFilters } from './higher-order/with-filters';

packages/components/src/separator/index.js

@@ -0,0 +1,10 @@
+
+export default function Separator( props ) {
+	const { customText } = props;
+
+	return (
+		<div className="components-separator">
+			{ customText && ( <span>{ customText }</span> ) }
+		</div>
+	);
+}

packages/block-library/src/nextpage/edit.native.js → packages/components/src/separator/index.native.js

@@ -4,18 +4,13 @@
 import { View } from 'react-native';
 import Hr from 'react-native-hr';
 
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import styles from './editor.scss';
+import styles from './style.scss';
 
-export default function NextPageEdit( { attributes } ) {
-	const { customText = __( 'Page break' ) } = attributes;
+export default function Separator( props ) {
+	const { customText } = props;
 
 	return (
 		<View style={ styles[ 'block-library-nextpage__container' ] }>

packages/components/src/separator/style.scss

@@ -0,0 +1,30 @@
+.components-separator {
+	display: block;
+	text-align: center;
+	white-space: nowrap;
+
+	// Label
+	> span {
+		font-size: $default-font-size;
+		position: relative;
+		display: inline-block;
+		text-transform: uppercase;
+		font-weight: 600;
+		font-family: $default-font;
+		color: $dark-gray-300;
+		border-radius: 4px;
+		background: $white;
+		padding: 6px 8px;
+		height: $icon-button-size-small;
+	}
+
+	// Dashed line
+	&::before {
+		content: "";
+		position: absolute;
+		top: calc(50%);
+		left: 0;
+		right: 0;
+		border-top: 3px dashed $light-gray-700;
+	}
+}

packages/components/src/style.scss

@@ -35,6 +35,7 @@
 @import "./sandbox/style.scss";
 @import "./scroll-lock/style.scss";
 @import "./select-control/style.scss";
+@import "./separator/style.scss";
 @import "./spinner/style.scss";
 @import "./text-control/style.scss";
 @import "./textarea-control/style.scss";