diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index c5bc29c71447f0..ebeb9789ae9683 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -12,8 +12,7 @@
}
// Hide table of contents and block navigation on mobile.
- .block-editor-block-navigation,
- .table-of-contents {
+ .block-editor-block-navigation {
display: none;
@include break-small() {
@@ -26,11 +25,10 @@
.edit-post-header-toolbar__block-toolbar {
// Stack toolbar below Editor Bar.
position: absolute;
- top: $header-height + 1px;
+ top: $header-height + $border-width;
left: 0;
right: 0;
background: $white;
- min-height: 36px;
border-bottom: $border-width solid $light-gray-500;
&:empty {
@@ -61,18 +59,15 @@
right: auto;
background: none;
border-bottom: none;
- min-height: auto;
.is-sidebar-opened & {
right: auto;
}
- .block-editor-block-toolbar {
- margin: -($grid-unit-10 + $border-width) 0;
- }
-
.block-editor-block-toolbar .components-toolbar {
- padding: ($grid-unit-10 - $border-width - $border-width) 0;
+ $top-toolbar-padding: ($header-height - $grid-unit-60) / 2;
+ height: $header-height;
+ padding: $top-toolbar-padding 0;
}
}
}
diff --git a/packages/edit-post/src/components/header/pinned-plugins/style.scss b/packages/edit-post/src/components/header/pinned-plugins/style.scss
index 95df46e7735d03..f8020c349699ad 100644
--- a/packages/edit-post/src/components/header/pinned-plugins/style.scss
+++ b/packages/edit-post/src/components/header/pinned-plugins/style.scss
@@ -21,8 +21,8 @@
// Colorize plugin icons to ensure contrast and cohesion, but allow plugin developers to override.
.components-button:not(.is-pressed) svg,
.components-button:not(.is-pressed) svg * {
- stroke: $dark-gray-500;
- fill: $dark-gray-500;
+ stroke: $dark-gray-primary;
+ fill: $dark-gray-primary;
stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
}
@@ -38,8 +38,8 @@
.components-button:hover svg,
.components-button:hover svg * {
- stroke: $dark-gray-900 !important;
- fill: $dark-gray-900 !important;
+ stroke: $blue-medium-focus !important;
+ fill: $blue-medium-focus !important;
stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
}
}
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index eca62def2940ba..b31a943b68eaa6 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -1,6 +1,5 @@
.edit-post-header {
height: $header-height;
- padding: $grid-unit-05 2px;
background: $white;
display: flex;
flex-wrap: wrap;
@@ -10,15 +9,17 @@
// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
max-width: 100vw;
+ // Padding.
+ padding: $grid-unit-15;
+ @include break-small() {
+ padding: $grid-unit-15 ($grid-unit-15 + 6px);
+ }
+
// Make toolbar sticky on larger breakpoints
@include break-zoomed-in {
flex-wrap: nowrap;
}
- @include break-small {
- padding: $grid-unit-10;
- }
-
// Some browsers, most notably IE11, honor an older version of the flexbox spec
// which takes absolutely positioned items into account when calculating `space-between`.
// https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items
@@ -48,63 +49,43 @@
flex-wrap: wrap;
}
-// @todo: this state should be refactored away once the G2 UI goes beyond the canvas.
-.edit-post-header__settings .components-button {
- // Header toggle buttons.
- &.is-pressed {
- color: $white;
- background: $dark-gray-500;
- }
-
- // The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.
- &.is-pressed:hover,
- &.is-pressed:focus {
- box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white !important;
- color: $white !important;
- background: $dark-gray-500 !important;
- }
- // Make editor header bar buttons bigger to match Buttons.
- &.editor-post-save-draft,
- &.editor-post-switch-to-draft,
- &.editor-post-preview,
- &.editor-post-publish-button,
- &.editor-post-publish-panel__toggle {
- margin: 2px;
- font-size: $default-font-size;
- }
+/**
+ * Buttons in the Toolbar
+ */
- &.editor-post-save-draft,
- &.editor-post-switch-to-draft {
- padding: 0 5px;
+.edit-post-header__toolbar {
+ .block-editor-inserter__toggle {
+ margin-right: $grid-unit-10;
- @include break-small() {
- padding: 0 12px;
- }
+ // Special dimensions for this button.
+ min-width: 32px;
+ height: 32px;
}
+}
- // These paddings actually duplicate existing rules from button component.
- // But they are duplicated so as to provide smaller paddings to fit the buttons on mobile.
- &.editor-post-preview,
- &.editor-post-publish-button,
- &.editor-post-publish-panel__toggle {
- padding-left: 5px;
- padding-right: 5px;
- @include break-small() {
- padding-left: 12px;
- padding-right: 12px;
- }
+.edit-post-header__settings {
+ // Header toggle buttons.
+ .components-button.is-pressed {
+ color: $white;
+ background: $dark-gray-primary;
}
- @include break-medium() {
- &.editor-post-preview {
- margin: 0 3px 0 12px;
- }
+ // Adjust button paddings to scale better to mobile.
+ .components-button.editor-post-save-draft,
+ .editor-post-saved-state,
+ .components-button.editor-post-switch-to-draft,
+ .components-button.editor-post-preview,
+ .components-button.editor-post-preview__dropdown,
+ .components-button.editor-post-publish-button,
+ .components-button.editor-post-publish-panel__toggle {
+ padding: 0 6px;
+ margin-right: $grid-unit-05;
- &.editor-post-publish-button,
- &.editor-post-publish-panel__toggle {
- margin: 0 12px 0 3px;
+ @include break-small() {
+ padding: 0 12px;
+ margin-right: $grid-unit-15;
}
}
}
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 3ac151c0e20ec3..02a2f8df2cd54c 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -13,6 +13,7 @@ import {
EditorNotices,
PostPublishPanel,
EditorKeyboardShortcutsRegister,
+ TableOfContents,
} from '@wordpress/editor';
import { useSelect, useDispatch } from '@wordpress/data';
import {
@@ -67,6 +68,7 @@ function Layout() {
previousShortcut,
nextShortcut,
hasBlockSelected,
+ isTextModeEnabled,
} = useSelect( ( select ) => {
return {
hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
@@ -94,9 +96,8 @@ function Layout() {
nextShortcut: select(
'core/keyboard-shortcuts'
).getAllShortcutRawKeyCombinations( 'core/edit-post/next-region' ),
- hasBlockSelected: select(
- 'core/block-editor'
- ).getBlockSelectionStart(),
+ isTextModeEnabled:
+ select( 'core/edit-post' ).getEditorMode() === 'text',
};
}, [] );
const sidebarIsOpened =
@@ -167,6 +168,12 @@ function Layout() {
mode === 'visual' && (
)
}
@@ -184,10 +191,10 @@ function Layout() {
}
/>
) : (
-
+