Widget Visibility: add scaffolding for upcoming editor features. (#20910

)

This does not much on its own, but is the first step to allow us to ship #20731.

projects/plugins/jetpack/.gitattributes

@@ -51,6 +51,7 @@
 /modules/masterbar/admin-color-schemes/colors/**/*.scss  production-exclude
 /modules/search/instant-search/**                        production-exclude
 /modules/widgets/follow-button.php                       production-exclude
+/modules/widget-visibility/editor/**                     production-exclude
 /node_modules/**                                         production-exclude
 /package.json                                            production-exclude
 /phpunit.xml.dist                                        production-exclude

projects/plugins/jetpack/changelog/add-scaffolding-widget-visibilty-block-editor

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Widget Visibility: add scaffolding for upcoming block editor features.
+
+

projects/plugins/jetpack/gulpfile.babel.js

@@ -65,6 +65,16 @@ gulp.task( 'search-configure:watch', function () {
 	child.stdout.on( 'data', data => log( data.toString() ) );
 } );
 
+gulp.task( 'widget-visibility:watch', function () {
+	const child = require( 'child_process' ).execFile( 'pnpm', [
+		'run',
+		'build-widget-visibility',
+		'--',
+		'--watch',
+	] );
+	child.stdout.on( 'data', data => log( data.toString() ) );
+} );
+
 gulp.task( 'php:module-headings', function () {
 	const process = spawn( 'php', [ 'tools/build-module-headings-translations.php' ] );
 	process.stderr.on( 'data', function ( data ) {
@@ -92,7 +102,8 @@ gulp.task(
 		'old-styles:watch',
 		'blocks:watch',
 		'search-app:watch',
-		'search-configure:watch'
+		'search-configure:watch',
+		'widget-visibility:watch'
 	)
 );
 

projects/plugins/jetpack/modules/widget-visibility/editor/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+	extends: [
+		'plugin:@wordpress/eslint-plugin/recommended-with-formatting',
+		'plugin:@wordpress/eslint-plugin/i18n',
+		'../../../.eslintrc.js',
+	],
+};

projects/plugins/jetpack/modules/widget-visibility/editor/README.md

@@ -0,0 +1,10 @@
+# Widget Visibility editor controls
+
+[Widget Visibility](http://jetpack.com/support/widget-visibility) was first built to interact with widgets, in a WordPress world where the block editor didn't exist.
+In WordPress 5.8, it became possible to [use a block-based editor to manage widgets on your WordPress site](https://wordpress.org/news/2021/08/widgets-in-wordpress-5-8-and-beyond/).
+
+This means that we can now develop a new interface to manage widget visibility settings from the block editor. This directory allows us to build that interface.
+
+## Build (& Watch)
+
+This feature will be built via `pnpm run build-widget-visibility`, which is invoked in `pnpm build`.

projects/plugins/jetpack/modules/widget-visibility/editor/index.jsx

@@ -0,0 +1,9 @@
+/* eslint-disable react/react-in-jsx-scope */
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+
+export const WidgetVisibility = () => {
+	return <Fragment>Widget Visibility</Fragment>;
+};

projects/plugins/jetpack/package.json

