Skip to content

Commit d3d1747

Browse files
epiquerasepiqueras
authored
Edit Site: Add package with barebones site editor screen. (WordPress#19054)
* Edit Site: Bootstrap package. * Edit Site: Link package. * Edit Site: Load assets in new Edit Site Page. * Edit Site: Render basic editor.
1 parent 846afa7 commit d3d1747

26 files changed

+618
-10
lines changed

‎docs/manifest-devhub.json

+6
Original file line numberDiff line numberDiff line change
@@ -1265,6 +1265,12 @@
12651265
"markdown_source": "../packages/edit-post/README.md",
12661266
"parent": "packages"
12671267
},
1268+
{
1269+
"title": "@wordpress/edit-site",
1270+
"slug": "packages-edit-site",
1271+
"markdown_source": "../packages/edit-site/README.md",
1272+
"parent": "packages"
1273+
},
12681274
{
12691275
"title": "@wordpress/edit-widgets",
12701276
"slug": "packages-edit-widgets",

‎gutenberg.php

+21-9
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,27 @@ function gutenberg_menu() {
4343
'gutenberg'
4444
);
4545

46-
if ( get_option( 'gutenberg-experiments' ) && array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) ) {
47-
add_submenu_page(
48-
'gutenberg',
49-
__( 'Widgets (beta)', 'gutenberg' ),
50-
__( 'Widgets (beta)', 'gutenberg' ),
51-
'edit_theme_options',
52-
'gutenberg-widgets',
53-
'the_gutenberg_widgets'
54-
);
46+
if ( get_option( 'gutenberg-experiments' ) ) {
47+
if ( array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) ) {
48+
add_submenu_page(
49+
'gutenberg',
50+
__( 'Widgets (beta)', 'gutenberg' ),
51+
__( 'Widgets (beta)', 'gutenberg' ),
52+
'edit_theme_options',
53+
'gutenberg-widgets',
54+
'the_gutenberg_widgets'
55+
);
56+
}
57+
if ( array_key_exists( 'gutenberg-full-site-editing', get_option( 'gutenberg-experiments' ) ) ) {
58+
add_submenu_page(
59+
'gutenberg',
60+
__( 'Site Editor (beta)', 'gutenberg' ),
61+
__( 'Site Editor (beta)', 'gutenberg' ),
62+
'edit_theme_options',
63+
'gutenberg-edit-site',
64+
'gutenberg_edit_site_page'
65+
);
66+
}
5567
}
5668

5769
if ( current_user_can( 'edit_posts' ) ) {

‎lib/client-assets.php

+13
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,10 @@ function gutenberg_register_packages_scripts( &$scripts ) {
271271
case 'wp-edit-post':
272272
array_push( $dependencies, 'media-models', 'media-views', 'postbox' );
273273
break;
274+
275+
case 'wp-edit-site':
276+
array_push( $dependencies, 'wp-dom-ready' );
277+
break;
274278
}
275279

276280
// Get the path from Gutenberg directory as expected by `gutenberg_url`.
@@ -394,6 +398,15 @@ function gutenberg_register_packages_styles( &$styles ) {
394398
);
395399
$styles->add_data( 'wp-list-reusable-block', 'rtl', 'replace' );
396400

401+
gutenberg_override_style(
402+
$styles,
403+
'wp-edit-site',
404+
gutenberg_url( 'build/edit-site/style.css' ),
405+
array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ),
406+
filemtime( gutenberg_dir_path() . 'build/edit-site/style.css' )
407+
);
408+
$styles->add_data( 'wp-edit-site', 'rtl', 'replace' );
409+
397410
gutenberg_override_style(
398411
$styles,
399412
'wp-edit-widgets',

‎lib/edit-site-page.php

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<?php
2+
/**
3+
* Bootstraping the Gutenberg Edit Site Page.
4+
*
5+
* @package gutenberg
6+
*/
7+
8+
/**
9+
* The main entry point for the Gutenberg Edit Site Page.
10+
*
11+
* @since 7.2.0
12+
*/
13+
function gutenberg_edit_site_page() {
14+
?>
15+
<div
16+
id="edit-site-editor"
17+
class="edit-site"
18+
>
19+
</div>
20+
<?php
21+
}
22+
23+
/**
24+
* Initialize the Gutenberg Edit Site Page.
25+
*
26+
* @since 7.2.0
27+
*
28+
* @param string $hook Page.
29+
*/
30+
function gutenberg_edit_site_init( $hook ) {
31+
if ( 'gutenberg_page_gutenberg-edit-site' !== $hook ) {
32+
return;
33+
}
34+
35+
// Get editor settings.
36+
$max_upload_size = wp_max_upload_size();
37+
if ( ! $max_upload_size ) {
38+
$max_upload_size = 0;
39+
}
40+
41+
// This filter is documented in wp-admin/includes/media.php.
42+
$image_size_names = apply_filters(
43+
'image_size_names_choose',
44+
array(
45+
'thumbnail' => __( 'Thumbnail', 'gutenberg' ),
46+
'medium' => __( 'Medium', 'gutenberg' ),
47+
'large' => __( 'Large', 'gutenberg' ),
48+
'full' => __( 'Full Size', 'gutenberg' ),
49+
)
50+
);
51+
$available_image_sizes = array();
52+
foreach ( $image_size_names as $image_size_slug => $image_size_name ) {
53+
$available_image_sizes[] = array(
54+
'slug' => $image_size_slug,
55+
'name' => $image_size_name,
56+
);
57+
}
58+
59+
$settings = array(
60+
'disableCustomColors' => get_theme_support( 'disable-custom-colors' ),
61+
'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
62+
'imageSizes' => $available_image_sizes,
63+
'isRTL' => is_rtl(),
64+
'maxUploadFileSize' => $max_upload_size,
65+
);
66+
67+
list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
68+
list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );
69+
if ( false !== $color_palette ) {
70+
$settings['colors'] = $color_palette;
71+
}
72+
if ( false !== $font_sizes ) {
73+
$settings['fontSizes'] = $font_sizes;
74+
}
75+
76+
// Initialize editor.
77+
wp_add_inline_script(
78+
'wp-edit-site',
79+
sprintf(
80+
'wp.domReady( function() {
81+
wp.editSite.initialize( "edit-site-editor", %s );
82+
} );',
83+
wp_json_encode( gutenberg_experiments_editor_settings( $settings ) )
84+
)
85+
);
86+
87+
// Preload server-registered block schemas.
88+
wp_add_inline_script(
89+
'wp-blocks',
90+
'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
91+
);
92+
93+
wp_enqueue_script( 'wp-edit-site' );
94+
wp_enqueue_script( 'wp-format-library' );
95+
wp_enqueue_style( 'wp-edit-site' );
96+
wp_enqueue_style( 'wp-format-library' );
97+
}
98+
add_action( 'admin_enqueue_scripts', 'gutenberg_edit_site_init' );

