Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Automattic/isolated-block-editor
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 7b19e579a136dcb225582049208525d9ed631d22
Choose a base ref
..
head repository: Automattic/isolated-block-editor
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 13570cf57ba48a6d4b084b70e5299b0ccb1ddfe2
Choose a head ref
105 changes: 105 additions & 0 deletions build-module/components/block-editor-toolbar/header-toolbar/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
@import '@wordpress/base-styles/_colors';
@import '@wordpress/base-styles/_variables';
@import '@wordpress/base-styles/_mixins';
@import '@wordpress/base-styles/_breakpoints';
@import '@wordpress/base-styles/_animations';
@import '@wordpress/base-styles/_z-index';

.editor-document-tools {
display: inline-flex;
align-items: center;

// Hide all action buttons except the inserter on mobile.
.editor-document-tools__left > .components-button {
display: none;

@include break-small() {
display: inline-flex;
}
}

.editor-document-tools__left > .editor-document-tools__inserter-toggle {
display: inline-flex;

svg {
transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
@include reduce-motion("transition");
}

&.is-pressed {
svg {
transform: rotate(45deg);
}
}
}

// Hide table of contents and list view on mobile.
.block-editor-list-view {
display: none;

@include break-small() {
display: flex;
}
}

// The Toolbar component adds different styles to buttons, so we reset them
// here to the original button styles
.editor-document-tools__left > .components-button.has-icon,
.editor-document-tools__left > .components-dropdown > .components-button.has-icon {
// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
// This is best fixed by making the mover control area a proper single toolbar group.
// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
height: $button-size-compact;
min-width: $button-size-compact;
padding: 4px;

&.is-pressed {
background: $gray-900;
}

&:focus:not(:disabled) {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
outline: $border-width solid transparent;
}

&::before {
display: none;
}
}
}

.editor-document-tools__left {
display: inline-flex;
align-items: center;
padding-left: $grid-unit-20;
gap: $grid-unit-10;

// Some plugins add buttons here despite best practices.
// Push them a bit rightwards to fit the top toolbar.
margin-right: $grid-unit-10;

@include break-medium() {
padding-left: $grid-unit-50 * 0.5;
}

@include break-wide() {
padding-right: $grid-unit-10;
}
}

.editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
min-width: $button-size-compact;
width: $button-size-compact;
height: $button-size-compact;
padding: 0;

.show-icon-labels & {
width: auto;
height: $button-size-compact;
padding: 0 $grid-unit-10;
}
}

.show-icon-labels .editor-document-tools__left > * + * {
margin-left: $grid-unit-10;
}
2 changes: 2 additions & 0 deletions build-types/components/block-editor/unlock.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const unlock: (object: any) => any;
//# sourceMappingURL=unlock.d.ts.map
1 change: 1 addition & 0 deletions build-types/components/block-editor/unlock.d.ts.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

105 changes: 105 additions & 0 deletions build/components/block-editor-toolbar/header-toolbar/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
@import '@wordpress/base-styles/_colors';
@import '@wordpress/base-styles/_variables';
@import '@wordpress/base-styles/_mixins';
@import '@wordpress/base-styles/_breakpoints';
@import '@wordpress/base-styles/_animations';
@import '@wordpress/base-styles/_z-index';

.editor-document-tools {
display: inline-flex;
align-items: center;

// Hide all action buttons except the inserter on mobile.
.editor-document-tools__left > .components-button {
display: none;

@include break-small() {
display: inline-flex;
}
}

.editor-document-tools__left > .editor-document-tools__inserter-toggle {
display: inline-flex;

svg {
transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
@include reduce-motion("transition");
}

&.is-pressed {
svg {
transform: rotate(45deg);
}
}
}

// Hide table of contents and list view on mobile.
.block-editor-list-view {
display: none;

@include break-small() {
display: flex;
}
}

// The Toolbar component adds different styles to buttons, so we reset them
// here to the original button styles
.editor-document-tools__left > .components-button.has-icon,
.editor-document-tools__left > .components-dropdown > .components-button.has-icon {
// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
// This is best fixed by making the mover control area a proper single toolbar group.
// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
height: $button-size-compact;
min-width: $button-size-compact;
padding: 4px;

&.is-pressed {
background: $gray-900;
}

&:focus:not(:disabled) {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
outline: $border-width solid transparent;
}

&::before {
display: none;
}
}
}

.editor-document-tools__left {
display: inline-flex;
align-items: center;
padding-left: $grid-unit-20;
gap: $grid-unit-10;

// Some plugins add buttons here despite best practices.
// Push them a bit rightwards to fit the top toolbar.
margin-right: $grid-unit-10;

@include break-medium() {
padding-left: $grid-unit-50 * 0.5;
}

@include break-wide() {
padding-right: $grid-unit-10;
}
}

.editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
min-width: $button-size-compact;
width: $button-size-compact;
height: $button-size-compact;
padding: 0;

.show-icon-labels & {
width: auto;
height: $button-size-compact;
padding: 0 $grid-unit-10;
}
}

.show-icon-labels .editor-document-tools__left > * + * {
margin-left: $grid-unit-10;
}
14 changes: 14 additions & 0 deletions build/components/block-editor/unlock.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions build/components/block-editor/unlock.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.