From ca6835f31daac09f4d7e1490c1b398c3f5004c60 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Mon, 21 Oct 2019 12:29:14 +0300 Subject: [PATCH] Gutenboarding: add header (#36525) --- .../gutenboarding/components/header/index.tsx | 36 ++ .../components/header/style.scss | 37 ++ .../gutenboarding/gutenberg-styles/README.md | 5 + .../gutenberg-styles/_animations.scss | 5 + .../gutenberg-styles/_breakpoints.scss | 41 ++ .../gutenberg-styles/_colors.scss | 90 +++ .../gutenberg-styles/_mixins.scss | 607 ++++++++++++++++++ .../gutenberg-styles/_variables.scss | 71 ++ .../gutenberg-styles/_z-index.scss | 132 ++++ .../gutenberg-styles/styles.scss | 6 + client/gutenboarding/gutenboard.tsx | 34 +- client/gutenboarding/style.scss | 11 + npm-shrinkwrap.json | 132 ++-- package.json | 1 + 14 files changed, 1127 insertions(+), 81 deletions(-) create mode 100644 client/gutenboarding/components/header/index.tsx create mode 100644 client/gutenboarding/components/header/style.scss create mode 100644 client/gutenboarding/gutenberg-styles/README.md create mode 100644 client/gutenboarding/gutenberg-styles/_animations.scss create mode 100644 client/gutenboarding/gutenberg-styles/_breakpoints.scss create mode 100644 client/gutenboarding/gutenberg-styles/_colors.scss create mode 100644 client/gutenboarding/gutenberg-styles/_mixins.scss create mode 100644 client/gutenboarding/gutenberg-styles/_variables.scss create mode 100644 client/gutenboarding/gutenberg-styles/_z-index.scss create mode 100644 client/gutenboarding/gutenberg-styles/styles.scss diff --git a/client/gutenboarding/components/header/index.tsx b/client/gutenboarding/components/header/index.tsx new file mode 100644 index 0000000000000..2e888970c240e --- /dev/null +++ b/client/gutenboarding/components/header/index.tsx @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Button } from '@wordpress/components'; +import React from 'react'; + +/** + * Internal dependencies + */ +import './style.scss'; + +export function Header() { + /* eslint-disable wpcalypso/jsx-classname-namespace */ + return ( +
+
+
+ +
+
+ ); + /* eslint-enable wpcalypso/jsx-classname-namespace */ +} diff --git a/client/gutenboarding/components/header/style.scss b/client/gutenboarding/components/header/style.scss new file mode 100644 index 0000000000000..99fa6dc162d26 --- /dev/null +++ b/client/gutenboarding/components/header/style.scss @@ -0,0 +1,37 @@ +@import '../../gutenberg-styles/styles'; + +// Copied from https://github.com/WordPress/gutenberg/blob/8c0c7b7267473b5c197dd3052e9707f75f4e6448/packages/edit-widgets/src/components/header/style.scss +.gutenboarding__header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid $light-gray-500; + height: $header-height; + background: $white; + z-index: z-index( '.edit-post-header' ); + + left: 0; + right: 0; + // Stick the toolbar to the top, because the admin bar is not fixed on mobile. + top: 0; + position: sticky; + + // On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container. + @include break-small { + position: fixed; + padding: $grid-size; + // Needed at wp-admin but not in Calypso + // top: $admin-bar-height-big; + } + + // Needed at wp-admin but not in Calypso + /* + @include break-medium() { + top: $admin-bar-height; + } + */ +} + +.gutenboarding__header-actions { + padding: 0 20px; +} diff --git a/client/gutenboarding/gutenberg-styles/README.md b/client/gutenboarding/gutenberg-styles/README.md new file mode 100644 index 0000000000000..90d1f0af01df4 --- /dev/null +++ b/client/gutenboarding/gutenberg-styles/README.md @@ -0,0 +1,5 @@ +# Gutenberg core stylesheets + +From [`WordPress/gutenberg/assets/stylesheets`](https://github.com/WordPress/gutenberg/tree/399e5e143a62a66101285de623cf47fab159bbdb/assets/stylesheets) on Gutenberg v6.6.0. + +This will be replaced with imports from `@wordpress/base-styles` package [once it's available](https://github.com/WordPress/gutenberg/pull/17883). diff --git a/client/gutenboarding/gutenberg-styles/_animations.scss b/client/gutenboarding/gutenberg-styles/_animations.scss new file mode 100644 index 0000000000000..b5e6655e660cb --- /dev/null +++ b/client/gutenboarding/gutenberg-styles/_animations.scss @@ -0,0 +1,5 @@ +@mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) { + animation: edit-post__fade-in-animation $speed ease-out $delay; + animation-fill-mode: forwards; + @include reduce-motion("animation"); +} diff --git a/client/gutenboarding/gutenberg-styles/_breakpoints.scss b/client/gutenboarding/gutenberg-styles/_breakpoints.scss new file mode 100644 index 0000000000000..3dd164c99753a --- /dev/null +++ b/client/gutenboarding/gutenberg-styles/_breakpoints.scss @@ -0,0 +1,41 @@ +/** + * Breakpoints & Media Queries + */ + +// Most used breakpoints +$break-huge: 1440px; +$break-wide: 1280px; +$break-xlarge: 1080px; +$break-large: 960px; // admin sidebar auto folds +$break-medium: 782px; // adminbar goes big +$break-small: 600px; +$break-mobile: 480px; +$break-zoomed-in: 280px; + +// All media queries currently in WordPress: +// +// min-width: 2000px +// min-width: 1680px +// min-width: 1250px +// max-width: 1120px * +// max-width: 1000px +// min-width: 769px and max-width: 1000px +// max-width: 960px * +// max-width: 900px +// max-width: 850px +// min-width: 800px and max-width: 1499px +// max-width: 800px +// max-width: 799px +// max-width: 782px * +// max-width: 768px +// max-width: 640px * +// max-width: 600px * +// max-width: 520px +// max-width: 500px +// max-width: 480px * +// max-width: 400px * +// max-width: 380px +// max-width: 320px * +// +// Those marked * seem to be more commonly used than the others. +// Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse diff --git a/client/gutenboarding/gutenberg-styles/_colors.scss b/client/gutenboarding/gutenberg-styles/_colors.scss new file mode 100644 index 0000000000000..cafa84fba44ca --- /dev/null +++ b/client/gutenboarding/gutenberg-styles/_colors.scss @@ -0,0 +1,90 @@ +/** + * Colors + */ + +// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp. +$black: #000; +$dark-gray-900: #191e23; +$dark-gray-800: #23282d; +$dark-gray-700: #32373c; +$dark-gray-600: #40464d; +$dark-gray-500: #555d66; // Use this most of the time for dark items. +$dark-gray-400: #606a73; +$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast. +$dark-gray-200: #7e8993; +$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast. +$dark-gray-100: #8f98a1; +$light-gray-900: #a2aab2; +$light-gray-800: #b5bcc2; +$light-gray-700: #ccd0d4; +$light-gray-600: #d7dade; +$light-gray-500: #e2e4e7; // Good for "grayed" items and borders. +$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection. +$light-gray-300: #edeff0; +$light-gray-200: #f3f4f5; +$light-gray-100: #f8f9f9; +$white: #fff; + +// Dark opacities, for use with light themes. +$dark-opacity-900: rgba(#000510, 0.9); +$dark-opacity-800: rgba(#00000a, 0.85); +$dark-opacity-700: rgba(#06060b, 0.8); +$dark-opacity-600: rgba(#000913, 0.75); +$dark-opacity-500: rgba(#0a1829, 0.7); +$dark-opacity-400: rgba(#0a1829, 0.65); +$dark-opacity-300: rgba(#0e1c2e, 0.62); +$dark-opacity-200: rgba(#162435, 0.55); +$dark-opacity-100: rgba(#223443, 0.5); +$dark-opacity-light-900: rgba(#304455, 0.45); +$dark-opacity-light-800: rgba(#425863, 0.4); +$dark-opacity-light-700: rgba(#667886, 0.35); +$dark-opacity-light-600: rgba(#7b86a2, 0.3); +$dark-opacity-light-500: rgba(#9197a2, 0.25); +$dark-opacity-light-400: rgba(#95959c, 0.2); +$dark-opacity-light-300: rgba(#829493, 0.15); +$dark-opacity-light-200: rgba(#8b8b96, 0.1); +$dark-opacity-light-100: rgba(#747474, 0.05); +$dark-opacity-background-fill: rgba($dark-gray-700, 0.7); // Similar to $dark-opacity-light-200, but more opaque. + +// Light opacities, for use with dark themes. +$light-opacity-900: rgba($white, 1); +$light-opacity-800: rgba($white, 0.9); +$light-opacity-700: rgba($white, 0.85); +$light-opacity-600: rgba($white, 0.8); +$light-opacity-500: rgba($white, 0.75); +$light-opacity-400: rgba($white, 0.7); +$light-opacity-300: rgba($white, 0.65); +$light-opacity-200: rgba($white, 0.6); +$light-opacity-100: rgba($white, 0.55); +$light-opacity-light-900: rgba($white, 0.5); +$light-opacity-light-800: rgba($white, 0.45); +$light-opacity-light-700: rgba($white, 0.4); +$light-opacity-light-600: rgba($white, 0.35); +$light-opacity-light-500: rgba($white, 0.3); +$light-opacity-light-400: rgba($white, 0.25); +$light-opacity-light-300: rgba($white, 0.2); +$light-opacity-light-200: rgba($white, 0.15); +$light-opacity-light-100: rgba($white, 0.1); +$light-opacity-background-fill: rgba($light-gray-300, 0.8); // Similar to $light-opacity-light-200, but more opaque. + +// Additional colors. +// Some are from https://make.wordpress.org/design/handbook/foundations/colors/. +$blue-wordpress-700: #00669b; +$blue-dark-900: #0071a1; + +$blue-medium-900: #006589; +$blue-medium-800: #00739c; +$blue-medium-700: #007fac; +$blue-medium-600: #008dbe; +$blue-medium-500: #00a0d2; +$blue-medium-400: #33b3db; +$blue-medium-300: #66c6e4; +$blue-medium-200: #bfe7f3; +$blue-medium-100: #e5f5fa; +$blue-medium-highlight: #b3e7fe; +$blue-medium-focus: #007cba; + +// Alert colors. +$alert-yellow: #f0b849; +$alert-red: #d94f4f; +$alert-green: #4ab866; diff --git a/client/gutenboarding/gutenberg-styles/_mixins.scss b/client/gutenboarding/gutenberg-styles/_mixins.scss new file mode 100644 index 0000000000000..dd90c086f5624 --- /dev/null +++ b/client/gutenboarding/gutenberg-styles/_mixins.scss @@ -0,0 +1,607 @@ +/** + * Breakpoint mixins + */ + +@mixin break-huge() { + @media (min-width: #{ ($break-huge) }) { + @content; + } +} + +@mixin break-wide() { + @media (min-width: #{ ($break-wide) }) { + @content; + } +} + +@mixin break-xlarge() { + @media (min-width: #{ ($break-xlarge) }) { + @content; + } +} + +@mixin break-large() { + @media (min-width: #{ ($break-large) }) { + @content; + } +} + +@mixin break-medium() { + @media (min-width: #{ ($break-medium) }) { + @content; + } +} + +@mixin break-small() { + @media (min-width: #{ ($break-small) }) { + @content; + } +} + +@mixin break-mobile() { + @media (min-width: #{ ($break-mobile) }) { + @content; + } +} + +@mixin break-zoomed-in() { + @media (min-width: #{ ($break-zoomed-in) }) { + @content; + } +} + + +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ + +@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) { + content: ""; + display: block; + position: absolute; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: none; + + @if $z-index { + z-index: $z-index; + } + + @if $direction == "bottom" { + background: linear-gradient(to top, rgba($color, 0), $color 90%); + left: $edge; + right: $edge; + top: $edge; + bottom: calc(100% - $size); + width: auto; + } + + @if $direction == "top" { + background: linear-gradient(to bottom, rgba($color, 0), $color 90%); + top: calc(100% - $size); + left: $edge; + right: $edge; + bottom: $edge; + width: auto; + } + + @if $direction == "left" { + background: linear-gradient(to left, rgba($color, 0), $color 90%); + top: $edge; + left: $edge; + bottom: $edge; + right: auto; + width: $size; + height: auto; + } + + @if $direction == "right" { + background: linear-gradient(to right, rgba($color, 0), $color 90%); + top: $edge; + bottom: $edge; + right: $edge; + left: auto; + width: $size; + height: auto; + } +} + +/** + * Button states and focus styles + */ + +// Buttons with rounded corners. +@mixin button-style__disabled { + opacity: 0.6; + cursor: default; +} + +@mixin button-style__hover { + background-color: $white; + color: $dark-gray-900; + box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white; +} + +@mixin button-style__active() { + outline: none; + background-color: $white; + color: $dark-gray-900; + box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $white; +} + +@mixin button-style__focus-active() { + background-color: $white; + color: $dark-gray-900; + box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; +} + +// Switch. +@mixin switch-style__focus-active() { + box-shadow: 0 0 0 2px $white, 0 0 0 3px $dark-gray-300; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; + outline-offset: 2px; +} + +// Formatting Buttons. +@mixin formatting-button-style__hover { + color: $dark-gray-500; + box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white; +} + +@mixin formatting-button-style__active() { + outline: none; + color: $white; + box-shadow: none; + background: $dark-gray-500; +} + +@mixin formatting-button-style__focus() { + box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; +} + +// Tabs, Inputs, Square buttons. +@mixin input-style__neutral() { + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; + border-radius: $radius-round-rectangle; + border: $border-width solid $dark-gray-200; + @include reduce-motion("transition"); +} + +@mixin input-style__focus() { + color: $dark-gray-900; + border-color: $blue-medium-focus; + box-shadow: 0 0 0 1px $blue-medium-focus; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; +} + +// Square buttons. +@mixin square-style__neutral() { + outline-offset: -1px; +} + +@mixin square-style__focus() { + color: $dark-gray-900; + outline-offset: -1px; + outline: 1px dotted $dark-gray-500; +} + +// Menu items. +@mixin menu-style__neutral() { + border: none; + box-shadow: none; +} + +@mixin menu-style__hover() { + color: $dark-gray-900; + border: none; + box-shadow: none; + background: $light-gray-200; +} + +@mixin menu-style__focus() { + color: $dark-gray-900; + border: none; + box-shadow: none; + outline-offset: -2px; + outline: 1px dotted $dark-gray-500; +} + +// Blocks in the Library. +@mixin block-style__disabled { + opacity: 0.6; + cursor: default; +} + +@mixin block-style__hover { + background: $light-gray-200; + color: $dark-gray-900; +} + +@mixin block-style__focus() { + color: $dark-gray-900; + box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500; + + // 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; + + // 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 + */ + +@mixin editor-left($selector) { + #{$selector} { /* Set left position when auto-fold is not on the body element. */ + left: 0; + + @include break-medium() { + left: $admin-sidebar-width; + } + } + + .auto-fold #{$selector} { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ + @include break-medium() { + left: $admin-sidebar-width-collapsed; + } + + @include break-large() { + left: $admin-sidebar-width; + } + } + + /* Sidebar manually collapsed. */ + .folded #{$selector} { + left: 0; + + @include break-medium() { + left: $admin-sidebar-width-collapsed; + } + } + + /* Mobile menu opened. */ + @media (max-width: #{ ($break-medium) }) { + .auto-fold .wp-responsive-open #{$selector} { + left: $admin-sidebar-width-big; + } + } + + /* In small screens with responsive menu expanded there is small white space. */ + @media (max-width: #{ ($break-small) }) { + .auto-fold .wp-responsive-open #{$selector} { + margin-left: -18px; + } + } + + body.is-fullscreen-mode #{$selector} { + left: 0 !important; + } +} + +/** + * Applies editor right position to the selector passed as argument + */ + +@mixin editor-right($selector) { + #{ $selector } { + right: 0; + } + + .edit-post-layout.is-sidebar-opened #{ $selector } { + right: $sidebar-width; + } +} + + +/** + * Styles that are reused verbatim in a few places + */ + +// These are additional styles for all captions, when the theme opts in to block styles. +@mixin caption-style-theme() { + color: $dark-gray-500; + font-size: $default-font-size; + text-align: center; +} + +@mixin dropdown-arrow() { + content: ""; + pointer-events: none; + display: block; + width: 0; + height: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 5px solid; + margin-left: $grid-size-small; + + // This gives the icon space on the right side consistent with the material + // icon standards. + margin-right: 2px; +} + +/** + * Allows users to opt-out of animations via OS-level preferences. + */ + +@mixin reduce-motion($property: "") { + + @if $property == "transition" { + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } + + @else if $property == "animation" { + @media (prefers-reduced-motion: reduce) { + animation-duration: 1ms; + } + } + + @else { + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + animation-duration: 1ms; + } + } + +} + +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +@mixin reset { + box-sizing: border-box; + + *, + *::before, + *::after { + box-sizing: inherit; + } + + .input-control, // Upstream name is `.regular-text`. + input[type="text"], + input[type="search"], + input[type="radio"], + input[type="tel"], + input[type="time"], + input[type="url"], + input[type="week"], + input[type="password"], + input[type="checkbox"], + input[type="color"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="email"], + input[type="month"], + input[type="number"], + select, + textarea { + font-family: $default-font; + padding: 6px 8px; + @include input-style__neutral(); + + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + /* Override core line-height. To be reviewed. */ + line-height: normal; + @include break-small { + font-size: $default-font-size; + /* Override core line-height. To be reviewed. */ + line-height: normal; + } + + &:focus { + @include input-style__focus(); + } + } + + input[type="number"] { + padding-left: 4px; + padding-right: 4px; + } + + select { + padding: 2px; + font-size: $default-font-size; + color: $dark-gray-500; + + &:focus { + border-color: $blue-medium-600; + // Windows High Contrast mode will show this outline + outline: 2px solid transparent; + outline-offset: 0; + } + } + + input[type="checkbox"], + input[type="radio"] { + border: $border-width + 1 solid $dark-gray-300; + margin-right: 12px; + transition: none; + + &:focus { + border-color: $dark-gray-300; + box-shadow: 0 0 0 1px $dark-gray-300; + } + + &:checked { + background: theme(toggle); + border-color: theme(toggle); + } + + &:checked:focus { + box-shadow: 0 0 0 2px $dark-gray-500; + } + } + + input[type="checkbox"] { + border-radius: $radius-round-rectangle / 2; + + &:checked::before, + &[aria-checked="mixed"]::before { + margin: -3px -5px; + color: $white; + + @include break-medium() { + margin: -4px 0 0 -5px; + } + } + + &[aria-checked="mixed"] { + background: theme(toggle); + border-color: theme(toggle); + + &::before { + // Inherited from `forms.css`. + // See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132 + content: "\f460"; + float: left; + display: inline-block; + vertical-align: middle; + width: 16px; + /* stylelint-disable */ + font: normal 30px/1 dashicons; + /* stylelint-enable */ + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @include break-medium() { + float: none; + font-size: 21px; + } + } + + &:focus { + box-shadow: 0 0 0 2px $dark-gray-500; + } + } + } + + // We provide explicit pixel dimensions to ensure a crisp appearance. + // This radio button style should be ported upstream. + input[type="radio"] { + border-radius: $radius-round; + + &:checked::before { + width: 6px; + height: 6px; + margin: 6px 0 0 6px; + background-color: $white; + + @include break-medium() { + margin: 3px 0 0 3px; + } + } + } + + // Placeholder colors + input, + textarea { + // Use opacity to work in various editor styles. + &::-webkit-input-placeholder { + color: $dark-opacity-300; + } + + &::-moz-placeholder { + opacity: 1; // Necessary because Firefox reduces this from 1. + color: $dark-opacity-300; + } + + &:-ms-input-placeholder { + color: $dark-opacity-300; + } + + .is-dark-theme & { + &::-webkit-input-placeholder { + color: $light-opacity-300; + } + + &::-moz-placeholder { + opacity: 1; // Necessary because Firefox reduces this from 1. + color: $light-opacity-300; + } + + &:-ms-input-placeholder { + color: $light-opacity-300; + } + } + } +} + +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +@mixin wp-admin-reset( $content-container ) { + background: $white; + + #wpcontent { + padding-left: 0; + } + + #wpbody-content { + padding-bottom: 0; + } + + /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well. + Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ + #wpbody-content > div:not(#{ $content-container }):not(#screen-meta) { + display: none; + } + + #wpfooter { + display: none; + } + + .a11y-speak-region { + left: -1px; + top: -1px; + } + + ul#adminmenu a.wp-has-current-submenu::after, + ul#adminmenu > li.current > a.current::after { + border-right-color: $white; + } + + .media-frame select.attachment-filters:last-of-type { + width: auto; + max-width: 100%; + } +} diff --git a/client/gutenboarding/gutenberg-styles/_variables.scss b/client/gutenboarding/gutenberg-styles/_variables.scss new file mode 100644 index 0000000000000..652be4700ff22 --- /dev/null +++ b/client/gutenboarding/gutenberg-styles/_variables.scss @@ -0,0 +1,71 @@ +/** + * Often re-used variables + */ + +// Fonts & basics +$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; +$default-font-size: 13px; +$default-line-height: 1.4; +$editor-font: "Noto Serif", serif; +$editor-html-font: Menlo, Consolas, monaco, monospace; +$editor-font-size: 16px; +$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding). +$text-editor-font-size: 14px; +$editor-line-height: 1.8; +$big-font-size: 18px; +$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in" + +// Grid size +$grid-size-small: 4px; +$grid-size: 8px; +$grid-size-large: 16px; +$grid-size-xlarge: 24px; + +// Widths, heights & dimensions +$panel-padding: 16px; +$header-height: 56px; +$panel-header-height: 50px; +$admin-bar-height: 32px; +$admin-bar-height-big: 46px; +$admin-sidebar-width: 160px; +$admin-sidebar-width-big: 190px; +$admin-sidebar-width-collapsed: 36px; +$empty-paragraph-height: $text-editor-font-size * 4; +$modal-min-width: 360px; + +// Visuals +$shadow-popover: 0 3px 30px rgba($dark-gray-900, 0.1); +$shadow-toolbar: 0 2px 10px rgba($dark-gray-900, 0.1), 0 0 2px rgba($dark-gray-900, 0.1); +$shadow-below-only: 0 5px 10px rgba($dark-gray-900, 0.05), 0 2px 2px rgba($dark-gray-900, 0.05); +$shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2); + +// Editor Widths +$sidebar-width: 280px; +$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters. + +// Block UI +$border-width: 1px; +$block-controls-height: 36px; +$icon-button-size: 36px; +$icon-button-size-small: 24px; +$inserter-tabs-height: 36px; +$block-toolbar-height: $block-controls-height + $border-width; +$resize-handler-size: 15px; +$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area. + +// Blocks +$block-left-border-width: $border-width * 3; +$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size. +$block-spacing: 4px; // Vertical space between blocks. +$block-side-ui-width: 28px; // Width of the movers/drag handle UI. +$block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block. +$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint. +$block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group) +$block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group) + +// Buttons & UI Widgets +$radius-round-rectangle: 4px; +$radius-round: 50%; + +// Widgets screen +$widget-area-width: 700px; diff --git a/client/gutenboarding/gutenberg-styles/_z-index.scss b/client/gutenboarding/gutenberg-styles/_z-index.scss new file mode 100644 index 0000000000000..7b7e0aedd5530 --- /dev/null +++ b/client/gutenboarding/gutenberg-styles/_z-index.scss @@ -0,0 +1,132 @@ +// Stores a list of z-index values in a central location. For clarity, when a +// specific value is needed, add a comment explaining why (what other rules the +// value is designed to work with). + +$z-layers: ( + ".block-editor-block-list__block-edit::before": 0, + ".block-editor-block-switcher__arrow": 1, + ".block-editor-block-list__block {core/image aligned wide or fullwide}": 20, + ".block-library-classic__toolbar": 10, + ".block-editor-block-list__layout .reusable-block-indicator": 1, + ".block-editor-block-list__breadcrumb": 22, + ".components-form-toggle__input": 1, + ".components-panel__header.edit-post-sidebar__panel-tabs": -1, + ".edit-post-sidebar .components-panel": -2, + ".block-editor-inserter__tabs": 1, + ".block-editor-inserter__tab.is-active": 1, + ".components-panel__header": 1, + ".components-modal__header": 10, + ".edit-post-meta-boxes-area.is-loading::before": 1, + ".edit-post-meta-boxes-area .spinner": 5, + ".components-popover__close": 5, + ".block-editor-block-list__insertion-point": 6, + ".block-editor-inserter-with-shortcuts": 5, + ".block-editor-warning": 5, + ".block-library-gallery-item__inline-menu": 20, + ".block-editor-url-input__suggestions": 30, + ".edit-post-header": 30, + ".edit-widgets-header": 30, + ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter + ".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter + ".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block + ".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background. + ".wp-block-cover__video-background": 0, // Video background inside cover block. + + // Active pill button + ".components-button.is-button {:focus or .is-primary}": 1, + + // The draggable element should show up above the entire UI + ".components-draggable__clone": 1000000000, + + // Should have higher index than the inset/underlay used for dragging + ".components-placeholder__fieldset": 1, + ".block-editor-block-list__block-edit .reusable-block-edit-panel *": 1, + + // Show drop zone above most standard content, but below any overlays + ".components-drop-zone": 40, + ".components-drop-zone__content": 50, + + // The block mover for floats should overlap the controls of adjacent blocks. + ".block-editor-block-list__block {core/image aligned left or right}": 21, + + // Small screen inner blocks overlay must be displayed above drop zone, + // settings menu, and movers. + ".block-editor-inner-blocks.has-overlay::after": 60, + + // The toolbar, when contextual, should be above any adjacent nested block click overlays. + ".block-editor-block-list__layout .reusable-block-edit-panel": 61, + ".block-editor-block-contextual-toolbar": 61, + ".editor-inner-blocks .block-editor-block-list__breadcrumb": 62, + + // The block mover, particularly in nested contexts, + // should overlap most block content. + ".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 61, + + // Show sidebar above wp-admin navigation bar for mobile viewports: + // #wpadminbar { z-index: 99999 } + ".edit-post-sidebar": 100000, + ".edit-widgets-sidebar": 100000, + ".edit-post-layout .edit-post-post-publish-panel": 100001, + // For larger views, the wp-admin navbar dropdown should be at top of + // the Publish Post sidebar. + ".edit-post-layout .edit-post-post-publish-panel-break-medium": 99998, + + // Show sidebar in greater than small viewports above editor related elements + // but bellow #adminmenuback { z-index: 100 } + ".edit-post-sidebar {greater than small}": 90, + + // Show notices below expanded editor bar + // .edit-post-header { z-index: 30 } + ".components-notice-list": 29, + + + // Show snackbars above everything (similar to popovers) + ".components-snackbar-list": 100000, + + // Show modal under the wp-admin menus and the popover + ".components-modal__screen-overlay": 100000, + + // Show popovers above wp-admin menus and submenus and sidebar: + // #adminmenuwrap { z-index: 9990 } + ".components-popover": 1000000, + + // ...Except for popovers immediately beneath wp-admin menu on large breakpoints + ".components-popover.block-editor-inserter__popover": 99998, + ".components-popover.table-of-contents__popover": 99998, + ".components-popover.block-editor-block-navigation__popover": 99998, + ".components-popover.edit-post-more-menu__content": 99998, + ".components-popover.block-editor-rich-text__inline-format-toolbar": 99998, + + ".components-autocomplete__results": 1000000, + + ".skip-to-selected-block": 100000, + ".edit-post-toggle-publish-panel": 100000, + + // Show NUX tips above popovers, wp-admin menus, submenus, and sidebar: + ".nux-dot-tip": 1000001, + + // Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar: + ".components-tooltip": 1000002, + + // Make sure corner handles are above side handles for ResizableBox component + ".components-resizable-box__side-handle": 1, + ".components-resizable-box__corner-handle": 2, + + // Make sure block manager sticky category titles appear above the options + ".edit-post-manage-blocks-modal__category-title": 1, + + // Needs to appear bellow other color circular picker related UI elements. + ".components-circular-option-picker__option-wrapper::before": -1, + + ".components-circular-option-picker__option.is-active": 1, + // Needs to be higher than .components-circular-option-picker__option.is-active. + ".components-circular-option-picker__option.is-active + .dashicons-saved": 2 +); + +@function z-index( $key ) { + @if map-has-key( $z-layers, $key ) { + @return map-get( $z-layers, $key ); + } + + @error "Error: Specified z-index `#{$key}` does not exist in the mapping"; +} diff --git a/client/gutenboarding/gutenberg-styles/styles.scss b/client/gutenboarding/gutenberg-styles/styles.scss new file mode 100644 index 0000000000000..8396bc33a9fa4 --- /dev/null +++ b/client/gutenboarding/gutenberg-styles/styles.scss @@ -0,0 +1,6 @@ +@import 'z-index'; +@import 'colors'; +@import 'variables'; +@import 'breakpoints'; +@import 'mixins'; +@import 'animations'; diff --git a/client/gutenboarding/gutenboard.tsx b/client/gutenboarding/gutenboard.tsx index 44b874a24d756..d1095f98a6c02 100644 --- a/client/gutenboarding/gutenboard.tsx +++ b/client/gutenboarding/gutenboard.tsx @@ -18,6 +18,7 @@ import '@wordpress/format-library'; /** * Internal dependencies */ +import { Header } from 'gutenboarding/components/header'; import './style.scss'; import '@wordpress/components/build-style/style.css'; @@ -31,21 +32,24 @@ export function Gutenboard() { const [ blocks, updateBlocks ] = useState( [] ); return ( - - - -
- - - - - - -
- - - - +
+
+ + + +
+ + + + + + +
+ + + + +
); } diff --git a/client/gutenboarding/style.scss b/client/gutenboarding/style.scss index e69de29bb2d1d..3208ee49658fb 100644 --- a/client/gutenboarding/style.scss +++ b/client/gutenboarding/style.scss @@ -0,0 +1,11 @@ +@import './gutenberg-styles/styles'; + +.gutenboarding { + @include reset; +} + +.gutenboarding__block-editor *, +.gutenboarding__block-editor ::after, +.gutenboarding__block-editor ::before { + box-sizing: border-box; +} diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 7ca679f849bad..123d079a7dc7a 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -5680,25 +5680,25 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": false, + "resolved": "", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "optional": true, "requires": { @@ -5708,13 +5708,13 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "optional": true, "requires": { @@ -5724,37 +5724,37 @@ }, "chownr": { "version": "1.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "optional": true }, "debug": { "version": "4.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "optional": true, "requires": { @@ -5763,25 +5763,25 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": false, + "resolved": "", "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": false, + "resolved": "", "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "optional": true, "requires": { @@ -5790,13 +5790,13 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "optional": true }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "optional": true, "requires": { @@ -5812,7 +5812,7 @@ }, "glob": { "version": "7.1.3", - "resolved": false, + "resolved": "", "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "optional": true, "requires": { @@ -5826,13 +5826,13 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": false, + "resolved": "", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "optional": true, "requires": { @@ -5841,7 +5841,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "optional": true, "requires": { @@ -5850,7 +5850,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "optional": true, "requires": { @@ -5860,19 +5860,19 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "optional": true, "requires": { @@ -5881,13 +5881,13 @@ }, "isarray": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "optional": true, "requires": { @@ -5896,13 +5896,13 @@ }, "minimist": { "version": "0.0.8", - "resolved": false, + "resolved": "", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "optional": true }, "minipass": { "version": "2.3.5", - "resolved": false, + "resolved": "", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "optional": true, "requires": { @@ -5912,7 +5912,7 @@ }, "minizlib": { "version": "1.2.1", - "resolved": false, + "resolved": "", "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", "optional": true, "requires": { @@ -5921,7 +5921,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": false, + "resolved": "", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "optional": true, "requires": { @@ -5930,13 +5930,13 @@ }, "ms": { "version": "2.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "optional": true }, "needle": { "version": "2.3.0", - "resolved": false, + "resolved": "", "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", "optional": true, "requires": { @@ -5947,7 +5947,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": false, + "resolved": "", "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "optional": true, "requires": { @@ -5965,7 +5965,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "optional": true, "requires": { @@ -5975,13 +5975,13 @@ }, "npm-bundled": { "version": "1.0.6", - "resolved": false, + "resolved": "", "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", "optional": true }, "npm-packlist": { "version": "1.4.1", - "resolved": false, + "resolved": "", "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", "optional": true, "requires": { @@ -5991,7 +5991,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "optional": true, "requires": { @@ -6003,19 +6003,19 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": false, + "resolved": "", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "optional": true }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "optional": true, "requires": { @@ -6024,19 +6024,19 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "optional": true }, "osenv": { "version": "0.1.5", - "resolved": false, + "resolved": "", "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "optional": true, "requires": { @@ -6046,19 +6046,19 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": false, + "resolved": "", "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "optional": true }, "rc": { "version": "1.2.8", - "resolved": false, + "resolved": "", "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "optional": true, "requires": { @@ -6070,7 +6070,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "optional": true } @@ -6078,7 +6078,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": false, + "resolved": "", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "optional": true, "requires": { @@ -6093,7 +6093,7 @@ }, "rimraf": { "version": "2.6.3", - "resolved": false, + "resolved": "", "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "optional": true, "requires": { @@ -6102,43 +6102,43 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "optional": true }, "sax": { "version": "1.2.4", - "resolved": false, + "resolved": "", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "optional": true }, "semver": { "version": "5.7.0", - "resolved": false, + "resolved": "", "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "optional": true }, "string-width": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "optional": true, "requires": { @@ -6149,7 +6149,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "optional": true, "requires": { @@ -6158,7 +6158,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "optional": true, "requires": { @@ -6167,13 +6167,13 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "optional": true }, "tar": { "version": "4.4.8", - "resolved": false, + "resolved": "", "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", "optional": true, "requires": { @@ -6188,13 +6188,13 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": false, + "resolved": "", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "optional": true, "requires": { @@ -6203,13 +6203,13 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "optional": true }, "yallist": { "version": "3.0.3", - "resolved": false, + "resolved": "", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", "optional": true } diff --git a/package.json b/package.json index b7ee684bdb8d6..9301492022da2 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "@wordpress/editor": "9.7.2", "@wordpress/element": "2.8.2", "@wordpress/format-library": "1.9.2", + "@wordpress/i18n": "3.6.1", "@wordpress/notices": "1.8.2", "@wordpress/nux": "3.7.2", "@wordpress/plugins": "2.7.2",