* Add inline settings script later than init

* Rename to shared-settings for clarity - other extensions filter these

* Implement block settings

* tweak used hooks

* update comment

* Shared settings should be dependency

* Make Webpack output shared and block settings (https://github.com/woocommerce/woocommerce-blocks/pull/918)
This commit is contained in:
Mike Jolley 2019-08-27 16:25:32 +01:00 committed by GitHub
parent 01c6cdec93
commit ea0ce0e915
38 changed files with 77 additions and 55 deletions

View File

@ -2,7 +2,7 @@
* External dependencies
*/
import PropTypes from 'prop-types';
import { ENABLE_REVIEW_RATING, SHOW_AVATARS } from '@woocommerce/settings';
import { ENABLE_REVIEW_RATING, SHOW_AVATARS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -29,7 +29,7 @@ import classnames from 'classnames';
import { Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import PropTypes from 'prop-types';
import { MIN_HEIGHT } from '@woocommerce/settings';
import { MIN_HEIGHT } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { InnerBlocks } from '@wordpress/editor';
import { registerBlockType } from '@wordpress/blocks';
import { DEFAULT_HEIGHT } from '@woocommerce/settings';
import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -30,7 +30,7 @@ import { Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { isEmpty } from 'lodash';
import PropTypes from 'prop-types';
import { MIN_HEIGHT } from '@woocommerce/settings';
import { MIN_HEIGHT } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { InnerBlocks } from '@wordpress/editor';
import { registerBlockType } from '@wordpress/blocks';
import { DEFAULT_HEIGHT } from '@woocommerce/settings';
import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -19,7 +19,7 @@ import {
} from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import PropTypes from 'prop-types';
import { MAX_COLUMNS, MIN_COLUMNS } from '@woocommerce/settings';
import { MAX_COLUMNS, MIN_COLUMNS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { DEFAULT_COLUMNS } from '@woocommerce/settings';
import { DEFAULT_COLUMNS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { Component, createRef, Fragment } from 'react';
import classnames from 'classnames';
import { HOME_URL } from '@woocommerce/settings';
import { HOME_URL } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { PRODUCT_CATEGORIES } from '@woocommerce/settings';
import { PRODUCT_CATEGORIES } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -7,7 +7,7 @@ import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
import { withInstanceId, compose } from '@wordpress/compose';
import { PlainText } from '@wordpress/editor';
import { HOME_URL } from '@woocommerce/settings';
import { HOME_URL } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -17,7 +17,7 @@ import {
} from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import PropTypes from 'prop-types';
import { HAS_TAGS } from '@woocommerce/settings';
import { HAS_TAGS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/settings';
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import Gridicon from 'gridicons';
import { registerBlockType } from '@wordpress/blocks';
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/settings';
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -10,7 +10,7 @@ import {
} from '@wordpress/components';
import { BlockControls } from '@wordpress/editor';
import { getAdminLink } from '@woocommerce/navigation';
import { ENABLE_REVIEW_RATING, SHOW_AVATARS } from '@woocommerce/settings';
import { ENABLE_REVIEW_RATING, SHOW_AVATARS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
import { Component } from 'react';
import PropTypes from 'prop-types';
import { Disabled } from '@wordpress/components';
import { ENABLE_REVIEW_RATING } from '@woocommerce/settings';
import { ENABLE_REVIEW_RATING } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { Fragment } from 'react';
import PropTypes from 'prop-types';
import { ENABLE_REVIEW_RATING } from '@woocommerce/settings';
import { ENABLE_REVIEW_RATING } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -3,7 +3,7 @@
*/
import apiFetch from '@wordpress/api-fetch';
import classNames from 'classnames';
import { ENABLE_REVIEW_RATING } from '@woocommerce/settings';
import { ENABLE_REVIEW_RATING } from '@woocommerce/block-settings';
export const getOrderArgs = ( orderValue ) => {
if ( ENABLE_REVIEW_RATING ) {

View File

@ -6,7 +6,7 @@ import { clamp, isNaN } from 'lodash';
import { Fragment } from '@wordpress/element';
import PropTypes from 'prop-types';
import { RangeControl, ToggleControl } from '@wordpress/components';
import { MAX_COLUMNS, MIN_COLUMNS, MAX_ROWS, MIN_ROWS } from '@woocommerce/settings';
import { MAX_COLUMNS, MIN_COLUMNS, MAX_ROWS, MIN_ROWS } from '@woocommerce/block-settings';
/**
* A combination of range controls for product grid layout settings.

View File

@ -9,7 +9,7 @@ import { debounce, find } from 'lodash';
import PropTypes from 'prop-types';
import { SearchListControl, SearchListItem } from '@woocommerce/components';
import { SelectControl, Spinner } from '@wordpress/components';
import { ENDPOINTS } from '@woocommerce/settings';
import { ENDPOINTS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -9,7 +9,7 @@ import { find } from 'lodash';
import PropTypes from 'prop-types';
import { SearchListControl, SearchListItem } from '@woocommerce/components';
import { SelectControl } from '@wordpress/components';
import { ENDPOINTS } from '@woocommerce/settings';
import { ENDPOINTS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -13,7 +13,7 @@ import {
} from '@woocommerce/components';
import { Spinner, MenuItem } from '@wordpress/components';
import classnames from 'classnames';
import { ENDPOINTS, IS_LARGE_CATALOG } from '@woocommerce/settings';
import { ENDPOINTS, IS_LARGE_CATALOG } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import { PLACEHOLDER_IMG_SRC, THUMBNAIL_SIZE } from '@woocommerce/settings';
import { PLACEHOLDER_IMG_SRC, THUMBNAIL_SIZE } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -8,7 +8,7 @@ import TestRenderer from 'react-test-renderer';
*/
import ProductPreview from '../';
jest.mock( '@woocommerce/settings', () => ( {
jest.mock( '@woocommerce/block-settings', () => ( {
PLACEHOLDER_IMG_SRC: 'placeholder.png',
THUMBNAIL_SIZE: 300,
} ) );

View File

@ -7,7 +7,7 @@ import { debounce, find } from 'lodash';
import PropTypes from 'prop-types';
import { SearchListControl, SearchListItem } from '@woocommerce/components';
import { SelectControl } from '@wordpress/components';
import { LIMIT_TAGS } from '@woocommerce/settings';
import { LIMIT_TAGS } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -4,7 +4,7 @@
import { addQueryArgs } from '@wordpress/url';
import apiFetch from '@wordpress/api-fetch';
import { flatten, uniqBy } from 'lodash';
import { ENDPOINTS, IS_LARGE_CATALOG, LIMIT_TAGS } from '@woocommerce/settings';
import { ENDPOINTS, IS_LARGE_CATALOG, LIMIT_TAGS } from '@woocommerce/block-settings';
const getProductsRequests = ( { selected = [], search = '', queryArgs = [] } ) => {
const defaultArgs = {

View File

@ -10,7 +10,7 @@ import _ from 'lodash';
import withSearchedProducts from '../with-searched-products';
import * as mockedUtils from '../../components/utils';
jest.mock( '@woocommerce/settings', () => ( {
jest.mock( '@woocommerce/block-settings', () => ( {
IS_LARGE_CATALOG: true,
} ) );

View File

@ -5,7 +5,7 @@ import { Component } from '@wordpress/element';
import { debounce } from 'lodash';
import { createHigherOrderComponent } from '@wordpress/compose';
import PropTypes from 'prop-types';
import { IS_LARGE_CATALOG } from '@woocommerce/settings';
import { IS_LARGE_CATALOG } from '@woocommerce/block-settings';
/**
* Internal dependencies

View File

@ -22,3 +22,4 @@ export const LIMIT_TAGS = getConstantFromData( 'limitTags' );
export const HAS_TAGS = getConstantFromData( 'hasTags', true );
export const HOME_URL = getConstantFromData( 'homeUrl ', '' );
export const PRODUCT_CATEGORIES = getConstantFromData( 'productCategories', [] );
export { ENDPOINTS } from './endpoints';

View File

@ -1,3 +0,0 @@
export { default as currency } from './currency';
export { ENDPOINTS } from './endpoints';
export * from './product-block-data';

View File

@ -0,0 +1,2 @@
// Exports shared settings from wcSettings global.
export { default as currency } from './currency';

View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { min } from 'lodash';
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/settings';
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
export default function getQuery( blockAttributes, name ) {
const {

View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/settings';
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
export default function getShortcode( props, name ) {
const blockAttributes = props.attributes;

View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/settings';
import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
export const sharedAttributeBlockTypes = [
'woocommerce/product-best-sellers',

View File

@ -19,6 +19,10 @@ class Assets {
*/
public static function init() {
add_action( 'init', array( __CLASS__, 'register_assets' ) );
add_action( 'admin_print_scripts', array( __CLASS__, 'maybe_add_asset_data' ), 1 );
add_action( 'admin_print_footer_scripts', array( __CLASS__, 'maybe_add_asset_data' ), 1 );
add_action( 'wp_print_scripts', array( __CLASS__, 'maybe_add_asset_data' ), 1 );
add_action( 'wp_print_footer_scripts', array( __CLASS__, 'maybe_add_asset_data' ), 1 );
add_action( 'body_class', array( __CLASS__, 'add_theme_body_class' ), 1 );
}
@ -27,12 +31,13 @@ class Assets {
*/
public static function register_assets() {
self::register_style( 'wc-block-editor', plugins_url( 'build/editor.css', __DIR__ ), array( 'wp-edit-blocks' ) );
self::register_style( 'wc-block-style', plugins_url( 'build/style.css', __DIR__ ), array() );
self::register_style( 'wc-block-style', plugins_url( 'build/style.css', __DIR__ ), [] );
// Shared libraries and components across all blocks.
self::register_script( 'wc-block-settings', plugins_url( 'build/wc-blocks-settings.js', __DIR__ ), [], false );
self::register_script( 'wc-blocks', plugins_url( 'build/blocks.js', __DIR__ ), array(), false );
self::register_script( 'wc-vendors', plugins_url( 'build/vendors.js', __DIR__ ), array(), false );
self::register_script( 'wc-shared-settings', plugins_url( 'build/wc-shared-settings.js', __DIR__ ), [], false );
self::register_script( 'wc-block-settings', plugins_url( 'build/wc-block-settings.js', __DIR__ ), [], false );
self::register_script( 'wc-blocks', plugins_url( 'build/blocks.js', __DIR__ ), [], false );
self::register_script( 'wc-vendors', plugins_url( 'build/vendors.js', __DIR__ ), [ 'wc-shared-settings' ], false );
// Individual blocks.
self::register_script( 'wc-handpicked-products', plugins_url( 'build/handpicked-products.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) );
@ -50,13 +55,26 @@ class Assets {
self::register_script( 'wc-reviews-by-product', plugins_url( 'build/reviews-by-product.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) );
self::register_script( 'wc-reviews-by-category', plugins_url( 'build/reviews-by-category.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) );
self::register_script( 'wc-product-search', plugins_url( 'build/product-search.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) );
}
// attach data to wc-blocks-settings.
wp_add_inline_script(
'wc-block-settings',
self::get_wc_settings_data() . "\n" . self::get_wc_block_data(),
'before'
);
/**
* Attach data to registered assets using inline scripts.
*/
public static function maybe_add_asset_data() {
if ( wp_script_is( 'wc-shared-settings', 'enqueued' ) ) {
wp_add_inline_script(
'wc-shared-settings',
self::get_wc_settings_data(),
'before'
);
}
if ( wp_script_is( 'wc-block-settings', 'enqueued' ) ) {
wp_add_inline_script(
'wc-block-settings',
self::get_wc_block_data(),
'before'
);
}
}
/**
@ -65,13 +83,13 @@ class Assets {
* @param array $classes Array of CSS classnames.
* @return array Modified array of CSS classnames.
*/
public static function add_theme_body_class( $classes = array() ) {
public static function add_theme_body_class( $classes = [] ) {
$classes[] = 'theme-' . get_template();
return $classes;
}
/**
* Returns javascript to inject as data for enqueued wc-blocks-settings script.
* Returns javascript to inject as data for enqueued wc-shared-settings script.
*
* @return string;
* @since 2.4.0
@ -96,7 +114,7 @@ class Assets {
),
'stockStatuses' => wc_get_product_stock_status_options(),
'siteTitle' => get_bloginfo( 'name' ),
'dataEndpoints' => array(),
'dataEndpoints' => [],
'l10n' => array(
'userLocale' => get_user_locale(),
'weekdaysShort' => array_values( $wp_locale->weekday_abbrev ),
@ -108,7 +126,7 @@ class Assets {
}
/**
* Returns block-related data for enqueued wc-blocks-settings script.
* Returns block-related data for enqueued wc-shared-settings script.
*
* This is used to map site settings & data into JS-accessible variables.
*
@ -176,11 +194,11 @@ class Assets {
* @param array $deps Optional. An array of registered script handles this script depends on. Default empty array.
* @param bool $has_i18n Optional. Whether to add a script translation call to this file. Default 'true'.
*/
protected static function register_script( $handle, $src, $deps = array(), $has_i18n = true ) {
protected static function register_script( $handle, $src, $deps = [], $has_i18n = true ) {
$filename = str_replace( plugins_url( '/', __DIR__ ), '', $src );
$ver = self::get_file_version( $filename );
$deps_path = dirname( __DIR__ ) . '/' . str_replace( '.js', '.deps.json', $filename );
$dependencies = file_exists( $deps_path ) ? json_decode( file_get_contents( $deps_path ) ) : array(); // phpcs:ignore WordPress.WP.AlternativeFunctions
$dependencies = file_exists( $deps_path ) ? json_decode( file_get_contents( $deps_path ) ) : []; // phpcs:ignore WordPress.WP.AlternativeFunctions
$dependencies = array_merge( $dependencies, $deps );
wp_register_script( $handle, $src, $dependencies, $ver, true );
@ -213,7 +231,7 @@ class Assets {
* @param string $media Optional. The media for which this stylesheet has been defined. Default 'all'. Accepts media types like
* 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.
*/
protected static function register_style( $handle, $src, $deps = array(), $media = 'all' ) {
protected static function register_style( $handle, $src, $deps = [], $media = 'all' ) {
$filename = str_replace( plugins_url( '/', __DIR__ ), '', $src );
$ver = self::get_file_version( $filename );
wp_register_style( $handle, $src, $deps, $ver, $media );

View File

@ -8,7 +8,8 @@
],
"moduleDirectories": ["node_modules"],
"moduleNameMapper": {
"@woocommerce/settings": "assets/js/settings"
"@woocommerce/settings": "assets/js/settings/shared",
"@woocommerce/block-settings": "assets/js/settings/blocks"
},
"setupFiles": [
"<rootDir>/node_modules/@wordpress/jest-preset-default/scripts/setup-globals.js",

View File

@ -37,7 +37,8 @@ const baseConfig = {
const requestToExternal = ( request ) => {
const wcDepMap = {
'@woocommerce/settings': [ 'wc', 'blockSettings' ],
'@woocommerce/settings': [ 'wc', 'wc-shared-settings' ],
'@woocommerce/block-settings': [ 'wc', 'wc-block-settings' ],
};
if ( wcDepMap[ request ] ) {
return wcDepMap[ request ];
@ -46,7 +47,8 @@ const requestToExternal = ( request ) => {
const requestToHandle = ( request ) => {
const wcHandleMap = {
'@woocommerce/settings': 'wc-block-settings',
'@woocommerce/settings': 'wc-shared-settings',
'@woocommerce/block-settings': 'wc-block-settings',
};
if ( wcHandleMap[ request ] ) {
return wcHandleMap[ request ];
@ -56,12 +58,13 @@ const requestToHandle = ( request ) => {
const CoreConfig = {
...baseConfig,
entry: {
'wc-blocks-settings': './assets/js/settings/index.js',
'wc-shared-settings': './assets/js/settings/shared/index.js',
'wc-block-settings': './assets/js/settings/blocks/index.js',
},
output: {
filename: '[name].js',
path: path.resolve( __dirname, './build/' ),
library: [ 'wc', 'blockSettings' ],
library: [ 'wc', '[name]' ],
libraryTarget: 'this',
// This fixes an issue with multiple webpack projects using chunking
// overwriting each other's chunk loader function.