From 0abc8ddb56ee86be1f101445426d2d84bb4dfa0d Mon Sep 17 00:00:00 2001 From: epiqueras Date: Tue, 10 Dec 2019 16:37:16 -0800 Subject: [PATCH] Edit Site: Render basic editor. --- package-lock.json | 11 +++- packages/base-styles/_z-index.scss | 3 + packages/edit-site/package.json | 11 +++- .../src/components/block-editor/index.js | 66 +++++++++++++++++++ .../src/components/block-editor/style.scss | 19 ++++++ .../edit-site/src/components/editor/index.js | 33 ++++++++++ .../edit-site/src/components/header/index.js | 19 ++++++ .../src/components/header/style.scss | 33 ++++++++++ .../edit-site/src/components/notices/index.js | 23 +++++++ .../src/components/notices/style.scss | 9 +++ .../edit-site/src/components/sidebar/index.js | 28 ++++++++ .../src/components/sidebar/style.scss | 46 +++++++++++++ packages/edit-site/src/hooks/components.js | 11 ++++ packages/edit-site/src/hooks/index.js | 4 ++ packages/edit-site/src/index.js | 30 ++++++++- packages/edit-site/src/style.scss | 53 ++++++++++++++- 16 files changed, 394 insertions(+), 5 deletions(-) create mode 100644 packages/edit-site/src/components/block-editor/index.js create mode 100644 packages/edit-site/src/components/block-editor/style.scss create mode 100644 packages/edit-site/src/components/editor/index.js create mode 100644 packages/edit-site/src/components/header/index.js create mode 100644 packages/edit-site/src/components/header/style.scss create mode 100644 packages/edit-site/src/components/notices/index.js create mode 100644 packages/edit-site/src/components/notices/style.scss create mode 100644 packages/edit-site/src/components/sidebar/index.js create mode 100644 packages/edit-site/src/components/sidebar/style.scss create mode 100644 packages/edit-site/src/hooks/components.js create mode 100644 packages/edit-site/src/hooks/index.js diff --git a/package-lock.json b/package-lock.json index 9afd94e574f5d7..0b69fdb892b66a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7893,7 +7893,16 @@ "@wordpress/edit-site": { "version": "file:packages/edit-site", "requires": { - "@babel/runtime": "^7.4.4" + "@babel/runtime": "^7.4.4", + "@wordpress/block-editor": "file:packages/block-editor", + "@wordpress/block-library": "file:packages/block-library", + "@wordpress/components": "file:packages/components", + "@wordpress/data": "file:packages/data", + "@wordpress/element": "file:packages/element", + "@wordpress/hooks": "file:packages/hooks", + "@wordpress/i18n": "file:packages/i18n", + "@wordpress/media-utils": "file:packages/media-utils", + "@wordpress/notices": "file:packages/notices" } }, "@wordpress/edit-widgets": { diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 9bdedb9fe09d17..004a28b00c5910 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -26,6 +26,7 @@ $z-layers: ( ".block-editor-url-input__suggestions": 30, ".edit-post-layout__footer": 30, ".edit-post-editor-regions__header": 30, + ".edit-site-header": 62, ".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 @@ -67,6 +68,7 @@ $z-layers: ( // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } ".edit-post-editor-regions__sidebar": 100000, + ".edit-site-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 @@ -76,6 +78,7 @@ $z-layers: ( // Show sidebar in greater than small viewports above editor related elements // but bellow #adminmenuback { z-index: 100 } ".edit-post-editor-regions__sidebar {greater than small}": 90, + ".edit-site-sidebar {greater than small}": 90, ".edit-widgets-sidebar {greater than small}": 90, // Show notices below expanded editor bar diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 3a262e9464a49b..7f9029f5fb493f 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -21,7 +21,16 @@ "module": "build-module/index.js", "react-native": "src/index", "dependencies": { - "@babel/runtime": "^7.4.4" + "@babel/runtime": "^7.4.4", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/block-library": "file:../block-library", + "@wordpress/components": "file:../components", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/i18n": "file:../i18n", + "@wordpress/media-utils": "file:../media-utils", + "@wordpress/notices": "file:../notices" }, "publishConfig": { "access": "public" diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js new file mode 100644 index 00000000000000..c049e78e0c51da --- /dev/null +++ b/packages/edit-site/src/components/block-editor/index.js @@ -0,0 +1,66 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { useMemo, useState } from '@wordpress/element'; +import { uploadMedia } from '@wordpress/media-utils'; +import { + BlockEditorProvider, + BlockEditorKeyboardShortcuts, + BlockInspector, + WritingFlow, + ObserveTyping, + BlockList, + ButtonBlockerAppender, +} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import Sidebar from '../sidebar'; + +export default function BlockEditor( { settings: _settings } ) { + const canUserCreateMedia = useSelect( ( select ) => { + const _canUserCreateMedia = select( 'core' ).canUser( 'create', 'media' ); + return _canUserCreateMedia || _canUserCreateMedia !== false; + }, [] ); + const settings = useMemo( () => { + if ( ! canUserCreateMedia ) { + return _settings; + } + return { + ..._settings, + mediaUpload( { onError, ...rest } ) { + uploadMedia( { + wpAllowedMimeTypes: _settings.allowedMimeTypes, + onError: ( { message } ) => onError( message ), + ...rest, + } ); + }, + }; + }, [ canUserCreateMedia, _settings ] ); + const [ blocks, setBlocks ] = useState( [] ); + return ( + + + + + +
+ + + + + +
+ + ); +} diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss new file mode 100644 index 00000000000000..7cbbfee163eeca --- /dev/null +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -0,0 +1,19 @@ +.editor-styles-wrapper { + -webkit-overflow-scrolling: touch; + background: $white; + height: calc(100% - #{$header-height}); + left: 0; + overflow: auto; + position: absolute; + top: $header-height; + width: 100%; + + @include break-small { + width: calc(100% - #{$sidebar-width}); + } +} + +.edit-site-block-editor__block-list { + padding-bottom: $grid-size-xlarge; + padding-top: $grid-size-xlarge + 5; +} diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js new file mode 100644 index 00000000000000..f7f0ef0286b10c --- /dev/null +++ b/packages/edit-site/src/components/editor/index.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import { + SlotFillProvider, + DropZoneProvider, + Popover, + navigateRegions, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import Notices from '../notices'; +import Header from '../header'; +import Sidebar from '../sidebar'; +import BlockEditor from '../block-editor'; + +function Editor( { settings } ) { + return ( + + + +
+ + + + + + ); +} + +export default navigateRegions( Editor ); diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js new file mode 100644 index 00000000000000..2b89acdafa8fbc --- /dev/null +++ b/packages/edit-site/src/components/header/index.js @@ -0,0 +1,19 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +export default function Header() { + return ( +
+

+ { __( 'Site Editor' ) } { __( '(beta)' ) } +

+
+ ); +} diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss new file mode 100644 index 00000000000000..f280aa258020d4 --- /dev/null +++ b/packages/edit-site/src/components/header/style.scss @@ -0,0 +1,33 @@ +.edit-site-header { + align-items: center; + background: $white; + border-bottom: 1px solid $light-gray-500; + display: flex; + height: $header-height; + justify-content: space-between; + left: 0; + // Stick the toolbar to the top, because the admin bar is not fixed on mobile. + position: sticky; + right: 0; + top: 0; + z-index: z-index(".edit-site-header"); + + // On mobile, the main content area has to scroll, + // otherwise you can invoke the over-scroll bounce on the non-scrolling container. + @include break-small { + padding: $grid-size; + position: fixed; + top: $admin-bar-height-big; + } + + @include break-medium() { + top: $admin-bar-height; + } +} + +@include editor-left(".edit-site-header"); + +.edit-site-header__title { + font-size: 16px; + padding: 0 20px; +} diff --git a/packages/edit-site/src/components/notices/index.js b/packages/edit-site/src/components/notices/index.js new file mode 100644 index 00000000000000..8243f4b13cf84a --- /dev/null +++ b/packages/edit-site/src/components/notices/index.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { SnackbarList } from '@wordpress/components'; + +export default function Notices() { + const notices = useSelect( + ( select ) => + select( 'core/notices' ) + .getNotices() + .filter( ( notice ) => notice.type === 'snackbar' ), + [] + ); + const { removeNotice } = useDispatch( 'core/notices' ); + return ( + + ); +} diff --git a/packages/edit-site/src/components/notices/style.scss b/packages/edit-site/src/components/notices/style.scss new file mode 100644 index 00000000000000..ff39512b005186 --- /dev/null +++ b/packages/edit-site/src/components/notices/style.scss @@ -0,0 +1,9 @@ +.edit-site-notices { + bottom: 20px; + padding-left: 16px; + padding-right: 16px; + position: fixed; + right: 0; +} + +@include editor-left(".edit-site-notices"); diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js new file mode 100644 index 00000000000000..8b310e80d0231c --- /dev/null +++ b/packages/edit-site/src/components/sidebar/index.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { createSlotFill, Panel } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( + 'EditSiteSidebarInspector' +); + +function Sidebar() { + return ( +
+ + + +
+ ); +} + +Sidebar.InspectorFill = InspectorFill; + +export default Sidebar; diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss new file mode 100644 index 00000000000000..23347a605e338e --- /dev/null +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -0,0 +1,46 @@ +.edit-site-sidebar { + background: $white; + border-left: $border-width solid $light-gray-500; + bottom: 0; + color: $dark-gray-500; + height: 100vh; + overflow: hidden; + position: fixed; + right: 0; + top: 0; + width: $sidebar-width; + z-index: z-index(".edit-site-sidebar"); + + @include break-small() { + -webkit-overflow-scrolling: touch; + height: auto; + overflow: auto; + top: $admin-bar-height-big + $header-height; + z-index: z-index(".edit-site-sidebar {greater than small}"); + } + + @include break-medium() { + top: $admin-bar-height + $header-height; + } + + // Temporarily disable the sidebar on mobile. + display: none; + @include break-small() { + display: block; + } + + > .components-panel { + border-left: 0; + border-right: 0; + margin-bottom: -1px; + margin-top: -1px; + + > .components-panel__header { + background: $light-gray-200; + } + } + + .block-editor-block-inspector__card { + margin: 0; + } +} diff --git a/packages/edit-site/src/hooks/components.js b/packages/edit-site/src/hooks/components.js new file mode 100644 index 00000000000000..614dfe62db2f98 --- /dev/null +++ b/packages/edit-site/src/hooks/components.js @@ -0,0 +1,11 @@ +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; +import { MediaUpload } from '@wordpress/media-utils'; + +addFilter( + 'editor.MediaUpload', + 'core/edit-site/components/media-upload', + () => MediaUpload +); diff --git a/packages/edit-site/src/hooks/index.js b/packages/edit-site/src/hooks/index.js new file mode 100644 index 00000000000000..c6cbc1d173e861 --- /dev/null +++ b/packages/edit-site/src/hooks/index.js @@ -0,0 +1,4 @@ +/** + * Internal dependencies + */ +import './components'; diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index a1b146a9a64ed6..369f1df5801020 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -1 +1,29 @@ -export function initialize() {} +/** + * WordPress dependencies + */ +import '@wordpress/notices'; +import { + registerCoreBlocks, + __experimentalRegisterExperimentalCoreBlocks, +} from '@wordpress/block-library'; +import { render } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import './hooks'; +import Editor from './components/editor'; + +/** + * Initializes the site editor screen. + * + * @param {string} id ID of the root element to render the screen in. + * @param {Object} settings Editor settings. + */ +export function initialize( id, settings ) { + registerCoreBlocks(); + if ( process.env.GUTENBERG_PHASE === 2 ) { + __experimentalRegisterExperimentalCoreBlocks( settings ); + } + render( , document.getElementById( id ) ); +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 5fed71585158ab..4b1041c3d05f5d 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -1,9 +1,58 @@ +@import "./components/block-editor/style.scss"; +@import "./components/header/style.scss"; +@import "./components/notices/style.scss"; +@import "./components/sidebar/style.scss"; + // In order to use mix-blend-mode, this element needs to have an explicitly set background-color. // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations. html.wp-toolbar { background: $white; } -body.gutenberg_page_edit-site { - @include wp-admin-reset( ".edit-site" ); +body.gutenberg_page_gutenberg-edit-site { + @include wp-admin-reset(".edit-site"); +} + +.edit-site, +// The modals are shown outside the .edit-site wrapper, they need these styles. +.components-modal__frame { + @include reset; +} + +.edit-site { + // On mobile the main content area has to scroll, otherwise you can invoke + // the over-scroll bounce on the non-scrolling container, for a bad experience. + @include break-small { + bottom: 0; + left: 0; + min-height: calc(100vh - #{$admin-bar-height-big}); + position: absolute; + right: 0; + top: 0; + } + + // The WP header height changes at this breakpoint. + @include break-medium { + min-height: calc(100vh - #{$admin-bar-height}); + } + + > .components-navigate-regions { + height: 100%; + } +} + +/** + * Animations + */ + +// These keyframes should not be part of the _animations.scss mixins file. +// Because keyframe animations can't be defined as mixins properly, they are duplicated. +// Since they are intended only for the editor, we add them here instead. +@keyframes edit-post__fade-in-animation { + from { + opacity: 0; + } + to { + opacity: 1; + } }