Skip to content

Commit

Permalink
Fix the Publish region position and focus style.
Browse files Browse the repository at this point in the history
  • Loading branch information
afercia committed Feb 15, 2023
1 parent 4a6ffee commit dbc55f4
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@
// visible. For the future, it's important to take into consideration that
// the navigable regions should always have a computed size. For now, we can
// fix some edge cases but these CSS rules should be later removed in favor of
// a more abstracted approach to make the navigabel regions focus style work
// a more abstracted approach to make the navigable regions focus style work
// regardles of the CSS used on other components.

// Header top bar when Distraction free mode is on.
&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
.interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
.editor-post-publish-panel {
outline: 4px solid $components-color-accent;
outline-offset: -4px;
Expand Down
16 changes: 9 additions & 7 deletions packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -128,13 +128,6 @@ function Layout( { styles } ) {

const isDistractionFree = isDistractionFreeMode && isLargeViewport;

const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
'is-sidebar-opened': sidebarIsOpened,
'has-fixed-toolbar': hasFixedToolbar,
'has-metaboxes': hasActiveMetaboxes,
'show-icon-labels': showIconLabels,
'is-distraction-free': isDistractionFree,
} );
const openSidebarPanel = () =>
openGeneralSidebar(
hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
Expand Down Expand Up @@ -166,6 +159,15 @@ function Layout( { styles } ) {
[ entitiesSavedStatesCallback ]
);

const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
'is-sidebar-opened': sidebarIsOpened,
'has-fixed-toolbar': hasFixedToolbar,
'has-metaboxes': hasActiveMetaboxes,
'show-icon-labels': showIconLabels,
'is-distraction-free': isDistractionFree,
'is-entity-save-view-open': !! entitiesSavedStatesCallback,
} );

const secondarySidebarLabel = isListViewOpened
? __( 'Document Overview' )
: __( 'Block Library' );
Expand Down
6 changes: 0 additions & 6 deletions packages/edit-site/src/components/editor/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@
padding: $grid-unit-30;
display: flex;
justify-content: center;

.edit-site-layout__actions:focus &,
.edit-site-layout__actions:focus-within & {
top: auto;
bottom: 0;
}
}

// Adjust the position of the notices
Expand Down
9 changes: 8 additions & 1 deletion packages/edit-site/src/components/layout/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -207,10 +207,17 @@

&:focus,
&:focus-within {
top: 0;
top: auto;
bottom: 0;
}

&.is-entity-save-view-open {
&:focus,
&:focus-within {
top: 0;
}
}

@include break-medium {
border-left: $border-width solid $gray-300;
}
Expand Down
9 changes: 8 additions & 1 deletion packages/edit-site/src/components/save-panel/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -46,7 +51,9 @@ export default function SavePanel() {

return (
<NavigableRegion
className="edit-site-layout__actions"
className={ classnames( 'edit-site-layout__actions', {
'is-entity-save-view-open': isSaveViewOpen,
} ) }
ariaLabel={ __( 'Save sidebar' ) }
>
{ isSaveViewOpen ? (
Expand Down
18 changes: 11 additions & 7 deletions packages/interface/src/components/interface-skeleton/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -184,16 +184,20 @@ html.interface-interface-skeleton__html-container {

&:focus,
&:focus-within {
top: $admin-bar-height-big;
top: auto;
bottom: 0;

@include break-medium() {
border-left: $border-width solid $gray-300;
top: $admin-bar-height;
.is-entity-save-view-open & {
top: $admin-bar-height-big;

.is-fullscreen-mode & {
top: 0;
@include break-medium() {
border-left: $border-width solid $gray-300;
top: $admin-bar-height;

.is-fullscreen-mode & {
top: 0;
}
}
}
bottom: 0;
}
}

0 comments on commit dbc55f4

Please sign in to comment.