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

Experiments: sharing private APIs with lock() and unlock() #46131

Merged
merged 23 commits into from
Jan 17, 2023

Conversation

adamziel
Copy link
Contributor

@adamziel adamziel commented Nov 28, 2022

Description

This commit introduces a more convenient API for managing the private experiments as the former register-based API was quite cumbersome to use.

The idea is to "lock" private data inside public objects:

const { lock, unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
	'<CONSENT STRING>',
	'@wordpress/blocks'
);

export const publicObject = {};
lock( __experiments, "Shh, private data!" );

publicObject
// {}

unlock( publicObject )
// "Shh, private data!"

This new lock()/unlock() API enables private functions, classes, components, selectors, actions, arguments, and properties. Any package that opted-in to private APIs can call unlock() on publicly available artifacts to retrieve the related private API.

Kudos to @jsnajdr for identifying an opportunity to simplify the API!

Examples

Private selectors:

// In wordpress/block-data:
import { store as blockEditorStore } from './store';
import { unlock } from '../experiments';
import { __unstableSelectionHasUnmergeableBlock } from './store/selectors';

unlock( store ).registerPrivateSelectors( {
  __unstableSelectionHasUnmergeableBlock
} );

// In a React component:
function MyComponent() {
    const hasRole = useSelect( ( select ) => (
        unlock( select( blockEditorStore ) ).__unstableSelectionHasUnmergeableBlock()
    ) );

    // ...
}

Private functions, classes, and variables

// In packages/package1/index.js:
import { lock } from './experiments';

export const experiments = {};
/* Attach private data to the exported object */
lock(experiments, {
	__experimentalCallback: function() {},
	__experimentalReactComponent: function ExperimentalComponent() { return <div/>; },
	__experimentalClass: class Experiment{},
	__experimentalVariable: 5,
});


// In packages/package2/index.js:
import { experiments } from '@wordpress/package1';
import { unlock } from './experiments';

const {
	__experimentalCallback,
	__experimentalReactComponent,
	__experimentalClass,
	__experimentalVariable
} = unlock( experiments );

Private function arguments

To add an experimental argument to a stable function you'll need
to prepare a stable and an experimental version of that function.
Then, export the stable function and lock() the unstable function
inside it:

// In @wordpress/package1/index.js:
import { lock } from './experiments';

// The experimental function contains all the logic
function __experimentalValidateBlocks(formula, __experimentalIsStrict) {
	let isValid = false;
	// ...complex logic we don't want to duplicate...
	if ( __experimentalIsStrict ) {
		// ...
	}
	// ...complex logic we don't want to duplicate...

	return isValid;
}

// The stable public function is a thin wrapper that calls the
// experimental function with the experimental features disabled
export function validateBlocks(blocks) {
	__experimentalValidateBlocks(blocks, false);
}
lock( validateBlocks, __experimentalValidateBlocks );

// In @wordpress/package2/index.js:
import { validateBlocks } from '@wordpress/package1';
import { unlock } from './experiments';

// The experimental function may be "unlocked" given the stable function:
const __experimentalValidateBlocks = unlock(validateBlocks);
__experimentalValidateBlocks(blocks, true);

Private React Component properties

To add an experimental argument to a stable component you'll need
to prepare a stable and an experimental version of that component.
Then, export the stable function and lock() the unstable function
inside it:

// In @wordpress/package1/index.js:
import { lock } from './experiments';

// The experimental component contains all the logic
const ExperimentalMyButton = ( { title, __experimentalShowIcon = true } ) => {
	// ...complex logic we don't want to duplicate...
  
	return (
		<button>
			{ __experimentalShowIcon  && <Icon src={some icon} /> } { title }  
		</button>
	);
}

// The stable public component is a thin wrapper that calls the
// experimental component with the experimental features disabled
export const MyButton = ( { title } ) => 
    <ExperimentalMyExistingButton title={ title } __experimentalShowIcon={ false } />

lock(MyButton, ExperimentalMyButton);


// In @wordpress/package2/index.js:
import { MyButton } from '@wordpress/package1';
import { unlock } from './experiments';

// The experimental component may be "unlocked" given the stable component:
const ExperimentalMyButton = unlock(MyButton);
export function MyComponent() {
	return (
		<ExperimentalMyButton data={data} __experimentalShowIcon={ true } />
	)
}

Testing Instructions

Confirm the tests pass. Comment with your opinion on this API.

cc @dmsnell @gziolo @jsnajdr @jorgefilipecosta @priethor @georgeh @artemiomorales @tellthemachines @draganescu @peterwilsoncc

