Expand Feature flags (#2591)

* Revert "Move blocks to stable flag (#2261)"

This reverts commit 25a2964.

* migrate to number based gating

* add todo to watch feature flag

* remove flags from build

* change flag in travis

* load flag in right order

* expose flag to js

* simplify flag definition

* more feature flags

* wrap flag in check

* add helper functions

* add helpers in PHP

* fix typo in flag

* move php code to src/domain/package

* tweak if condition

* return flag to travis

* fix broken block name

Author: senadir

.eslintrc.js

@@ -20,7 +20,7 @@ module.exports = {
 	rules: {
 		'@wordpress/dependency-group': 'off',
 		'woocommerce/dependency-group': 'error',
-		'woocommerce/feature-flag': 'error',
+		'woocommerce/feature-flag': 'off',
 		'valid-jsdoc': 'off',
 		radix: 'error',
 		yoda: [ 'error', 'never' ],

.travis.yml

@@ -47,35 +47,35 @@ jobs:
           php: 7.1
           env:
               - WP_VERSION=latest
-              - WOOCOMMERCE_BLOCKS_PHASE=experimental
+              - WOOCOMMERCE_BLOCKS_PHASE=3
           script:
               - phpunit
         - name: PHP 5.6/unit-tests/Latest WP
           php: 5.6
           env:
               - WP_VERSION=latest
-              - WOOCOMMERCE_BLOCKS_PHASE=experimental
+              - WOOCOMMERCE_BLOCKS_PHASE=3
           script:
               - phpunit
         - name: PHP Linting Check
           php: 7.3
           env:
               - WP_TRAVISCI=phpcs
-              - WOOCOMMERCE_BLOCKS_PHASE=experimental
+              - WOOCOMMERCE_BLOCKS_PHASE=3
           script:
               - npm run lint:php
         - name: Javascript Tests
           script:
               - npm install
               - npm run test
           env:
-              - WOOCOMMERCE_BLOCKS_PHASE=experimental
+              - WOOCOMMERCE_BLOCKS_PHASE=3
         - name: Javascript/CSS Lint check
           script:
               - npm install
               - npm run lint:ci
           env:
-              - WOOCOMMERCE_BLOCKS_PHASE=experimental
+              - WOOCOMMERCE_BLOCKS_PHASE=3
         - name: E2E Tests
           script:
               - npm ci
@@ -84,12 +84,12 @@ jobs:
               - npm run build:e2e-test
               - npm run test:e2e
           env:
-              - WOOCOMMERCE_BLOCKS_PHASE=experimental
+              - WOOCOMMERCE_BLOCKS_PHASE=3
         - stage: deploy
           if: (NOT type IN (pull_request)) AND (branch = master)
           name: Deploy Storybook
           env:
-              - WOOCOMMERCE_BLOCKS_PHASE=experimental
+              - WOOCOMMERCE_BLOCKS_PHASE=3
           install:
               - npm ci
           script:

assets/js/blocks/cart-checkout/cart/index.js

@@ -3,10 +3,9 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/block-editor';
-import { registerBlockType } from '@wordpress/blocks';
 import { Icon, cart } from '@woocommerce/icons';
 import classnames from 'classnames';
-
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 /**
  * Internal dependencies
  */
@@ -51,4 +50,4 @@ const settings = {
 	},
 };
 
-registerBlockType( 'woocommerce/cart', settings );
+registerFeaturePluginBlockType( 'woocommerce/cart', settings );

assets/js/blocks/cart-checkout/checkout/index.js

@@ -2,9 +2,9 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
 import { Icon, card } from '@woocommerce/icons';
 import classnames from 'classnames';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -49,4 +49,4 @@ const settings = {
 	},
 };
 
-registerBlockType( 'woocommerce/checkout', settings );
+registerFeaturePluginBlockType( 'woocommerce/checkout', settings );

assets/js/blocks/single-product/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -40,4 +40,4 @@ const settings = {
 	save,
 };
 
-registerBlockType( BLOCK_NAME, settings );
+registerExperimentalBlockType( BLOCK_NAME, settings );

assets/js/settings/blocks/constants.js

@@ -49,6 +49,10 @@ export const IS_SHIPPING_COST_HIDDEN = getSetting(
 	'isShippingCostHidden',
 	false
 );
+export const WOOCOMMERCE_BLOCKS_PHASE = getSetting(
+	'woocommerceBlocksPhase',
+	1
+);
 export const WC_BLOCKS_ASSET_URL = getSetting( 'wcBlocksAssetUrl', '' );
 export const SHIPPING_COUNTRIES = getSetting( 'shippingCountries', {} );
 export const ALLOWED_COUNTRIES = getSetting( 'allowedCountries', {} );

assets/js/settings/blocks/feature-flags.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { WOOCOMMERCE_BLOCKS_PHASE } from './constants';
+
+/**
+ * Registers a new experimental block provided a unique name and an object defining its
+ * behavior. Once registered, the block is made available as an option to any
+ * editor interface where blocks are implemented.
+ *
+ * @param {string} name     Block name.
+ * @param {Object} settings Block settings.
+ *
+ * @return {?Object} The block, if it has been successfully registered;
+ *                    otherwise `undefined`.
+ */
+export const registerExperimentalBlockType = ( name, settings ) => {
+	if ( WOOCOMMERCE_BLOCKS_PHASE > 2 ) {
+		return registerBlockType( name, settings );
+	}
+};
+
+/**
+ * Registers a new feature plugin block provided a unique name and an object
+ * defining its behavior. Once registered, the block is made available as an
+ * option to any editor interface where blocks are implemented.
+ *
+ * @param {string} name     Block name.
+ * @param {Object} settings Block settings.
+ *
+ * @return {?Object} The block, if it has been successfully registered;
+ *                    otherwise `undefined`.
+ */
+export const registerFeaturePluginBlockType = ( name, settings ) => {
+	if ( WOOCOMMERCE_BLOCKS_PHASE > 1 ) {
+		return registerBlockType( name, settings );
+	}
+};
+
+/**
+ * Checks if we're executing the code in an experimental build mode.
+ *
+ * @return {boolean} True if this is an experimental build, false otherwise.
+ */
+export const isExperimentalBuild = () => WOOCOMMERCE_BLOCKS_PHASE > 2;
+
+/**
+ * Checks if we're executing the code in an feature plugin or experimental build mode.
+ *
+ * @return {boolean} True if this is an experimental or feature plugin build, false otherwise.
+ */
+export const isFeaturePluginBuild = () => WOOCOMMERCE_BLOCKS_PHASE > 1;

assets/js/settings/blocks/index.js

@@ -2,3 +2,4 @@
  * Internal dependencies
  */
 export * from './constants';
+export * from './feature-flags';

bin/eslint-plugin-woocommerce/rules/feature-flag.js

@@ -27,14 +27,15 @@ function findParent( sourceNode, predicate ) {
  * @example
  * ```js
  * // good
- * if ( process.env.WOOCOMMERCE_BLOCKS_PHASE === 'experimental' ) {
+ * if ( process.env.WOOCOMMERCE_BLOCKS_PHASE > 1 ) {
  *
  * // bad
- * if ( WOOCOMMERCE_BLOCKS_PHASE === 'experimental' ) {
+ * if ( WOOCOMMERCE_BLOCKS_PHASE > 1 ) {
  * ```
  *
  * @param {Object} node    The WOOCOMMERCE_BLOCKS_PHASE identifier node.
  * @param {Object} context The eslint context object.
+ * @todo: update this rule to match the new flags.
  */
 function testIsAccessedViaProcessEnv( node, context ) {
 	let parent = node.parent;

bin/webpack-helpers.js

@@ -9,7 +9,6 @@ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extrac
 const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
 const chalk = require( 'chalk' );
 const { omit } = require( 'lodash' );
-const { DefinePlugin } = require( 'webpack' );
 const NODE_ENV = process.env.NODE_ENV || 'development';
 
 function findModuleMatch( module, match ) {
@@ -149,16 +148,17 @@ const stableMainEntry = {
 	'active-filters': './assets/js/blocks/active-filters/index.js',
 	'block-error-boundary':
 		'./assets/js/base/components/block-error-boundary/style.scss',
-	'single-product': './assets/js/blocks/single-product/index.js',
+	cart: './assets/js/blocks/cart-checkout/cart/index.js',
+	checkout: './assets/js/blocks/cart-checkout/checkout/index.js',
 };
 
 const experimentalMainEntry = {
-	cart: './assets/js/blocks/cart-checkout/cart/index.js',
-	checkout: './assets/js/blocks/cart-checkout/checkout/index.js',
+	'single-product': './assets/js/blocks/single-product/index.js',
 };
 
 const mainEntry =
-	process.env.WOOCOMMERCE_BLOCKS_PHASE === 'stable'
+	// env variables are strings, so we compare against a string, so we need to parse it.
+	parseInt( process.env.WOOCOMMERCE_BLOCKS_PHASE, 10 ) < 3
 		? stableMainEntry
 		: { ...stableMainEntry, ...experimentalMainEntry };
 
@@ -168,16 +168,17 @@ const stableFrontEndEntry = {
 	'price-filter': './assets/js/blocks/price-filter/frontend.js',
 	'attribute-filter': './assets/js/blocks/attribute-filter/frontend.js',
 	'active-filters': './assets/js/blocks/active-filters/frontend.js',
-	'single-product': './assets/js/blocks/single-product/frontend.js',
+	cart: './assets/js/blocks/cart-checkout/cart/frontend.js',
+	checkout: './assets/js/blocks/cart-checkout/checkout/frontend.js',
 };
 
 const experimentalFrontEndEntry = {
-	cart: './assets/js/blocks/cart-checkout/cart/frontend.js',
-	checkout: './assets/js/blocks/cart-checkout/checkout/frontend.js',
+	'single-product': './assets/js/blocks/single-product/frontend.js',
 };
 
 const frontEndEntry =
-	process.env.WOOCOMMERCE_BLOCKS_PHASE === 'stable'
+	// env variables are strings, so we compare against a string, so we need to parse it.
+	parseInt( process.env.WOOCOMMERCE_BLOCKS_PHASE, 10 ) < 3
 		? stableFrontEndEntry
 		: { ...stableFrontEndEntry, ...experimentalFrontEndEntry };
 
@@ -358,13 +359,6 @@ const getMainConfig = ( options = {} ) => {
 				requestToExternal,
 				requestToHandle,
 			} ),
-			new DefinePlugin( {
-				// Inject the `WOOCOMMERCE_BLOCKS_PHASE` global, used for feature flagging.
-				'process.env.WOOCOMMERCE_BLOCKS_PHASE': JSON.stringify(
-					// eslint-disable-next-line woocommerce/feature-flag
-					process.env.WOOCOMMERCE_BLOCKS_PHASE || 'experimental'
-				),
-			} ),
 		],
 		resolve,
 	};
@@ -460,13 +454,6 @@ const getFrontConfig = ( options = {} ) => {
 				requestToExternal,
 				requestToHandle,
 			} ),
-			new DefinePlugin( {
-				// Inject the `WOOCOMMERCE_BLOCKS_PHASE` global, used for feature flagging.
-				'process.env.WOOCOMMERCE_BLOCKS_PHASE': JSON.stringify(
-					// eslint-disable-next-line woocommerce/feature-flag
-					process.env.WOOCOMMERCE_BLOCKS_PHASE || 'experimental'
-				),
-			} ),
 		],
 		resolve,
 	};
@@ -599,13 +586,6 @@ const getPaymentMethodsExtensionConfig = ( options = {} ) => {
 				requestToExternal,
 				requestToHandle,
 			} ),
-			new DefinePlugin( {
-				// Inject the `WOOCOMMERCE_BLOCKS_PHASE` global, used for feature flagging.
-				'process.env.WOOCOMMERCE_BLOCKS_PHASE': JSON.stringify(
-					// eslint-disable-next-line woocommerce/feature-flag
-					process.env.WOOCOMMERCE_BLOCKS_PHASE || 'experimental'
-				),
-			} ),
 		],
 		resolve,
 	};