diff --git a/client/gutenboarding/gutenboard.tsx b/client/gutenboarding/gutenboard.tsx index 0ea8c18c509df..640b2783a23b6 100644 --- a/client/gutenboarding/gutenboard.tsx +++ b/client/gutenboarding/gutenboard.tsx @@ -18,6 +18,7 @@ import '@wordpress/format-library'; /** * Internal dependencies */ +import { Header } from './header'; import './style.scss'; /* eslint-disable no-restricted-syntax */ @@ -34,6 +35,7 @@ export function Gutenboard() { return ( <> +
Onboard!
@@ -45,7 +47,7 @@ export function Gutenboard() { onInput={ updateBlocks } onChange={ updateBlocks } > -
+
diff --git a/client/gutenboarding/header.tsx b/client/gutenboarding/header.tsx new file mode 100644 index 0000000000000..50b4c6ac5a783 --- /dev/null +++ b/client/gutenboarding/header.tsx @@ -0,0 +1,31 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Button, NavigableMenu } from '@wordpress/components'; +import React from 'react'; + +/** + * Internal dependencies + */ +import Inserter from './inserter'; + +export function Header() { + return ( +
+ + + +
+ +
+
+ ); +} diff --git a/client/gutenboarding/inserter.tsx b/client/gutenboarding/inserter.tsx new file mode 100644 index 0000000000000..d896ca963d1d6 --- /dev/null +++ b/client/gutenboarding/inserter.tsx @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { createSlotFill } from '@wordpress/components'; +import React from 'react'; + +const { Fill: BlockInserterFill, Slot: BlockInserterSlot } = createSlotFill( + 'GutenboardingInserter' +); + +const Inserter = BlockInserterFill; + +Inserter.Slot = function() { + return ; +}; + +export default Inserter; diff --git a/client/gutenboarding/style.scss b/client/gutenboarding/style.scss index e69de29bb2d1d..a166a2beb21e3 100644 --- a/client/gutenboarding/style.scss +++ b/client/gutenboarding/style.scss @@ -0,0 +1,52 @@ +@import './gutenberg-styles/z-index'; +@import './gutenberg-styles/colors'; +@import './gutenberg-styles/variables'; +@import './gutenberg-styles/breakpoints'; +@import './gutenberg-styles/mixins'; +@import './gutenberg-styles/animations'; + +:root { + @include reset; +} + +.gutenboarding__block-editor *, +.gutenboarding__block-editor ::after, +.gutenboarding__block-editor ::before { + box-sizing: border-box; +} + +// 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: 1; + + 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; +}