Edit Post: Collapse FocusReturnProvider to handle className applicati…

…on to div
WordPress · Mar 15, 2019 · 13c7ae3 · 13c7ae3
1 parent 5586d29
commit 13c7ae3
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 62 deletions.
diff --git a/packages/components/src/higher-order/with-focus-return/context.js b/packages/components/src/higher-order/with-focus-return/context.js
@@ -40,10 +40,12 @@ class FocusReturnProvider extends Component {
 	}
 
 	render() {
+		const { children, className } = this.props;
+
 		return (
 			<Provider value={ this.state }>
-				<div onFocus={ this.onFocus }>
-					{ this.props.children }
+				<div onFocus={ this.onFocus } className={ className }>
+					{ children }
 				</div>
 			</Provider>
 		);

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -72,68 +72,66 @@ function Layout( {
 		tabIndex: -1,
 	};
 	return (
-		<FocusReturnProvider>
-			<div className={ className }>
-				<FullscreenMode />
-				<BrowserURL />
-				<UnsavedChangesWarning />
-				<AutosaveMonitor />
-				<Header />
-				<div
-					className="edit-post-layout__content"
-					role="region"
-					/* translators: accessibility text for the content landmark region. */
-					aria-label={ __( 'Editor content' ) }
-					tabIndex="-1"
-				>
-					<EditorNotices dismissible={ false } className="is-pinned" />
-					<EditorNotices dismissible={ true } />
-					<PreserveScrollInReorder />
-					<EditorModeKeyboardShortcuts />
-					<KeyboardShortcutHelpModal />
-					<ManageBlocksModal />
-					<OptionsModal />
-					{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
-					{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
-					<div className="edit-post-layout__metaboxes">
-						<MetaBoxes location="normal" />
-					</div>
-					<div className="edit-post-layout__metaboxes">
-						<MetaBoxes location="advanced" />
-					</div>
+		<FocusReturnProvider className={ className }>
+			<FullscreenMode />
+			<BrowserURL />
+			<UnsavedChangesWarning />
+			<AutosaveMonitor />
+			<Header />
+			<div
+				className="edit-post-layout__content"
+				role="region"
+				/* translators: accessibility text for the content landmark region. */
+				aria-label={ __( 'Editor content' ) }
+				tabIndex="-1"
+			>
+				<EditorNotices dismissible={ false } className="is-pinned" />
+				<EditorNotices dismissible={ true } />
+				<PreserveScrollInReorder />
+				<EditorModeKeyboardShortcuts />
+				<KeyboardShortcutHelpModal />
+				<ManageBlocksModal />
+				<OptionsModal />
+				{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
+				{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
+				<div className="edit-post-layout__metaboxes">
+					<MetaBoxes location="normal" />
+				</div>
+				<div className="edit-post-layout__metaboxes">
+					<MetaBoxes location="advanced" />
 				</div>
-				{ publishSidebarOpened ? (
-					<PostPublishPanel
-						{ ...publishLandmarkProps }
-						onClose={ closePublishSidebar }
-						forceIsDirty={ hasActiveMetaboxes }
-						forceIsSaving={ isSaving }
-						PrePublishExtension={ PluginPrePublishPanel.Slot }
-						PostPublishExtension={ PluginPostPublishPanel.Slot }
-					/>
-				) : (
-					<Fragment>
-						<div className="edit-post-toggle-publish-panel" { ...publishLandmarkProps }>
-							<Button
-								isDefault
-								type="button"
-								className="edit-post-toggle-publish-panel__button"
-								onClick={ togglePublishSidebar }
-								aria-expanded={ false }
-							>
-								{ __( 'Open publish panel' ) }
-							</Button>
-						</div>
-						<SettingsSidebar />
-						<Sidebar.Slot />
-						{
-							isMobileViewport && sidebarIsOpened && <ScrollLock />
-						}
-					</Fragment>
-				) }
-				<Popover.Slot />
-				<PluginArea />
 			</div>
+			{ publishSidebarOpened ? (
+				<PostPublishPanel
+					{ ...publishLandmarkProps }
+					onClose={ closePublishSidebar }
+					forceIsDirty={ hasActiveMetaboxes }
+					forceIsSaving={ isSaving }
+					PrePublishExtension={ PluginPrePublishPanel.Slot }
+					PostPublishExtension={ PluginPostPublishPanel.Slot }
+				/>
+			) : (
+				<Fragment>
+					<div className="edit-post-toggle-publish-panel" { ...publishLandmarkProps }>
+						<Button
+							isDefault
+							type="button"
+							className="edit-post-toggle-publish-panel__button"
+							onClick={ togglePublishSidebar }
+							aria-expanded={ false }
+						>
+							{ __( 'Open publish panel' ) }
+						</Button>
+					</div>
+					<SettingsSidebar />
+					<Sidebar.Slot />
+					{
+						isMobileViewport && sidebarIsOpened && <ScrollLock />
+					}
+				</Fragment>
+			) }
+			<Popover.Slot />
+			<PluginArea />
 		</FocusReturnProvider>
 	);
 }