Skip to content

Commit

Permalink
CustomSelectControl: Privatise __experimentalShowSelectedHint using @…
Browse files Browse the repository at this point in the history
…wordpress/experiments (#47229)

## What?
Part of #47196. Uses `@wordpress/experiments` (#46131) to make `__experimentalShowSelectedHint` in `CustomSelectControl` private.

## Why?
We don't want to add any new experimental APIs to 6.2 as part of an effort to no longer expose experimental APIs in Core.

## How?
https://github.com/WordPress/gutenberg/blob/trunk/docs/contributors/code/coding-guidelines.md#experimental-react-component-properties

## Testing Instructions
1. Use a block theme with more than 5 font sizes or manually edit `theme.json` to contain more than 5 font sizes in `settings.typography.fontSizes`.
2. Open the site editor. Appearance → Editor → Edit.
3. Go to Styles → Typography → Headings.
4. Select a heading level.
5. Toggle off the custom font size picker.
6. You should see a hint alongside the selected font size preset.


Co-authored-by: Adam Zieliński <adam@adamziel.com>
  • Loading branch information
2 people authored and ntsekouras committed Feb 9, 2023
1 parent 46a938a commit 5c5d96e
Show file tree
Hide file tree
Showing 30 changed files with 141 additions and 49 deletions.
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 '..';

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
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/**/*" ]
}
24 changes: 6 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,10 @@ 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,
// Inject the `ALLOW_EXPERIMENT_REREGISTRATION` global, used by
// @wordpress/experiments.
ALLOW_EXPERIMENT_REREGISTRATION: true,
} ),
};
8 changes: 8 additions & 0 deletions test/native/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ import { Image, NativeModules as RNNativeModules } from 'react-native';
// testing environment: https://github.com/facebook/react-native/blob/6c19dc3266b84f47a076b647a1c93b3c3b69d2c5/Libraries/Core/setUpNavigator.js#L17
global.navigator = global.navigator ?? {};

/**
* Whether to allow the same experiment to be registered multiple times.
* This is useful for development purposes, but should be set to false
* during the unit tests to ensure the Gutenberg plugin can be cleanly
* merged into WordPress core where this is false.
*/
global.process.env.ALLOW_EXPERIMENT_REREGISTRATION = true;

// Set up the app runtime globals for the test environment, which includes
// modifying the above `global.navigator`
require( '../../packages/react-native-editor/src/globals' );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,11 @@ global.process.env = {
// eslint-disable-next-line @wordpress/is-gutenberg-plugin
IS_GUTENBERG_PLUGIN:
String( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) === 'true',
/**
* Whether to allow the same experiment to be registered multiple times.
* This is useful for development purposes, but should be set to false
* during the unit tests to ensure the Gutenberg plugin can be cleanly
* merged into WordPress core where this is false.
*/
ALLOW_EXPERIMENT_REREGISTRATION: false,
};
Loading

0 comments on commit 5c5d96e

Please sign in to comment.