Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CustomSelectControl: Privatise __experimentalShowSelectedHint using @wordpress/experiments #47229

Merged
merged 5 commits into from
Feb 6, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
"npm": ">=6.9.0 <7"
},
"config": {
"IS_GUTENBERG_PLUGIN": true
"IS_GUTENBERG_PLUGIN": true,
"ALLOW_EXPERIMENT_REREGISTRATION": true
},
"dependencies": {
"@wordpress/a11y": "file:packages/a11y",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { store as blockEditorStore } from '../../store';
import BlockPopover from '../block-popover';
import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
import Inserter from '../inserter';
import { unlock } from '../../experiments';
import { unlock } from '../../lock-unlock';

function selector( select ) {
const {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { forwardRef, useEffect, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { unlock } from '../../experiments';
import { unlock } from '../../lock-unlock';
import ListViewBlockSelectButton from './block-select-button';
import BlockDraggable from '../block-draggable';
import { store as blockEditorStore } from '../../store';
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/provider/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import withRegistryProvider from './with-registry-provider';
import useBlockSync from './use-block-sync';
import { store as blockEditorStore } from '../../store';
import { BlockRefsProvider } from './block-refs-provider';
import { unlock } from '../../experiments';
import { unlock } from '../../lock-unlock';

/** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */

Expand Down
12 changes: 1 addition & 11 deletions packages/block-editor/src/experiments.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
/**
* WordPress dependencies
*/
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';

/**
* Internal dependencies
*/
import * as globalStyles from './components/global-styles';
import { ExperimentalBlockEditorProvider } from './components/provider';
import { lock } from './lock-unlock';
import OffCanvasEditor from './components/off-canvas-editor';

export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
'@wordpress/block-editor'
);

/**
* Experimental @wordpress/block-editor APIs.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/dimensions.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import {
} from './child-layout';
import useSetting from '../components/use-setting';
import { store as blockEditorStore } from '../store';
import { unlock } from '../experiments';
import { unlock } from '../lock-unlock';

export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
export const SPACING_SUPPORT_KEY = 'spacing';
Expand Down
8 changes: 7 additions & 1 deletion packages/block-editor/src/hooks/position.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ import classnames from 'classnames';
*/
import { __, sprintf } from '@wordpress/i18n';
import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
import { BaseControl, CustomSelectControl } from '@wordpress/components';
import {
BaseControl,
experiments as componentsExperiments,
} from '@wordpress/components';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import {
Expand All @@ -26,8 +29,11 @@ import BlockList from '../components/block-list';
import useSetting from '../components/use-setting';
import InspectorControls from '../components/inspector-controls';
import { cleanEmptyObject } from './utils';
import { unlock } from '../lock-unlock';
import { store as blockEditorStore } from '../store';

const { CustomSelectControl } = unlock( componentsExperiments );

const POSITION_SUPPORT_KEY = 'position';

const OPTION_CLASSNAME =
Expand Down
10 changes: 10 additions & 0 deletions packages/block-editor/src/lock-unlock.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* WordPress dependencies
*/
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';

export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
'@wordpress/block-editor'
);
2 changes: 1 addition & 1 deletion packages/block-editor/src/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import * as privateActions from './private-actions';
import * as privateSelectors from './private-selectors';
import * as actions from './actions';
import { STORE_NAME } from './constants';
import { unlock } from '../experiments';
import { unlock } from '../lock-unlock';

/**
* Block editor data store configuration.
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
{ "path": "../dom" },
{ "path": "../element" },
{ "path": "../escape-html" },
{ "path": "../experiments" },
{ "path": "../hooks" },
{ "path": "../html-entities" },
{ "path": "../i18n" },
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
{ "path": "../dom" },
{ "path": "../element" },
{ "path": "../escape-html" },
{ "path": "../experiments" },
{ "path": "../hooks" },
{ "path": "../html-entities" },
{ "path": "../i18n" },
Expand Down
1 change: 1 addition & 0 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"@wordpress/dom": "file:../dom",
"@wordpress/element": "file:../element",
"@wordpress/escape-html": "file:../escape-html",
"@wordpress/experiments": "file:../experiments",
"@wordpress/hooks": "file:../hooks",
"@wordpress/html-entities": "file:../html-entities",
"@wordpress/i18n": "file:../i18n",
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/custom-select-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -257,3 +257,12 @@ export default function CustomSelectControl( props ) {
</div>
);
}

export function StableCustomSelectControl( props ) {
return (
<CustomSelectControl
{ ...props }
__experimentalShowSelectedHint={ false }
/>
);
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
import CustomSelectControl from '../';
import CustomSelectControl from '..';

export default {
title: 'Components/CustomSelectControl',
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/custom-select-control/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
import { render, fireEvent, screen } from '@testing-library/react';

/**
* WordPress dependencies
* Internal dependencies
*/
import { CustomSelectControl } from '@wordpress/components';
import CustomSelectControl from '..';
noisysocks marked this conversation as resolved.
Show resolved Hide resolved

describe( 'CustomSelectControl', () => {
it( 'Captures the keypress event and does not let it propagate', () => {
Expand Down
20 changes: 20 additions & 0 deletions packages/components/src/experiments.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* WordPress dependencies
*/
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';

/**
* Internal dependencies
*/
import { default as CustomSelectControl } from './custom-select-control';

export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
'@wordpress/components'
);

export const experiments = {};
lock( experiments, {
CustomSelectControl,
} );
5 changes: 4 additions & 1 deletion packages/components/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export {
useCompositeState as __unstableUseCompositeState,
} from './composite';
export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
export { default as CustomSelectControl } from './custom-select-control';
export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
export { default as Dashicon } from './dashicon';
export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
export { default as __experimentalDimensionControl } from './dimension-control';
Expand Down Expand Up @@ -212,3 +212,6 @@ export {
} from './higher-order/with-focus-return';
export { default as withNotices } from './higher-order/with-notices';
export { default as withSpokenMessages } from './higher-order/with-spoken-messages';

// Experiments.
export { experiments } from './experiments';
1 change: 1 addition & 0 deletions packages/components/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
{ "path": "../dom" },
{ "path": "../element" },
{ "path": "../escape-html" },
{ "path": "../experiments" },
{ "path": "../hooks" },
{ "path": "../html-entities" },
{ "path": "../i18n" },
Expand Down
1 change: 1 addition & 0 deletions packages/data/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
{ "path": "../compose" },
{ "path": "../deprecated" },
{ "path": "../element" },
{ "path": "../experiments" },
{ "path": "../is-shallow-equal" },
{ "path": "../priority-queue" },
{ "path": "../redux-routine" }
Expand Down
1 change: 1 addition & 0 deletions packages/experiments/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"main": "build/index.js",
"module": "build-module/index.js",
"react-native": "src/index",
"types": "build-types",
"sideEffects": false,
"dependencies": {
"@babel/runtime": "^7.16.0"
Expand Down
43 changes: 35 additions & 8 deletions packages/experiments/src/implementation.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,23 @@
* The list of core modules allowed to opt-in to the experimental APIs.
*/
const CORE_MODULES_USING_EXPERIMENTS = [
'@wordpress/data',
'@wordpress/editor',
'@wordpress/blocks',
'@wordpress/block-editor',
'@wordpress/block-library',
'@wordpress/blocks',
'@wordpress/components',
'@wordpress/customize-widgets',
'@wordpress/edit-site',
'@wordpress/data',
'@wordpress/edit-post',
'@wordpress/edit-site',
'@wordpress/edit-widgets',
'@wordpress/block-library',
'@wordpress/editor',
];

/**
* A list of core modules that already opted-in to
* the experiments package.
*
* @type {string[]}
*/
const registeredExperiments = [];

Expand All @@ -44,6 +47,24 @@ const registeredExperiments = [];
const requiredConsent =
'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.';

/** @type {boolean} */
let allowReRegistration;
// Use try/catch to force "false" if the environment variable is not explicitly
// set to true (e.g. when building WordPress core).
try {
allowReRegistration = process.env.ALLOW_EXPERIMENT_REREGISTRATION ?? false;
} catch ( error ) {
allowReRegistration = false;
}

/**
* Called by a @wordpress package wishing to opt-in to accessing or exposing
* private experimental APIs.
*
* @param {string} consent The consent string.
* @param {string} moduleName The name of the module that is opting in.
* @return {{lock: typeof lock, unlock: typeof unlock}} An object containing the lock and unlock functions.
*/
export const __dangerousOptInToUnstableAPIsOnlyForCoreModules = (
consent,
moduleName
Expand All @@ -57,7 +78,13 @@ export const __dangerousOptInToUnstableAPIsOnlyForCoreModules = (
'your product will inevitably break on one of the next WordPress releases.'
);
}
if ( registeredExperiments.includes( moduleName ) ) {
if (
! allowReRegistration &&
registeredExperiments.includes( moduleName )
) {
// This check doesn't play well with Story Books / Hot Module Reloading
// and isn't included in the Gutenberg plugin. It only matters in the
// WordPress core release.
throw new Error(
`You tried to opt-in to unstable APIs as module "${ moduleName }" which is already registered. ` +
'This feature is only for JavaScript modules shipped with WordPress core. ' +
Expand Down Expand Up @@ -104,8 +131,8 @@ export const __dangerousOptInToUnstableAPIsOnlyForCoreModules = (
* // { a: 1 }
* ```
*
* @param {Object|Function} object The object to bind the private data to.
* @param {any} privateData The private data to bind to the object.
* @param {any} object The object to bind the private data to.
* @param {any} privateData The private data to bind to the object.
*/
function lock( object, privateData ) {
if ( ! object ) {
Expand Down
12 changes: 0 additions & 12 deletions packages/experiments/src/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,6 @@ describe( '__dangerousOptInToUnstableAPIsOnlyForCoreModules', () => {
/This feature is only for JavaScript modules shipped with WordPress core/
);
} );
it( 'Should not register the same module twice', () => {
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
expect( () => {
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
requiredConsent,
'@experiments/test'
);
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
requiredConsent,
'@experiments/test'
);
} ).toThrow( /is already registered/ );
} );
it( 'Should grant access to unstable APIs when passed both a consent string and a previously unregistered package name', () => {
const unstableAPIs = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
requiredConsent,
Expand Down
9 changes: 9 additions & 0 deletions packages/experiments/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"rootDir": "src",
"declarationDir": "build-types",
"types": [ "gutenberg-env" ]
},
"include": [ "src/**/*" ]
}
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
25 changes: 7 additions & 18 deletions storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ const stories = [
'../packages/icons/src/**/stories/*.@(js|tsx|mdx)',
].filter( Boolean );

const customEnvVariables = {};

module.exports = {
core: {
builder: 'webpack5',
Expand All @@ -30,20 +28,11 @@ module.exports = {
emotionAlias: false,
storyStoreV7: true,
},
// Workaround:
// https://github.com/storybookjs/storybook/issues/12270
webpackFinal: async ( config ) => {
// Find the DefinePlugin.
const plugin = config.plugins.find( ( p ) => {
return p.definitions && p.definitions[ 'process.env' ];
} );
// Add custom env variables.
Object.keys( customEnvVariables ).forEach( ( key ) => {
plugin.definitions[ 'process.env' ][ key ] = JSON.stringify(
customEnvVariables[ key ]
);
} );

return config;
},
env: ( config ) => ( {
...config,
// Pretend we're in the Gutenberg plugin.
// Disable reason: We're defining IS_GUTENBERG_PLUGIN, not using it.
// eslint-disable-next-line @wordpress/is-gutenberg-plugin
IS_GUTENBERG_PLUGIN: true,
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
} ),
};
Loading