diff --git a/.eslintrc.js b/.eslintrc.js index 235fe1af10b07..5ce3aa251459b 100644 --- a/.eslintrc.js +++ b/.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.', diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ddc0dfec2b7df..18c7ac39ce1be 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/docs/manifest.json b/docs/manifest.json index 038b93e03f25a..026790426f1ec 100644 --- a/docs/manifest.json +++ b/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", diff --git a/gutenberg.php b/gutenberg.php index f1364f2860b64..216566261a2ab 100644 --- a/gutenberg.php +++ b/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' ), diff --git a/lib/client-assets.php b/lib/client-assets.php index 3030459fbfce8..b34e428425e80 100644 --- a/lib/client-assets.php +++ b/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; diff --git a/lib/load.php b/lib/load.php index 2027600792886..580f9852b53a5 100644 --- a/lib/load.php +++ b/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' ) ) { diff --git a/lib/packages-dependencies.php b/lib/packages-dependencies.php index c559fce161807..9da875e8df2cc 100644 --- a/lib/packages-dependencies.php +++ b/lib/packages-dependencies.php @@ -130,6 +130,9 @@ 'wp-url', 'wp-viewport', ), + 'wp-edit-widgets' => array( + 'wp-element', + ), 'wp-editor' => array( 'lodash', 'wp-a11y', diff --git a/lib/widgets-page.php b/lib/widgets-page.php new file mode 100644 index 0000000000000..82eff09001f45 --- /dev/null +++ b/lib/widgets-page.php @@ -0,0 +1,35 @@ + +
+
+ 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)._ + +

Code is Poetry.

diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json new file mode 100644 index 0000000000000..a308d8cd6035f --- /dev/null +++ b/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" + } +} diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js new file mode 100644 index 0000000000000..ef8ed74e9da63 --- /dev/null +++ b/packages/edit-widgets/src/index.js @@ -0,0 +1,9 @@ +/** + * WordPress dependencies + */ +import { render } from '@wordpress/element'; + +render( +

Widgets (beta)

, + document.querySelector( '.blocks-widgets-container' ) +); diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss new file mode 100644 index 0000000000000..2c013c9a2d5ae --- /dev/null +++ b/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; +}