Skip to content

Commit

Permalink
Adjust primary, secondary and tertiary buttons.
Browse files Browse the repository at this point in the history
This will no doubt need additional feedback, and the branch should stay open for a while to gather all those thoughts.

One of the primary reasons for reducing the borders is, similar to tertiary buttons, that they work due to their context, just like how menu ite
ms work in their menu item contexts. This puts a great onus on the implementer to choose the right button for the right context. In that vein, w
e may even want to provide additional buttons, such as a solid background button that isn't primary, for cases where a primary button is insuffi
cient, and a secondary button does not work well enough in the context. An example could be considered the link dialog mocked up here #20007 (comment)
  • Loading branch information
Joen Asmussen authored and jasmussen committed Feb 19, 2020
1 parent 8a6f917 commit e8bf552
Show file tree
Hide file tree
Showing 13 changed files with 130 additions and 109 deletions.
1 change: 1 addition & 0 deletions packages/base-styles/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ $white: #fff;
$dark-gray-primary: #1e1e1e;
$medium-gray-text: #757575;
$light-gray-secondary: #ccc;
$light-gray-tertiary: #e7e8e9;
$theme-color: theme(button);
$blue-medium-focus: #007cba; // @todo: Currently being used as "spot" color. Needs to be considered in context of themes.
$blue-medium-focus-dark: #fff;
Expand Down
19 changes: 5 additions & 14 deletions packages/base-styles/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -214,35 +214,26 @@
}

@mixin block-style__hover {
background: $light-gray-200;
color: $dark-gray-900 !important;
border-color: $theme-color;
color: $theme-color !important;
}

@mixin block-style__focus() {
color: $dark-gray-900;
box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;
box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $theme-color;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}

@mixin block-style__is-active() {
color: $dark-gray-900;
box-shadow: inset 0 0 0 2px $dark-gray-500;
color: $white;
background: $dark-gray-primary;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
outline-offset: -2px;
}

@mixin block-style__is-active-focus() {
color: $dark-gray-900;
box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500, inset 0 0 0 2px $dark-gray-500;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 4px solid transparent;
outline-offset: -4px;
}

/**
* Applies editor left position to the selector passed as argument
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ $tree-item-height: 36px;

&.is-selected,
&.is-selected:focus {
color: $dark-gray-700;
background: $light-gray-300;
color: $white;
background: $dark-gray-primary;
}
}

Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/block-styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,22 @@

&:hover {
@include block-style__hover;

.block-editor-block-styles__item-preview {
border-color: $theme-color;
}
}

&.is-active {
@include block-style__is-active();

&:focus {
@include block-style__is-active-focus();
}
}
}

// Show a little preview thumbnail for style variations.
.block-editor-block-styles__item-preview {
outline: $border-width solid transparent; // Shown in Windows High Contrast mode.
padding: 0;
border: $border-width solid rgba($dark-gray-900, 0.2);
border: $border-width solid rgba($dark-gray-primary, 0.2);
border-radius: $radius-round-rectangle;
display: flex;
overflow: hidden;
Expand Down
20 changes: 11 additions & 9 deletions packages/block-editor/src/components/block-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
* WordPress dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { Dropdown, Button, Toolbar, PanelBody } from '@wordpress/components';
import { Dropdown, Button, Toolbar, MenuGroup } from '@wordpress/components';
import {
getBlockType,
getPossibleBlockTransformations,
Expand Down Expand Up @@ -143,22 +143,24 @@ export class BlockSwitcher extends Component {
possibleBlockTransformations.length !== 0 ) && (
<div className="block-editor-block-switcher__container">
{ hasBlockStyles && (
<PanelBody
title={ __( 'Block Styles' ) }
initialOpen
>
<MenuGroup>
<div className="block-editor-block-switcher__label">
{ __( 'Styles' ) }
</div>
<BlockStyles
clientId={ blocks[ 0 ].clientId }
onSwitch={ onClose }
onHoverClassName={
this.onHoverClassName
}
/>
</PanelBody>
</MenuGroup>
) }
{ possibleBlockTransformations.length !== 0 && (
<>
<div>{ __( 'Transform to:' ) }</div>
<MenuGroup>
<div className="block-editor-block-switcher__label">
{ __( 'Transform to' ) }
</div>
<BlockTypesList
items={ possibleBlockTransformations.map(
( destinationBlockType ) => ( {
Expand All @@ -175,7 +177,7 @@ export class BlockSwitcher extends Component {
onClose();
} }
/>
</>
</MenuGroup>
) }
</div>
) }
Expand Down
15 changes: 14 additions & 1 deletion packages/block-editor/src/components/block-switcher/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,15 @@
display: flex;
background: $white;
box-shadow: $shadow-popover;
padding: $grid-unit-30;
padding: 0;

.components-menu-group {
padding: $grid-unit-20 $grid-unit-30;
}

.components-menu-group + .components-menu-group {
border-color: $light-gray-secondary;
}
}

.block-editor-block-switcher__popover .components-popover__content {
Expand All @@ -100,6 +108,11 @@
width: 50%;
}

.block-editor-block-switcher__label {
margin-bottom: $grid-unit-10;
color: $medium-gray-text;
}

@include break-medium {
position: relative;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,6 @@

&.is-active {
@include block-style__is-active();

&:focus {
@include block-style__is-active-focus();
}
}
}
}
Expand Down
23 changes: 2 additions & 21 deletions packages/block-editor/src/components/media-placeholder/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,6 @@

.block-editor-media-placeholder__button {
margin-bottom: 0.5rem;

.dashicon {
vertical-align: middle;
margin-bottom: 3px;
}

&:hover {
color: $dark-gray-800;
}
}

.block-editor-media-placeholder__cancel-button.is-link {
Expand All @@ -46,20 +37,10 @@
}

.block-editor-media-placeholder.is-appender {
min-height: 100px;
min-height: 0;

&:hover {
cursor: pointer;
border: 1px solid $theme-color;
box-shadow: 0 0 0 1px $theme-color;
}

.block-editor-media-placeholder__upload-button {
margin-right: $grid-unit-05;
&.components-button:hover,
&.components-button:focus {
box-shadow: none;
border: $border-width solid $dark-gray-500;
}
}

}
30 changes: 24 additions & 6 deletions packages/block-library/src/gallery/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,19 @@
list-style-type: none;
}

// @todo: this deserves a refactor, by being moved to the toolbar.
.block-editor-media-placeholder {
margin-bottom: $grid-unit-10;
margin-bottom: $grid-unit-15;
padding: $grid-unit-15;

// This element is empty here anyway.
.components-placeholder__label {
display: none;
}

.components-button {
margin-bottom: 0;
}
}
}

Expand All @@ -26,12 +37,19 @@ figure.wp-block-gallery {
.blocks-gallery-item {

// Hide the focus outline that otherwise briefly appears when selecting a block.
figure:not(.is-selected):focus {
figure:not(.is-selected):focus,
img:focus {
outline: none;
}

figure.is-selected {
outline: 4px solid theme(primary);
box-shadow: 0 0 0 $border-width $white, 0 0 0 3px $theme-color;
border-radius: $radius-block-ui;
outline: 2px solid transparent;

img {
border-radius: $radius-block-ui;
}
}

figure.is-transient img {
Expand Down Expand Up @@ -103,9 +121,9 @@ figure.wp-block-gallery {
left: -2px;
}

.blocks-gallery-item__move-backward,
.blocks-gallery-item__move-forward,
.blocks-gallery-item__remove {
.blocks-gallery-item__move-backward.components-button,
.blocks-gallery-item__move-forward.components-button,
.blocks-gallery-item__remove.components-button {
padding: 0;
}

Expand Down
Loading

0 comments on commit e8bf552

Please sign in to comment.