Check previewId aka deviceType directly in child component

WordPress · May 24, 2021 · d7c329e · d7c329e
1 parent 5a93322
commit d7c329e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -85,7 +85,6 @@ function Layout( { styles } ) {
 		showIconLabels,
 		hasReducedUI,
 		showBlockBreadcrumbs,
-		previewId,
 	} = useSelect( ( select ) => {
 		const editorSettings = select( editorStore ).getEditorSettings();
 		return {
@@ -122,9 +121,6 @@ function Layout( { styles } ) {
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
 			),
-			previewId: select(
-				editPostStore
-			).__experimentalGetPreviewDeviceType(),
 		};
 	}, [] );
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
@@ -229,10 +225,7 @@ function Layout( { styles } ) {
 							<TextEditor />
 						) }
 						{ isRichEditingEnabled && mode === 'visual' && (
-							<VisualEditorOrPluginPreview
-								styles={ styles }
-								previewId={ previewId }
-							/>
+							<VisualEditorOrPluginPreview styles={ styles } />
 						) }
 						<div className="edit-post-layout__metaboxes">
 							<MetaBoxes location="normal" />

diff --git a/packages/edit-post/src/components/visual-editor/visual-editor-or-plugin-preview.js b/packages/edit-post/src/components/visual-editor/visual-editor-or-plugin-preview.js
@@ -2,26 +2,32 @@
  * WordPress dependencies
  */
 import { __experimentalUseSlot as useSlot, Slot } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import VisualEditor from './index';
+import { store as editPostStore } from '../../store';
 
 /**
  * Component that renders a preview slot fill if found or a VisualEditor instead.
  *
- * @param {Object} props           Component properties.
- * @param {string} props.previewId The internal name of this custom preview.
+ * @param {Object} props Component properties.
  */
-function VisualEditorOrPluginPreview( { previewId, ...props } ) {
+function VisualEditorOrPluginPreview( props ) {
+	const previewId = useSelect(
+		( select ) =>
+			select( editPostStore ).__experimentalGetPreviewDeviceType(),
+		[]
+	);
 	const slotName = `core/block-editor/plugin-preview/${ previewId }`;
 	const slot = useSlot( slotName );
 
-	if ( slot?.fills?.length === 0 ) {
-		return <VisualEditor { ...props } />;
+	if ( slot?.fills?.length > 0 ) {
+		return <Slot name={ slotName } fillProps={ props } />;
 	}
 
-	return <Slot name={ slotName } fillProps={ props } />;
+	return <VisualEditor { ...props } />;
 }
 export default VisualEditorOrPluginPreview;