diff --git a/client/gutenboarding/components/header/index.tsx b/client/gutenboarding/components/header/index.tsx
new file mode 100644
index 00000000000000..2e888970c240ea
--- /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 (
+		<div
+			className="gutenboarding__header"
+			role="region"
+			aria-label={ __( 'Top bar' ) }
+			tabIndex="-1"
+		>
+			<div
+				aria-label={ __( 'Document tools' ) }
+				aria-orientation="horizontal"
+				className="gutenboarding__header-toolbar"
+				role="toolbar"
+			></div>
+			<div className="gutenboarding__header-actions">
+				<Button isPrimary isLarge>
+					{ __( 'Continue' ) }
+				</Button>
+			</div>
+		</div>
+	);
+	/* 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 00000000000000..99fa6dc162d260
--- /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 00000000000000..90d1f0af01df46
--- /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 00000000000000..b5e6655e660cbb
--- /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 00000000000000..3dd164c99753a5
--- /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 00000000000000..cafa84fba44cac
--- /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 00000000000000..dd90c086f56248
--- /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 00000000000000..652be4700ff22a
--- /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 00000000000000..7b7e0aedd55301
--- /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 00000000000000..8396bc33a9fa4c
--- /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 44b874a24d756a..d1095f98a6c024 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 (
-		<SlotFillProvider>
-			<DropZoneProvider>
-				<BlockEditorProvider value={ blocks } onInput={ updateBlocks } onChange={ updateBlocks }>
-					<div>
-						<BlockEditorKeyboardShortcuts />
-						<WritingFlow>
-							<ObserveTyping>
-								<BlockList />
-							</ObserveTyping>
-						</WritingFlow>
-					</div>
-					<Popover.Slot />
-				</BlockEditorProvider>
-			</DropZoneProvider>
-		</SlotFillProvider>
+		<div className="gutenboarding">
+			<Header />
+			<SlotFillProvider>
+				<DropZoneProvider>
+					<BlockEditorProvider value={ blocks } onInput={ updateBlocks } onChange={ updateBlocks }>
+						<div className="gutenboarding__block-editor">
+							<BlockEditorKeyboardShortcuts />
+							<WritingFlow>
+								<ObserveTyping>
+									<BlockList />
+								</ObserveTyping>
+							</WritingFlow>
+						</div>
+						<Popover.Slot />
+					</BlockEditorProvider>
+				</DropZoneProvider>
+			</SlotFillProvider>
+		</div>
 	);
 }
 
diff --git a/client/gutenboarding/style.scss b/client/gutenboarding/style.scss
index e69de29bb2d1d6..3208ee49658fb0 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 7ca679f849bad7..123d079a7dc7ac 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 b7ee684bdb8d6b..9301492022da2c 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",