Bootstrap the widgets page playground (#13912)

.eslintrc.js

@@ -87,6 +87,10 @@ module.exports = {
 				selector: 'ImportDeclaration[source.value=/^edit-post(\\u002F|$)/]',
 				message: 'Use @wordpress/edit-post as import path instead.',
 			},
+			{
+				selector: 'ImportDeclaration[source.value=/^edit-widgets(\\u002F|$)/]',
+				message: 'Use @wordpress/edit-widgets as import path instead.',
+			},
 			{
 				selector: 'ImportDeclaration[source.value=/^viewport(\\u002F|$)/]',
 				message: 'Use @wordpress/viewport as import path instead.',

.github/CODEOWNERS

@@ -18,6 +18,9 @@
 /packages/list-reusable-blocks                  @youknowriad @aduth @noisysocks
 /packages/shortcode                             @youknowriad @aduth
 
+# Widgets
+/packages/edit-widgets                          @youknowriad
+
 # Tooling
 /bin                                            @youknowriad @gziolo @aduth @ntwb @nerrad @ajitbohra
 /packages/babel-plugin-import-jsx-pragma        @youknowriad @gziolo @aduth @ntwb @nerrad @ajitbohra

docs/manifest.json

@@ -659,6 +659,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/edit-post/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/edit-widgets",
+		"slug": "packages-edit-widgets",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/edit-widgets/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/editor",
 		"slug": "packages-editor",

gutenberg.php

@@ -76,6 +76,15 @@ function gutenberg_menu() {
 		'gutenberg'
 	);
 
+	add_submenu_page(
+		'gutenberg',
+		__( 'Widgets (beta)', 'gutenberg' ),
+		__( 'Widgets (beta)', 'gutenberg' ),
+		'edit_theme_options',
+		'gutenberg-widgets',
+		'the_gutenberg_widgets'
+	);
+
 	if ( current_user_can( 'edit_posts' ) ) {
 		$submenu['gutenberg'][] = array(
 			__( 'Support', 'gutenberg' ),

lib/client-assets.php

@@ -486,6 +486,14 @@ function gutenberg_register_scripts_and_styles() {
 	);
 	wp_style_add_data( 'wp-list-reusable-block', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		'wp-edit-widgets',
+		gutenberg_url( 'build/edit-widgets/style.css' ),
+		array(),
+		filemtime( gutenberg_dir_path() . 'build/edit-widgets/style.css' )
+	);
+	wp_style_add_data( 'wp-edit-widgets', 'rtl', 'replace' );
+
 	if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) {
 		$live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD;
 

lib/load.php

@@ -23,6 +23,7 @@
 require dirname( __FILE__ ) . '/i18n.php';
 require dirname( __FILE__ ) . '/register.php';
 require dirname( __FILE__ ) . '/demo.php';
+require dirname( __FILE__ ) . '/widgets-page.php';
 
 // Register server-side code for individual blocks.
 if ( ! function_exists( 'render_block_core_archives' ) ) {

lib/packages-dependencies.php

@@ -130,6 +130,9 @@
 		'wp-url',
 		'wp-viewport',
 	),
+	'wp-edit-widgets'                       => array(
+		'wp-element',
+	),
 	'wp-editor'                             => array(
 		'lodash',
 		'wp-a11y',

lib/widgets-page.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Bootstraping the Gutenberg widgets page.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * The main entry point for the Gutenberg widgets page.
+ *
+ * @since 5.2.0
+ */
+function the_gutenberg_widgets() {
+	?>
+	<div class="blocks-widgets-container">
+	</div>
+	<?php
+}
+
+/**
+ * Initialize the Gutenberg widgets page.
+ *
+ * @since 5.2.0
+ *
+ * @param string $hook Page.
+ */
+function gutenberg_widgets_init( $hook ) {
+	if ( 'gutenberg_page_gutenberg-widgets' !== $hook ) {
+			return;
+	}
+
+	wp_enqueue_script( 'wp-edit-widgets' );
+	wp_enqueue_style( 'wp-edit-widgets' );
+}
+add_action( 'admin_enqueue_scripts', 'gutenberg_widgets_init' );

package.json

@@ -32,6 +32,7 @@
 		"@wordpress/dom": "file:packages/dom",
 		"@wordpress/dom-ready": "file:packages/dom-ready",
 		"@wordpress/edit-post": "file:packages/edit-post",
+		"@wordpress/edit-widgets": "file:packages/edit-widgets",
 		"@wordpress/editor": "file:packages/editor",
 		"@wordpress/element": "file:packages/element",
 		"@wordpress/escape-html": "file:packages/escape-html",

packages/edit-widgets/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/edit-widgets/CHANGELOG.md

@@ -0,0 +1,5 @@
+## 1.0.0 (Unreleased)
+
+### New Features
+
+ - Initial version of the module.

packages/edit-widgets/README.md

@@ -0,0 +1,17 @@
+# Edit Widgets
+
+Widgets 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
+
+Install the module
+
+```bash
+npm install @wordpress/edit-widgets
+```
+
+_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)._
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/edit-widgets/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@wordpress/edit-widgets",
+	"version": "0.0.1-alpha.0",
+	"private": true,
+	"description": "Widgets 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-widgets/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git"
+	},
+	"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.0.0",
+		"@wordpress/element": "file:../element"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/edit-widgets/src/index.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+render(
+	<h1>Widgets (beta)</h1>,
+	document.querySelector( '.blocks-widgets-container' )
+);

packages/edit-widgets/src/style.scss

@@ -0,0 +1,64 @@
+
+// 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_gutenberg-widgets {
+	background: $white;
+
+	#wpcontent {
+		padding-left: 0;
+	}
+
+	#wpbody-content {
+		padding-bottom: 0;
+	}
+
+	/* We hide legacy notices in Gutenberg, 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(.blocks-widgets-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%;
+	}
+}
+
+.blocks-widgets-container,
+// The modals are shown outside the .blocks-widgets-container wrapper, they need these styles
+.components-modal__frame {
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+
+	select {
+		font-size: $default-font-size;
+		color: $dark-gray-500;
+	}
+}
+
+.blocks-widgets-container {
+	padding: 0 10px;
+}