@adamziel adamziel added [Type] Experimental Experimental feature or API. Developer Experience Ideas about improving block and theme developer experience labels Nov 28, 2022
@adamziel adamziel self-assigned this Nov 28, 2022
@github-actions
Copy link

github-actions bot commented Nov 28, 2022

Size Change: +6.28 kB (0%)

Total Size: 1.33 MB

Filename Size Change
build/blob/index.min.js 483 B -4 B (-1%)
build/block-editor/content-rtl.css 3.65 kB +944 B (+35%) 🚨
build/block-editor/content.css 3.65 kB +944 B (+35%) 🚨
build/block-editor/index.min.js 184 kB +2.42 kB (+1%)
build/block-editor/style-rtl.css 14.2 kB -555 B (-4%)
build/block-editor/style.css 14.2 kB -564 B (-4%)
build/block-library/index.min.js 199 kB +972 B (0%)
build/blocks/index.min.js 50.4 kB -5 B (0%)
build/components/index.min.js 203 kB +154 B (0%)
build/components/style-rtl.css 11.6 kB +3 B (0%)
build/components/style.css 11.7 kB +2 B (0%)
build/core-data/index.min.js 15.9 kB +21 B (0%)
build/customize-widgets/index.min.js 11.7 kB +2 B (0%)
build/data/index.min.js 7.95 kB -211 B (-3%)
build/edit-navigation/index.min.js 16.2 kB +6 B (0%)
build/edit-navigation/style-rtl.css 4.14 kB +34 B (+1%)
build/edit-navigation/style.css 4.15 kB +34 B (+1%)
build/edit-post/index.min.js 34.4 kB -408 B (-1%)
build/edit-post/style-rtl.css 7.47 kB +37 B (0%)
build/edit-post/style.css 7.46 kB +39 B (+1%)
build/edit-site/index.min.js 66.5 kB +1.63 kB (+3%)
build/edit-site/style-rtl.css 9.38 kB +318 B (+4%)
build/edit-site/style.css 9.38 kB +318 B (+4%)
build/edit-widgets/index.min.js 16.8 kB +4 B (0%)
build/edit-widgets/style-rtl.css 4.49 kB +32 B (+1%)
build/edit-widgets/style.css 4.49 kB +32 B (+1%)
build/editor/index.min.js 44.1 kB +35 B (0%)
build/experiments/index.min.js 862 B -20 B (-2%)
build/keycodes/index.min.js 1.88 kB +20 B (+1%)
build/list-reusable-blocks/index.min.js 2.14 kB +8 B (0%)
build/media-utils/index.min.js 2.99 kB +48 B (+2%)
build/rich-text/index.min.js 10.8 kB +18 B (0%)
build/url/index.min.js 3.69 kB -4 B (0%)
build/widgets/index.min.js 7.31 kB +35 B (0%)
build/widgets/style-rtl.css 1.18 kB -32 B (-3%)
build/widgets/style.css 1.18 kB -32 B (-3%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/block-directory/index.min.js 7.16 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 485 B
build/block-library/blocks/button/editor.css 485 B
build/block-library/blocks/button/style-rtl.css 532 B
build/block-library/blocks/button/style.css 532 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 829 B
build/block-library/blocks/image/editor.css 828 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 298 B
build/block-library/blocks/latest-comments/style.css 298 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 376 B
build/block-library/blocks/page-list/editor.css 376 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 501 B
build/block-library/blocks/post-comments-form/style.css 501 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 318 B
build/block-library/blocks/post-featured-image/style.css 318 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 440 B
build/block-library/blocks/query/editor.css 440 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 457 B
build/block-library/blocks/table/editor.css 457 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 404 B
build/block-library/blocks/template-part/editor.css 404 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 691 B
build/block-library/blocks/video/editor.css 694 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.05 kB
build/block-library/common.css 1.05 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.7 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.4 kB
build/block-library/style.css 12.4 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/compose/index.min.js 12.3 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.71 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/editor/style-rtl.css 3.69 kB
build/editor/style.css 3.68 kB
build/element/index.min.js 4.93 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.2 kB
build/format-library/style-rtl.css 598 B
build/format-library/style.css 597 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.59 kB
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 283 B
build/reusable-blocks/style.css 283 B
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.53 kB
build/token-list/index.min.js 650 B
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/wordcount/index.min.js 1.06 kB

compressed-size-action

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting that unless I'm missing something, this approach won't work for props, function arguments, keys in block.json, theme.json.

packages/experiments/README.md Outdated Show resolved Hide resolved
packages/experiments/src/implementation.js Show resolved Hide resolved
packages/experiments/README.md Outdated Show resolved Hide resolved
@adamziel
Copy link
Contributor Author

Just noting that unless I'm missing something, this approach won't work for props, function arguments, keys in block.json, theme.json.

@youknowriad it will work for anything you can export – see my comments. I also added some examples to the contributing docs.

As for the block.json and theme.json keys – you're right. We'd need to preprocess the block.json and theme.json to remove the __experimental keys for third party blocks and themes. This preprocessor would only remove the experiments merged later than the preprocessor. All the existing public __experimental keys would continue to work for the existing plugins and themes, but no new __experimental key would. I'm playing with that on a local branch. What do you think?

@adamziel
Copy link
Contributor Author

Also CCing @jsnajdr for comments

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like how this works for exported functions, components but I don't think it solves the problem for selectors, actions, props, function arguments, theme.json, block.json yet. (see my comments)

In other words, for now at least, I'm ok with this being the approach to take for exported functions and components but until we figure out the rest, we should be able to continue with our current approach. (would love if the documentation is updated as such accordingly)

@adamziel
Copy link
Contributor Author

@youknowriad I'll update the documentation and I agree about block.json and theme.json. I have some notes about the selectors, actions, props, and function arguments, though – see the inline comments.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looking good, only thing for me is that I don't think we should be changing the policy for existing APIs and should remove this line. Thanks https://github.com/WordPress/gutenberg/pull/46131/files/c541a2c807a3a7e8af2f718e0ae99dabdb411829..05aac1d97a5ccce1cd5dac449db7593a68eee2d4#r1054431055

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No blockers from me any more. Thanks

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd love more opinions and thoughts about this PR as it's a departure from how we do things. So @WordPress/gutenberg-core should be aware of this.

Thanks for pushing through this.

This commit introduces a more convenient API for managing the
private experiments.

The idea is to "lock" private data inside public objects:

```js
const { lock, unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
	'<CONSENT STRING>',
	'@wordpress/blocks'
);

export const publicObject = {};
lock( __experiments, "Shh, private data!" );

publicObject
// {}

unlock( publicObject )
// "Shh, private data!"
```

The lock()/unlock() API makes it easier to implement private functions, components,
selectors, actions etc. Instead of using a separate import system, it's enough to
opt-in to the experiments and then `unlock()` the publicly available
artifact. For example:

```js
import { store } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { unlock } from './experiments';

function MyComponent() {
    const hasRole = useSelect( ( select ) => (
        unlock( select( store ) ).__experimentalHasContentRoleAttribute()
    ) );

    // ...
}
```

This makes `unlock()` a drop-in replacement that does not require
reworking the current code structure around the experimental APIs.

What's also nice is that the above implementation of private selectors
(coming in a follow-up PR) is short, sweet, and fairly easy to grasp.
For comparison, an implementation based on the former register/unlock
API required quite a bit of mental gymnastics:

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

const { __experimentalPrivateSelector } = unlock( dataExperiments );

import {
	__unstableSelectionHasUnmergeableBlock,
} from './store/selectors';

export const __experimentalAccessKey = register( {
	__unstableSelectionHasUnmergeableBlock: __experimentalPrivateSelector(
		store,
		__unstableSelectionHasUnmergeableBlock
	)
} );

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

import { __experimentalAccessKey as blockEditorExperiments } from '@wordpress/block-editor';
const { __unstableSelectionHasUnmergeableBlock } = unlock(__experimentalAccessKey);
```

It also had an undesirable side-effect of requiring a separate import
and a different treatment of the `__unstableSelectionHasUnmergeableBlock()`
selector – which is to say a migration would be rather difficult.
@adamziel adamziel merged commit 1b18104 into trunk Jan 17, 2023
@adamziel adamziel deleted the experiments/pivot-to-lock-unlock branch January 17, 2023 21:06
@github-actions github-actions bot added this to the Gutenberg 15.1 milestone Jan 17, 2023
@noisysocks
Copy link
Member

Nice work!

@noisysocks
Copy link
Member

Two notes so far from trying to use these APIs in the context of #47196:

  • It's unfortunate that you don't get type hinting on what's returned from unlock().

    import { Component } from '@wordpress/components'; // 'Component' is typed
    const ExperimentalComponent = unlock( Component ); // 'ExperimentalComponent' has type 'any'
  • In Story Book __dangerousOptInToUnstableAPIsOnlyForCoreModules is called multiple times assumedly due to hot module loading. This causes an error when navigating to a different component.

    Screenshot 2023-01-18 at 14 17 41

@adamziel
Copy link
Contributor Author

adamziel commented Jan 18, 2023

@noisysocks Thank you for reporting! Both problems can be solved – let's discuss in #47229 and post the solution in this PR later on.

Edit: Typehinting discussion

@adamziel
Copy link
Contributor Author

adamziel commented Feb 3, 2023

To close the loop:

It's unfortunate that you don't get type hinting on what's returned from unlock().

The TypeScript issue can be solved in a few different ways. Since folks are leaning towards locking all the experiments into a single exported experiments object, this would work:

// In the consumer package:
import { unlock } from './lock-unlock';
import { experiments as componentExperiments } from '@wordpress/components';
const { MyComponent } = unlock( componentExperiments );

// In the components package:
type Experiments = {
    MyComponent: typeof ExperimentalMyComponent
};
export const experiments = {} as HasLockedType< Experiments >;
lock(experiments, {
    MyComponent: ExperimentalMyComponent
});

// In the Experiments package:
type HasLockedType<Self, LockedType> = Self & { LockedType: LockedType };
type UnlockReturn< Arg > =
	Arg extends {LockedType: infer T}
		? T
		: Arg;
function unlock<T>( arg: T ) : UnlockReturn<T> { /* ... */ }

In Story Book __dangerousOptInToUnstableAPIsOnlyForCoreModules is called multiple times assumedly due to hot module loading. This causes an error when navigating to a different component.

@noisysocks's PR adds a new ALLOW_EXPERIMENT_REREGISTRATION feature flag that allows multiple registrations of the same package outside of WordPress core.

adamziel added a commit that referenced this pull request Feb 6, 2023
…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>
ntsekouras pushed a commit that referenced this pull request Feb 9, 2023
…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>
@mcsf
Copy link
Contributor

mcsf commented Feb 10, 2023

@adamziel, I just wanted to say that I quite like how this turned out, with the reduced surface and the proxy-powered unlocking.

adamziel added a commit to adamziel/wordpress-develop that referenced this pull request Feb 23, 2023
Gutenberg introduced a system of sharing private APIs in
WordPress/gutenberg#46131. One of the
safeguards is a check preventing the same module from opting-in
twice so that contributors cannot easily gain access by pretending
to be a core module.

That safeguard is only meant for WordPress core and not for
the released `@wordpress` packages. However, right now it is
opt-out and must be explicitly disabled by developers wanting to
install the `@wordpress` packages. Let's make it opt-out instead.

This commit opts-out from that check in WordPress core by setting
the ALLOW_EXPERIMENT_REREGISTRATION to false. Once it's merged,
the Gutenberg plugin should be adjusted to use `true` as the
default value.
adamziel added a commit that referenced this pull request Feb 23, 2023
…opt-out

Gutenberg introduced a system of sharing private APIs in
#46131. One of the safeguards is a check preventing
the same module from opting-in twice so that contributors cannot easily
gain access by pretending to be a core module.

That safeguard is only meant for WordPress core and not for
the released @WordPress packages. However, right now it is
opt-out and must be explicitly disabled by developers wanting to
install the @WordPress packages. Let's make it opt-out instead.

This commit makes the check opt-in rather than opt-out. Its counterpart
in the wordpress-develop repo makes WordPress explicitly set
the ALLOW_EXPERIMENT_REREGISTRATION to false:

WordPress/wordpress-develop#4121
adamziel added a commit that referenced this pull request Feb 28, 2023
…opt-out via IS_WORDPRESS_CORE (#48352)

Gutenberg introduced a system of sharing private APIs in #46131. One of the safeguards is a check preventing the same module from opting-in twice so that contributors cannot easily gain access by pretending to be a core module.

That safeguard is only meant for WordPress core and not for the released @WordPress packages. However, right now it is opt-out and must be explicitly disabled by developers wanting to install the @WordPress packages. Let's make it opt-out instead.

In other words:

* If we’re in WP core – prevent opting-in to private API with the same package name twice
* If we’re not in WP core – don’t prevent it 

Or:

* Before this commit, double opt-in safeguard is enabled by default
* After this commit, double opt-in safeguard is disabled by default AND WordPress core [explicitly enables it](WordPress/wordpress-develop#4121)

The corresponding PR in `wordpress-develop` repo makes WordPress explicitly set the `IS_WORDPRESS_CORE` to true:

WordPress/wordpress-develop#4121
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Developer Experience Ideas about improving block and theme developer experience [Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants