Enforce a default icon size to allow flex alignment + fix unaligned l…

…abels (#9828)

* Enforce a default icon size to allow flex alignment + fix unaligned text

* Further unify transform icons

* Reset block icon margin to 0 and modify contextually in all cases

* Remove an unnecessary newline

* add minimum size on block icons and inline docs

* Use flexbox to position dropdown-arrow mixin

* chore: Tweak comments

edit-post/assets/stylesheets/_mixins.scss

@@ -315,11 +315,14 @@
  content: "";
  pointer-events: none;
  display: block;
- position: absolute;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid currentColor;
- right: 6px;
+ margin-left: $grid-size-small;
+
+ // This gives the icon space on the right side consistent with the material
+ // icon standards.
+ margin-right: 2px;
 }

packages/components/src/dropdown-menu/style.scss

@@ -30,15 +30,9 @@
  @include formatting-button-style__hover();
  }
 
- .components-dropdown-menu__indicator {
- display: inline-block;
- margin-left: 10px;
-
- // Add a dropdown arrow indicator.
- &::after {
- @include dropdown-arrow();
- top: $icon-button-size-small / 2 + 1px;
- }
+ // Add a dropdown arrow indicator.
+ .components-dropdown-menu__indicator::after {
+ @include dropdown-arrow();
  }
  }
 }

packages/editor/src/components/autocompleters/style.scss

@@ -1,7 +1,6 @@
 
 .editor-autocompleters__block {
- svg,
- .dashicon {
+ .editor-block-icon {
  margin-right: 8px;
  }
 }

packages/editor/src/components/block-icon/index.js

@@ -11,15 +11,21 @@ import { createElement, Component } from '@wordpress/element';
 
 function renderIcon( icon ) {
  if ( 'string' === typeof icon ) {
- return <Dashicon icon={ icon } />;
+ return <Dashicon icon={ icon } size={ 20 } />;
  } else if ( 'function' === typeof icon ) {
  if ( icon.prototype instanceof Component ) {
  return createElement( icon );
  }
 
  return icon();
  } else if ( icon && icon.type === 'svg' ) {
- return <AccessibleSVG { ...icon.props } />;
+ const appliedProps = {
+ ...icon.props,
+ width: icon.props.width || 24,
+ height: icon.props.height || 24,
+ };
+
+ return <AccessibleSVG { ...appliedProps } />;
  }
 
  return icon || null;

packages/editor/src/components/block-icon/style.scss

@@ -1,16 +1,27 @@
 .editor-block-icon {
- display: inline-block;
- border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
  margin: 0;
+ border-radius: 4px;
 
  &.has-colors {
  svg {
  fill: currentColor;
  }
  }
 
- svg:not(.dashicon) {
- height: 24px;
- width: 24px;
+ // Icons with width/height attributes below 20px will be sized up to 20px,
+ // and icons with width/height attributes above 24px will be sized down to
+ // 24px. Icons with width/height >=20px and <=24px will display at the
+ // indicated size.
+ // See: https://github.com/WordPress/gutenberg/pull/9828
+ svg {
+ min-width: 20px;
+ min-height: 20px;
+ max-width: 24px;
+ max-height: 24px;
  }
 }

packages/editor/src/components/block-inspector/style.scss

@@ -43,5 +43,6 @@
  margin-left: -2px;
  margin-right: 10px;
  padding: 0 3px;
+ width: $icon-button-size;
  height: $icon-button-size-small;
 }

packages/editor/src/components/block-switcher/style.scss

@@ -10,7 +10,7 @@
  margin: 0;
  display: block;
  height: $icon-button-size;
- padding: 6px 3px;
+ padding: 3px;
 
  // Unset icon button styles.
  &:active,
@@ -25,10 +25,10 @@
  .editor-block-icon,
  .editor-block-switcher__transform {
  width: $icon-button-size + 3px + 3px;
+ height: $icon-button-size-small + 6px;
  position: relative;
- height: $icon-button-size-small;
- margin: 0;
- padding: 0 6px;
+ margin: 0 auto;
+ padding: 3px;
  display: flex;
  align-items: center;
  transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
@@ -37,14 +37,11 @@
  // Add a dropdown arrow indicator.
  .editor-block-icon::after {
  @include dropdown-arrow();
- top: $icon-button-size-small / 2 - 1px;
  }
 
  .editor-block-switcher__transform {
- margin-top: 6px + 3px;
+ margin-top: 6px;
  border-radius: $radius-round-rectangle;
- height: $icon-button-size-small + 6px;
- padding: 3px 9px 3px 9px;
  }
 
  // Block hover and focus style.

packages/editor/src/components/block-types-list/style.scss

@@ -80,6 +80,11 @@
  color: $dark-gray-500;
  transition: all 0.05s ease-in-out;
 
+ .editor-block-icon {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
  svg {
  transition: all 0.15s ease-out;
  }