-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
78b3925
commit 80c0eac
Showing
16 changed files
with
290 additions
and
337 deletions.
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
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
2 changes: 2 additions & 0 deletions
2
packages/components/src/higher-order/navigate-regions/style.scss
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 ); |
97 changes: 97 additions & 0 deletions
97
packages/edit-post/src/components/editor-regions/style.scss
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,97 @@ | ||
| .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-small() { | ||
| margin-top: 0; | ||
|
|
||
| // On Desktop position the container as fixed to avoid scroll bleed. | ||
| position: fixed; | ||
| top: $admin-bar-height-big; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| height: auto; | ||
| } | ||
|
|
||
| @include break-medium() { | ||
| top: $admin-bar-height; | ||
| } | ||
| } | ||
| @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-small() { | ||
| overflow: auto; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__content { | ||
| flex-grow: 1; | ||
|
|
||
| // On Mobile the header is fixed to keep HTML as scrollable. | ||
| @include break-small() { | ||
| overflow: auto; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__sidebar { | ||
| width: auto; // Keep the sidebar width flexible. | ||
| flex-shrink: 0; | ||
|
|
||
| // On Mobile the header is fixed to keep HTML as scrollable. | ||
| @include break-small() { | ||
| overflow: auto; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__header { | ||
| flex-shrink: 0; | ||
| height: auto; // Keep the height flexible. | ||
|
|
||
| // On Mobile the header is sticky. | ||
| position: sticky; | ||
| top: 0; | ||
| @include break-small() { | ||
| // Cancel the fixed positionning used in mobile. | ||
| position: initial; | ||
| overflow: auto; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-editor-regions__footer { | ||
| height: auto; // Keep the height flexible. | ||
| flex-shrink: 0; | ||
| overflow: auto; | ||
|
|
||
| // On Mobile the footer is hidden | ||
| display: none; | ||
| @include break-small() { | ||
| 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
Oops, something went wrong.