Expand Feature flags

.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,
 	};

package.json

@@ -29,7 +29,7 @@
 		"build:map": "cross-env BABEL_ENV=default NODE_ENV=production FORCE_MAP=true webpack",
 		"changelog": "node ./bin/changelog",
 		"changelog:zenhub": "node ./bin/changelog --changelogSrcType='ZENHUB_RELEASE'",
-		"deploy": "cross-env WOOCOMMERCE_BLOCKS_PHASE=stable composer install --no-dev && npm run build --loglevel error && sh ./bin/github-deploy.sh",
+		"deploy": "cross-env WOOCOMMERCE_BLOCKS_PHASE=2 composer install --no-dev && npm run build --loglevel error && sh ./bin/github-deploy.sh",
 		"dev": "cross-env BABEL_ENV=default webpack",
 		"explore": "source-map-explorer",
 		"lint": "npm run lint:php && npm run lint:css && npm run lint:js",
@@ -208,4 +208,4 @@
 		"license.txt",
 		"woocommerce-gutenberg-products-block.php"
 	]
-}
+}

src/Assets.php

@@ -81,12 +81,15 @@ public static function register_assets() {
 		self::register_script( 'wc-price-filter', plugins_url( self::get_block_asset_build_path( 'price-filter' ), __DIR__ ), $block_dependencies );
 		self::register_script( 'wc-attribute-filter', plugins_url( self::get_block_asset_build_path( 'attribute-filter' ), __DIR__ ), $block_dependencies );
 		self::register_script( 'wc-active-filters', plugins_url( self::get_block_asset_build_path( 'active-filters' ), __DIR__ ), $block_dependencies );
-		self::register_script( 'wc-checkout-block', plugins_url( self::get_block_asset_build_path( 'checkout' ), __DIR__ ), $block_dependencies );
-		self::register_script( 'wc-cart-block', plugins_url( self::get_block_asset_build_path( 'cart' ), __DIR__ ), $block_dependencies );
 
-		if ( 'experimental' === WOOCOMMERCE_BLOCKS_PHASE ) {
+		if ( Package::is_experimental_build() ) {
 			self::register_script( 'wc-single-product-block', plugins_url( self::get_block_asset_build_path( 'single-product' ), __DIR__ ), $block_dependencies );
 		}
+
+		if ( Package::is_feature_plugin_build() ) {
+			self::register_script( 'wc-checkout-block', plugins_url( self::get_block_asset_build_path( 'checkout' ), __DIR__ ), $block_dependencies );
+			self::register_script( 'wc-cart-block', plugins_url( self::get_block_asset_build_path( 'cart' ), __DIR__ ), $block_dependencies );
+		}
 	}
 
 	/**
@@ -178,6 +181,7 @@ public static function get_wc_block_data( $settings ) {
 				'checkoutAllowsGuest'           => 'yes' === get_option( 'woocommerce_enable_guest_checkout' ),
 				'checkoutAllowsSignup'          => 'yes' === get_option( 'woocommerce_enable_signup_and_login_from_checkout' ),
 				'baseLocation'                  => wc_get_base_location(),
+				'woocommerceBlocksPhase'        => WOOCOMMERCE_BLOCKS_PHASE,
 
 				/*
 				 * translators: If your word count is based on single characters (e.g. East Asian characters),

src/Domain/Bootstrap.php

@@ -64,6 +64,7 @@ protected function init() {
 		if ( ! $this->has_core_dependencies() ) {
 			return;
 		}
+		$this->define_feature_flag();
 		$this->register_dependencies();
 		$this->register_payment_methods();
 
@@ -72,7 +73,6 @@ protected function init() {
 		// Load assets in admin and on the frontend.
 		if ( ! $is_rest ) {
 			$this->add_build_notice();
-			$this->define_feature_flag();
 			$this->container->get( AssetDataRegistry::class );
 			$this->container->get( Installer::class );
 			BlockAssets::init();
@@ -130,17 +130,17 @@ function() {
 	 * Define the global feature flag.
 	 */
 	protected function define_feature_flag() {
-		$allowed_flags = [ 'experimental', 'stable' ];
-		$flag          = getenv( 'WOOCOMMERCE_BLOCKS_PHASE' );
-		if ( ! in_array( $flag, $allowed_flags, true ) ) {
-			if ( file_exists( __DIR__ . '/../../blocks.ini' ) ) {
-				$woo_options = parse_ini_file( __DIR__ . '/../../blocks.ini' );
-				$flag        = is_array( $woo_options ) && 'experimental' === $woo_options['woocommerce_blocks_phase'] ? 'experimental' : 'stable';
-			} else {
-				$flag = 'stable';
-			}
+		$default_flag  = defined( 'WC_BLOCKS_IS_FEATURE_PLUGIN' ) ? '2' : '1';
+		$allowed_flags = [ '1', '2', '3' ];
+
+		if ( file_exists( __DIR__ . '/../../blocks.ini' ) ) {
+			$woo_options = parse_ini_file( __DIR__ . '/../../blocks.ini' );
+			$flag        = is_array( $woo_options ) && in_array( $woo_options['woocommerce_blocks_phase'], $allowed_flags, true ) ? $woo_options['woocommerce_blocks_phase'] : $default_flag;
+		} else {
+			$flag = $default_flag;
 		}
-		define( 'WOOCOMMERCE_BLOCKS_PHASE', $flag );
+
+		define( 'WOOCOMMERCE_BLOCKS_PHASE', intval( $flag ) );
 	}
 
 	/**