diff --git a/.eslintrc.js b/.eslintrc.js index 235fe1af10b079..5ce3aa251459bf 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 ddc0dfec2b7dfd..18c7ac39ce1be1 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 038b93e03f25ab..026790426f1ecd 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 f1364f2860b643..216566261a2ab6 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 3030459fbfce84..b34e428425e801 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 20276007928865..580f9852b53a58 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 c559fce1618072..9da875e8df2cca 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 00000000000000..82eff09001f456 --- /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 00000000000000..a308d8cd6035f5 --- /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 00000000000000..ef8ed74e9da63f --- /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 00000000000000..2c013c9a2d5ae7 --- /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; +}