From a1afab20d05f6e003cc6ef829fc323fe1a0515b6 Mon Sep 17 00:00:00 2001 From: epiqueras Date: Tue, 10 Dec 2019 10:42:11 -0800 Subject: [PATCH 1/4] Edit Site: Bootstrap package. --- docs/manifest-devhub.json | 6 ++++++ packages/edit-site/.npmrc | 1 + packages/edit-site/CHANGELOG.md | 5 +++++ packages/edit-site/README.md | 32 +++++++++++++++++++++++++++++++ packages/edit-site/package.json | 29 ++++++++++++++++++++++++++++ packages/edit-site/src/index.js | 1 + packages/edit-site/src/style.scss | 5 +++++ 7 files changed, 79 insertions(+) create mode 100644 packages/edit-site/.npmrc create mode 100644 packages/edit-site/CHANGELOG.md create mode 100644 packages/edit-site/README.md create mode 100644 packages/edit-site/package.json create mode 100644 packages/edit-site/src/index.js create mode 100644 packages/edit-site/src/style.scss diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json index fc1b3c700b373c..a39279c1ae8736 100644 --- a/docs/manifest-devhub.json +++ b/docs/manifest-devhub.json @@ -1265,6 +1265,12 @@ "markdown_source": "../packages/edit-post/README.md", "parent": "packages" }, + { + "title": "@wordpress/edit-site", + "slug": "packages-edit-site", + "markdown_source": "../packages/edit-site/README.md", + "parent": "packages" + }, { "title": "@wordpress/edit-widgets", "slug": "packages-edit-widgets", diff --git a/packages/edit-site/.npmrc b/packages/edit-site/.npmrc new file mode 100644 index 00000000000000..43c97e719a5a82 --- /dev/null +++ b/packages/edit-site/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md new file mode 100644 index 00000000000000..e81ce0f7940fd3 --- /dev/null +++ b/packages/edit-site/CHANGELOG.md @@ -0,0 +1,5 @@ +## Master + +### New Feature + +- Initial version of the module. diff --git a/packages/edit-site/README.md b/packages/edit-site/README.md new file mode 100644 index 00000000000000..fc871f3224b69f --- /dev/null +++ b/packages/edit-site/README.md @@ -0,0 +1,32 @@ +# Edit Site + +Edit Site Page Module for WordPress. + +> This package is meant to be used only with WordPress core. Feel free to use it in your own project but please keep in mind that it might never get fully documented. + +## Installation + +```bash +npm install @wordpress/edit-site +``` + +## Usage + +```js +/** + * WordPress dependencies + */ +import { initialize } from '@wordpress/edit-site'; + +/** + * Internal dependencies + */ +import blockEditorSettings from './block-editor-settings'; + +initialize( '#editor-root', blockEditorSettings ); + +``` + +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ + +

Code is Poetry.

diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json new file mode 100644 index 00000000000000..3a262e9464a49b --- /dev/null +++ b/packages/edit-site/package.json @@ -0,0 +1,29 @@ +{ + "name": "@wordpress/edit-site", + "version": "1.0.0-beta.0", + "private": true, + "description": "Edit Site Page module for WordPress.", + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/edit-site/README.md", + "repository": { + "type": "git", + "url": "https://github.com/WordPress/gutenberg.git", + "directory": "packages/edit-site" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "main": "build/index.js", + "module": "build-module/index.js", + "react-native": "src/index", + "dependencies": { + "@babel/runtime": "^7.4.4" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js new file mode 100644 index 00000000000000..a1b146a9a64ed6 --- /dev/null +++ b/packages/edit-site/src/index.js @@ -0,0 +1 @@ +export function initialize() {} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss new file mode 100644 index 00000000000000..b13eb919867f07 --- /dev/null +++ b/packages/edit-site/src/style.scss @@ -0,0 +1,5 @@ +// 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; +} From 024e709e5ffc1bfae41753912eebe6a3ed2893b5 Mon Sep 17 00:00:00 2001 From: epiqueras Date: Tue, 10 Dec 2019 11:25:07 -0800 Subject: [PATCH 2/4] Edit Site: Link package. --- package-lock.json | 6 ++++++ package.json | 1 + 2 files changed, 7 insertions(+) diff --git a/package-lock.json b/package-lock.json index e9d3e71fa5c1ec..0f83635aca09b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7896,6 +7896,12 @@ "rememo": "^3.0.0" } }, + "@wordpress/edit-site": { + "version": "file:packages/edit-site", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, "@wordpress/edit-widgets": { "version": "file:packages/edit-widgets", "requires": { diff --git a/package.json b/package.json index e6716c7288637b..ea18fd2bb743f9 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@wordpress/dom": "file:packages/dom", "@wordpress/dom-ready": "file:packages/dom-ready", "@wordpress/edit-post": "file:packages/edit-post", + "@wordpress/edit-site": "file:packages/edit-site", "@wordpress/edit-widgets": "file:packages/edit-widgets", "@wordpress/editor": "file:packages/editor", "@wordpress/element": "file:packages/element", From 7aa179a4d7c1b23fdc9ab1693df6059327e783cd Mon Sep 17 00:00:00 2001 From: epiqueras Date: Tue, 10 Dec 2019 12:34:29 -0800 Subject: [PATCH 3/4] Edit Site: Load assets in new Edit Site Page. --- gutenberg.php | 30 +++++++--- lib/client-assets.php | 13 ++++ lib/edit-site-page.php | 98 +++++++++++++++++++++++++++++++ lib/load.php | 1 + lib/widgets.php | 7 ++- packages/edit-site/src/style.scss | 4 ++ 6 files changed, 143 insertions(+), 10 deletions(-) create mode 100644 lib/edit-site-page.php diff --git a/gutenberg.php b/gutenberg.php index 0b001147c178e0..c60878369bb7fb 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -43,15 +43,27 @@ function gutenberg_menu() { 'gutenberg' ); - if ( get_option( 'gutenberg-experiments' ) && array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) ) { - add_submenu_page( - 'gutenberg', - __( 'Widgets (beta)', 'gutenberg' ), - __( 'Widgets (beta)', 'gutenberg' ), - 'edit_theme_options', - 'gutenberg-widgets', - 'the_gutenberg_widgets' - ); + if ( get_option( 'gutenberg-experiments' ) ) { + if ( array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) ) { + add_submenu_page( + 'gutenberg', + __( 'Widgets (beta)', 'gutenberg' ), + __( 'Widgets (beta)', 'gutenberg' ), + 'edit_theme_options', + 'gutenberg-widgets', + 'the_gutenberg_widgets' + ); + } + if ( array_key_exists( 'gutenberg-full-site-editing', get_option( 'gutenberg-experiments' ) ) ) { + add_submenu_page( + 'gutenberg', + __( 'Site Editor (beta)', 'gutenberg' ), + __( 'Site Editor (beta)', 'gutenberg' ), + 'edit_theme_options', + 'gutenberg-edit-site', + 'gutenberg_edit_site_page' + ); + } } if ( current_user_can( 'edit_posts' ) ) { diff --git a/lib/client-assets.php b/lib/client-assets.php index 44b2766647d075..c403d2bce26b79 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -252,6 +252,10 @@ function gutenberg_register_packages_scripts( &$scripts ) { case 'wp-edit-post': array_push( $dependencies, 'media-models', 'media-views', 'postbox' ); break; + + case 'wp-edit-site': + array_push( $dependencies, 'wp-dom-ready' ); + break; } // Get the path from Gutenberg directory as expected by `gutenberg_url`. @@ -375,6 +379,15 @@ function gutenberg_register_packages_styles( &$styles ) { ); $styles->add_data( 'wp-list-reusable-block', 'rtl', 'replace' ); + gutenberg_override_style( + $styles, + 'wp-edit-site', + gutenberg_url( 'build/edit-site/style.css' ), + array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ), + filemtime( gutenberg_dir_path() . 'build/edit-site/style.css' ) + ); + $styles->add_data( 'wp-edit-site', 'rtl', 'replace' ); + gutenberg_override_style( $styles, 'wp-edit-widgets', diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php new file mode 100644 index 00000000000000..bdd467c2f5913d --- /dev/null +++ b/lib/edit-site-page.php @@ -0,0 +1,98 @@ + +
+
+ __( 'Thumbnail', 'gutenberg' ), + 'medium' => __( 'Medium', 'gutenberg' ), + 'large' => __( 'Large', 'gutenberg' ), + 'full' => __( 'Full Size', 'gutenberg' ), + ) + ); + $available_image_sizes = array(); + foreach ( $image_size_names as $image_size_slug => $image_size_name ) { + $available_image_sizes[] = array( + 'slug' => $image_size_slug, + 'name' => $image_size_name, + ); + } + + $settings = array( + 'disableCustomColors' => get_theme_support( 'disable-custom-colors' ), + 'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ), + 'imageSizes' => $available_image_sizes, + 'isRTL' => is_rtl(), + 'maxUploadFileSize' => $max_upload_size, + ); + + list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' ); + list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' ); + if ( false !== $color_palette ) { + $settings['colors'] = $color_palette; + } + if ( false !== $font_sizes ) { + $settings['fontSizes'] = $font_sizes; + } + + // Initialize editor. + wp_add_inline_script( + 'wp-edit-site', + sprintf( + 'wp.domReady( function() { + wp.editSite.initialize( "edit-site-editor", %s ); + } );', + wp_json_encode( gutenberg_experiments_editor_settings( $settings ) ) + ) + ); + + // Preload server-registered block schemas. + wp_add_inline_script( + 'wp-blocks', + 'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');' + ); + + wp_enqueue_script( 'wp-edit-site' ); + wp_enqueue_script( 'wp-format-library' ); + wp_enqueue_style( 'wp-edit-site' ); + wp_enqueue_style( 'wp-format-library' ); +} +add_action( 'admin_enqueue_scripts', 'gutenberg_edit_site_init' ); diff --git a/lib/load.php b/lib/load.php index d8dd9abb730133..7076be29f63127 100644 --- a/lib/load.php +++ b/lib/load.php @@ -63,3 +63,4 @@ function gutenberg_is_experiment_enabled( $name ) { require dirname( __FILE__ ) . '/widgets-page.php'; require dirname( __FILE__ ) . '/experiments-page.php'; require dirname( __FILE__ ) . '/customizer.php'; +require dirname( __FILE__ ) . '/edit-site-page.php'; diff --git a/lib/widgets.php b/lib/widgets.php index a2dbf475ac1a63..d5f11f602bd3b9 100644 --- a/lib/widgets.php +++ b/lib/widgets.php @@ -17,7 +17,12 @@ function gutenberg_is_block_editor() { return false; } $screen = get_current_screen(); - return ! empty( $screen ) && ( $screen->is_block_editor() || 'gutenberg_page_gutenberg-widgets' === $screen->id ); + return ! empty( $screen ) && + ( + $screen->is_block_editor() || + 'gutenberg_page_gutenberg-widgets' === $screen->id || + 'gutenberg_page_gutenberg-edit-site' === $screen->id + ); } /** diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index b13eb919867f07..5fed71585158ab 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -3,3 +3,7 @@ html.wp-toolbar { background: $white; } + +body.gutenberg_page_edit-site { + @include wp-admin-reset( ".edit-site" ); +} From 959031773f49fd0185f47f4afcaff136f1695ae9 Mon Sep 17 00:00:00 2001 From: epiqueras Date: Tue, 10 Dec 2019 16:37:16 -0800 Subject: [PATCH 4/4] 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 0f83635aca09b0..d4c6b8bc293f3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7899,7 +7899,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 535dbd99f7c470..8d8f642e9c2fc6 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 @@ -66,6 +67,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 @@ -75,6 +77,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; + } }