Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor the layout component to separate the UI from the content. (#…
- Loading branch information
1 parent
d874824
commit 995aa3a
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -312,21 +312,6 @@ | |
| } | ||
| } | ||
|
|
||
| /** | ||
| * Styles that are reused verbatim in a few places | ||
| */ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { navigateRegions } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| function EditorRegions( { footer, header, sidebar, content, publish, className } ) { | ||
| return ( | ||
| <div className={ classnames( className, 'edit-post-editor-regions' ) }> | ||
| { !! header && ( | ||
| <div | ||
| className="edit-post-editor-regions__header" | ||
| role="region" | ||
| /* translators: accessibility text for the top bar landmark region. */ | ||
| aria-label={ __( 'Editor top bar' ) } | ||
| tabIndex="-1" | ||
| > | ||
| { header } | ||
| </div> | ||
| ) } | ||
| <div className="edit-post-editor-regions__body"> | ||
| <div | ||
| className="edit-post-editor-regions__content" | ||
| role="region" | ||
| /* translators: accessibility text for the content landmark region. */ | ||
| aria-label={ __( 'Editor content' ) } | ||
| tabIndex="-1" | ||
| > | ||
| { content } | ||
| </div> | ||
| { !! publish && ( | ||
| <div | ||
| className="edit-post-editor-regions__publish" | ||
| role="region" | ||
| /* translators: accessibility text for the publish landmark region. */ | ||
| aria-label={ __( 'Editor publish' ) } | ||
| tabIndex="-1" | ||
| > | ||
| { publish } | ||
| </div> | ||
| ) } | ||
| { !! sidebar && ( | ||
| <div | ||
| className="edit-post-editor-regions__sidebar" | ||
| role="region" | ||
| aria-label={ 'Editor settings' } | ||
| tabIndex="-1" | ||
| > | ||
| { sidebar } | ||
| </div> | ||
| ) } | ||
| </div> | ||
| { !! footer && ( | ||
| <div | ||
| className="edit-post-editor-regions__footer" | ||
| role="region" | ||
| aria-label={ 'Editor footer' } | ||
| tabIndex="-1" | ||
| > | ||
| { footer } | ||
| </div> | ||
| ) } | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default navigateRegions( EditorRegions ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| .edit-post-editor-regions { | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100%; | ||
| max-height: 100%; | ||
| position: relative; | ||
|
|
||
| // On Mobile keep a margin for the header and admin header | ||
| // as both of these are fixed | ||
| top: 0; | ||
| @include break-medium() { | ||
| margin-top: 0; | ||
|
|
||
| // On Desktop position the container as fixed to avoid scroll bleed. | ||
| position: fixed; | ||
| top: $admin-bar-height; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| height: auto; | ||
| .is-fullscreen-mode & { | ||
| top: 0; | ||
| } | ||
| } | ||
| } | ||
| @include editor-left(".edit-post-editor-regions"); | ||
|
|
||
| .edit-post-editor-regions__body { | ||
| flex-grow: 1; | ||
| display: flex; | ||
|
|
||
| // On Mobile the header is fixed to keep HTML as scrollable. | ||
| @include break-medium() { | ||
| overflow: auto; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__content { | ||
| flex-grow: 1; | ||
|
|
||
| // On Mobile the header is fixed to keep HTML as scrollable. | ||
| @include break-medium() { | ||
| overflow: auto; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__sidebar { | ||
| width: auto; // Keep the sidebar width flexible. | ||
| flex-shrink: 0; | ||
| position: fixed !important; // Need to override the default relative positionning | ||
| z-index: z-index(".edit-post-editor-regions__sidebar"); | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| background: $white; | ||
|
|
||
| &:empty { | ||
| display: none; | ||
| } | ||
|
|
||
| // On Mobile the header is fixed to keep HTML as scrollable. | ||
| @include break-medium() { | ||
| overflow: auto; | ||
| border-left: $border-width solid $light-gray-500; | ||
| position: relative !important; | ||
| z-index: z-index(".edit-post-editor-regions__sidebar {greater than small}"); | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__header { | ||
| flex-shrink: 0; | ||
| height: auto; // Keep the height flexible. | ||
| border-bottom: $border-width solid $light-gray-500; | ||
| z-index: z-index(".edit-post-editor-regions__header"); | ||
|
|
||
| // On Mobile the header is sticky. | ||
| position: sticky; | ||
| top: 0; | ||
|
|
||
| @include break-small() { | ||
| top: $admin-bar-height-big; // The top bar is fixed on this breakpoint. | ||
| } | ||
|
|
||
| @include break-medium() { | ||
| // Cancel the fixed positionning used in mobile. | ||
| position: initial; | ||
| top: 0; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__footer { | ||
| height: auto; // Keep the height flexible. | ||
| flex-shrink: 0; | ||
| overflow: auto; | ||
| border-top: $border-width solid $light-gray-500; | ||
|
|
||
| // On Mobile the footer is hidden | ||
| display: none; | ||
| @include break-medium() { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__publish { | ||
| z-index: z-index(".edit-post-editor-regions__publish"); | ||
| position: fixed !important; // Need to override the default relative positionning | ||
| top: -9999em; | ||
| bottom: auto; | ||
| left: auto; | ||
| right: 0; | ||
| width: $sidebar-width; | ||
|
|
||
| &:focus { | ||
| top: auto; | ||
| bottom: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
These changes weren't unfortunately mentioned in the package's Changelog and would potentially break consuming projects 😅