‎lib/load.php

+1
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,4 @@ function gutenberg_is_experiment_enabled( $name ) {
6363
require dirname( __FILE__ ) . '/widgets-page.php';
6464
require dirname( __FILE__ ) . '/experiments-page.php';
6565
require dirname( __FILE__ ) . '/customizer.php';
66+
require dirname( __FILE__ ) . '/edit-site-page.php';

‎lib/widgets.php

+6-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,12 @@ function gutenberg_is_block_editor() {
1717
return false;
1818
}
1919
$screen = get_current_screen();
20-
return ! empty( $screen ) && ( $screen->is_block_editor() || 'gutenberg_page_gutenberg-widgets' === $screen->id );
20+
return ! empty( $screen ) &&
21+
(
22+
$screen->is_block_editor() ||
23+
'gutenberg_page_gutenberg-widgets' === $screen->id ||
24+
'gutenberg_page_gutenberg-edit-site' === $screen->id
25+
);
2126
}
2227

2328
/**

‎package-lock.json

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@wordpress/dom": "file:packages/dom",
4040
"@wordpress/dom-ready": "file:packages/dom-ready",
4141
"@wordpress/edit-post": "file:packages/edit-post",
42+
"@wordpress/edit-site": "file:packages/edit-site",
4243
"@wordpress/edit-widgets": "file:packages/edit-widgets",
4344
"@wordpress/editor": "file:packages/editor",
4445
"@wordpress/element": "file:packages/element",

‎packages/base-styles/_z-index.scss

+3
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ $z-layers: (
2626
".block-editor-url-input__suggestions": 30,
2727
".edit-post-layout__footer": 30,
2828
".edit-post-editor-regions__header": 30,
29+
".edit-site-header": 62,
2930
".edit-widgets-header": 30,
3031
".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
3132
".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
@@ -65,6 +66,7 @@ $z-layers: (
6566
// Show sidebar above wp-admin navigation bar for mobile viewports:
6667
// #wpadminbar { z-index: 99999 }
6768
".edit-post-editor-regions__sidebar": 100000,
69+
".edit-site-sidebar": 100000,
6870
".edit-widgets-sidebar": 100000,
6971
".edit-post-layout .edit-post-post-publish-panel": 100001,
7072
// For larger views, the wp-admin navbar dropdown should be at top of
@@ -74,6 +76,7 @@ $z-layers: (
7476
// Show sidebar in greater than small viewports above editor related elements
7577
// but bellow #adminmenuback { z-index: 100 }
7678
".edit-post-editor-regions__sidebar {greater than small}": 90,
79+
".edit-site-sidebar {greater than small}": 90,
7780
".edit-widgets-sidebar {greater than small}": 90,
7881

7982
// Show notices below expanded editor bar

‎packages/edit-site/.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎packages/edit-site/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## Master
2+
3+
### New Feature
4+
5+
- Initial version of the module.

‎packages/edit-site/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Edit Site
2+
3+
Edit Site Page Module for WordPress.
4+
5+
> 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.
6+
7+
## Installation
8+
9+
```bash
10+
npm install @wordpress/edit-site
11+
```
12+
13+
## Usage
14+
15+
```js
16+
/**
17+
* WordPress dependencies
18+
*/
19+
import { initialize } from '@wordpress/edit-site';
20+
21+
/**
22+
* Internal dependencies
23+
*/
24+
import blockEditorSettings from './block-editor-settings';
25+
26+
initialize( '#editor-root', blockEditorSettings );
27+
28+
```
29+
30+
_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)._
31+
32+
<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

‎packages/edit-site/package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@wordpress/edit-site",
3+
"version": "1.0.0-beta.0",
4+
"private": true,
5+
"description": "Edit Site Page module for WordPress.",
6+
"author": "The WordPress Contributors",
7+
"license": "GPL-2.0-or-later",
8+
"keywords": [
9+
"wordpress"
10+
],
11+
"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/edit-site/README.md",
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/WordPress/gutenberg.git",
15+
"directory": "packages/edit-site"
16+
},
17+
"bugs": {
18+
"url": "https://github.com/WordPress/gutenberg/issues"
19+
},
20+
"main": "build/index.js",
21+
"module": "build-module/index.js",
22+
"react-native": "src/index",
23+
"dependencies": {
24+
"@babel/runtime": "^7.4.4",
25+
"@wordpress/block-editor": "file:../block-editor",
26+
"@wordpress/block-library": "file:../block-library",
27+
"@wordpress/components": "file:../components",
28+
"@wordpress/data": "file:../data",
29+
"@wordpress/element": "file:../element",
30+
"@wordpress/hooks": "file:../hooks",
31+
"@wordpress/i18n": "file:../i18n",
32+
"@wordpress/media-utils": "file:../media-utils",
33+
"@wordpress/notices": "file:../notices"
34+
},
35+
"publishConfig": {
36+
"access": "public"
37+
}
38+
}

‎packages/edit-site/src/components/block-editor/index.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useSelect } from '@wordpress/data';
5+
import { useMemo, useState } from '@wordpress/element';
6+
import { uploadMedia } from '@wordpress/media-utils';
7+
import {
8+
BlockEditorProvider,
9+
BlockEditorKeyboardShortcuts,
10+
BlockInspector,
11+
WritingFlow,
12+
ObserveTyping,
13+
BlockList,
14+
ButtonBlockerAppender,
15+
} from '@wordpress/block-editor';
16+
17+
/**
18+
* Internal dependencies
19+
*/
20+
import Sidebar from '../sidebar';
21+
22+
export default function BlockEditor( { settings: _settings } ) {
23+
const canUserCreateMedia = useSelect( ( select ) => {
24+
const _canUserCreateMedia = select( 'core' ).canUser( 'create', 'media' );
25+
return _canUserCreateMedia || _canUserCreateMedia !== false;
26+
}, [] );
27+
const settings = useMemo( () => {
28+
if ( ! canUserCreateMedia ) {
29+
return _settings;
30+
}
31+
return {
32+
..._settings,
33+
mediaUpload( { onError, ...rest } ) {
34+
uploadMedia( {
35+
wpAllowedMimeTypes: _settings.allowedMimeTypes,
36+
onError: ( { message } ) => onError( message ),
37+
...rest,
38+
} );
39+
},
40+
};
41+
}, [ canUserCreateMedia, _settings ] );
42+
const [ blocks, setBlocks ] = useState( [] );
43+
return (
44+
<BlockEditorProvider
45+
settings={ settings }
46+
value={ blocks }
47+
onInput={ setBlocks }
48+
onChange={ setBlocks }
49+
>
50+
<BlockEditorKeyboardShortcuts />
51+
<Sidebar.InspectorFill>
52+
<BlockInspector />
53+
</Sidebar.InspectorFill>
54+
<div className="editor-styles-wrapper">
55+
<WritingFlow>
56+
<ObserveTyping>
57+
<BlockList
58+
className="edit-site-block-editor__block-list"
59+
renderAppender={ ButtonBlockerAppender }
60+
/>
61+
</ObserveTyping>
62+
</WritingFlow>
63+
</div>
64+
</BlockEditorProvider>
65+
);
66+
}

0 commit comments

Comments
 (0)