@@ -15,22 +15,23 @@
 	"author": "Automattic",
 	"scripts": {
 		"add-textdomain": "wpi18n addtextdomain --textdomain=jetpack --glob-pattern='!(node_modules|tests|tools|vendor){*.php,**/*.php}'",
-		"build": "pnpm run install-if-deps-outdated && pnpm run clean && pnpm run build-client && pnpm run build-php && pnpm run build-extensions && pnpm run build-search && pnpm run build-asset-cdn-json",
+		"build": "pnpm run install-if-deps-outdated && pnpm run clean && pnpm run build-client && pnpm run build-php && pnpm run build-extensions && pnpm run build-search && pnpm run build-widget-visibility && pnpm run build-asset-cdn-json",
 		"build-asset-cdn-json": "php tools/build-asset-cdn-json.php",
 		"build-client": "gulp",
 		"build-color-schemes-wpcom": "GULP_ENV=wpcom gulp sass:color-schemes",
-		"build-concurrently": "pnpm run install-if-deps-outdated && pnpm run clean && pnpx concurrently 'pnpm:build-client' 'pnpm:build-php' 'pnpm:build-extensions' 'pnpm:build-search' && pnpm run build-asset-cdn-json",
+		"build-concurrently": "pnpm run install-if-deps-outdated && pnpm run clean && pnpx concurrently 'pnpm:build-client' 'pnpm:build-php' 'pnpm:build-extensions' 'pnpm:build-search' 'pnpm:build-widget-visibility' && pnpm run build-asset-cdn-json",
 		"build-extensions": "webpack --config ./tools/webpack.config.extensions.js",
 		"build-php": "composer install --ignore-platform-reqs",
 		"build-production": "pnpm run distclean && pnpm run install-if-deps-outdated && pnpm run build-production-client && pnpm run build-production-php && pnpm run build-production-extensions && pnpm run build-production-search && pnpm run build-asset-cdn-json",
-		"build-production-concurrently": "pnpm run distclean && pnpm run install-if-deps-outdated && pnpx concurrently 'pnpm:build-production-client' 'pnpm:build-production-php' 'NODE_ENV=production pnpm run build-extensions' 'NODE_ENV=production pnpm run build-search' && pnpm run build-asset-cdn-json",
+		"build-production-concurrently": "pnpm run distclean && pnpm run install-if-deps-outdated && pnpx concurrently 'pnpm:build-production-client' 'pnpm:build-production-php' 'NODE_ENV=production pnpm run build-extensions' 'NODE_ENV=production pnpm run build-search' 'NODE_ENV=production pnpm run build-widget-visibility' && pnpm run build-asset-cdn-json",
 		"build-production-client": "NODE_ENV=production BABEL_ENV=production pnpm run build-client && pnpm run validate-es10 -- ./_inc/build/",
 		"build-production-extensions": "NODE_ENV=production BABEL_ENV=production pnpm run build-extensions",
 		"build-production-php": "COMPOSER_MIRROR_PATH_REPOS=1 COMPOSER_ROOT_VERSION=dev-master composer install -o --no-dev --classmap-authoritative --prefer-dist",
 		"build-production-search": "NODE_ENV=production BABEL_ENV=production pnpm run build-search && pnpm run validate-es10 -- ./_inc/build/instant-search/",
 		"build-search": "pnpm run clean-search && pnpm run build-search-app && pnpm run build-search-configure",
 		"build-search-app": "webpack --config ./tools/webpack.config.search.js",
 		"build-search-configure": "webpack --config ./tools/webpack.config.search-configure.js",
+		"build-widget-visibility": "webpack --config ./tools/webpack.config.widget-visibility.js",
 		"clean": "pnpm run clean-client && pnpm run clean-extensions && pnpm run clean-composer",
 		"clean-client": "rm -rf _inc/build/ css/",
 		"clean-composer": "rm -rf vendor/",

projects/plugins/jetpack/tools/webpack.config.widget-visibility.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+
+/**
+ * Internal dependencies
+ */
+const { definePaletteColorsAsStaticVariables } = require( './webpack.helpers' );
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+const baseWebpackConfig = getBaseWebpackConfig(
+	{ WP: true },
+	{
+		entry: {
+			main: path.join( __dirname, '../modules/widget-visibility/editor/index.jsx' ),
+		},
+		'output-filename': 'index.min.js',
+		'output-path': path.join( __dirname, '../_inc/build/widget-visibility/editor' ),
+	}
+);
+
+module.exports = {
+	...baseWebpackConfig,
+	resolve: {
+		...baseWebpackConfig.resolve,
+		modules: [
+			path.resolve( __dirname, '../_inc/client' ),
+			path.resolve( __dirname, '../node_modules' ),
+			'node_modules',
+		],
+		fallback: {
+			fs: false,
+		},
+	},
+	devtool: isDevelopment ? 'source-map' : false,
+	plugins: [
+		...baseWebpackConfig.plugins,
+		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
+		definePaletteColorsAsStaticVariables(),
+	],
+};