prep build 01/22

.eslintrc.js

@@ -50,6 +50,7 @@ const restrictedImports = [
 			'castArray',
 			'chunk',
 			'clamp',
+			'clone',
 			'cloneDeep',
 			'compact',
 			'concat',
@@ -122,6 +123,7 @@ const restrictedImports = [
 			'reject',
 			'repeat',
 			'reverse',
+			'setWith',
 			'size',
 			'snakeCase',
 			'some',

packages/block-editor/README.md

@@ -348,6 +348,10 @@ _Returns_
 
 Undocumented declaration.
 
+### experiments
+
+Experimental @wordpress/block-editor APIs.
+
 ### FontSizePicker
 
 _Related_

packages/block-editor/package.json

@@ -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",

packages/block-editor/src/components/autocomplete/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { clone } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -44,7 +39,9 @@ function useCompleters( { completers = EMPTY_ARRAY } ) {
 		if ( hasFilter( 'editor.Autocomplete.completers' ) ) {
 			// Provide copies so filters may directly modify them.
 			if ( filteredCompleters === completers ) {
-				filteredCompleters = filteredCompleters.map( clone );
+				filteredCompleters = filteredCompleters.map(
+					( completer ) => ( { ...completer } )
+				);
 			}
 
 			filteredCompleters = applyFilters(

packages/block-editor/src/components/block-pattern-setup/index.js

@@ -127,10 +127,7 @@ function BlockPatternSlide( { className, pattern, minHeight } ) {
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
 		>
-			<BlockPreview
-				blocks={ blocks }
-				__experimentalMinHeight={ minHeight }
-			/>
+			<BlockPreview blocks={ blocks } minHeight={ minHeight } />
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ description }

packages/block-editor/src/components/block-preview/README.md

@@ -30,26 +30,26 @@ Width of the preview container in pixels. Controls at what size the blocks will
 
 Set `viewportWidth` to `0` to make the viewport the same width as the container.
 
-### `__experimentalPadding`
+### minHeight
 
--   **Type** `Int`
--   **Default** `undefined`
+Minimum height of the preview iframe in pixels.
 
-Padding for the preview container body.
+-   **Type:** `Int`
+-   **Default:** `undefined`
 
-### `__experimentalStyles`
+### `additionalStyles`
 
 List of additional editor styles to load into the preview iframe. Each object
 should contain a `css` attribute. See `EditorStyles` for more info.
 
 ```jsx
 <BlockPreview
-    blocks={ blocks }
-	__experimentalStyles={ [
-		{ css: '.wp-block { margin: 16px; }' },
+	blocks={ blocks }
+	additionalStyles={ [
+		{ css: 'body { padding: 16px; }' },
 	] }
 />
 ```
 
--   **Type** `Int`
+-   **Type** `Array`
 -   **Default** `[]`

packages/block-editor/src/components/block-preview/auto.js

@@ -23,9 +23,8 @@ const MAX_HEIGHT = 2000;
 function ScaledBlockPreview( {
 	viewportWidth,
 	containerWidth,
-	__experimentalPadding,
-	__experimentalMinHeight,
-	__experimentalStyles,
+	minHeight,
+	additionalStyles = [],
 } ) {
 	if ( ! viewportWidth ) {
 		viewportWidth = containerWidth;
@@ -46,16 +45,16 @@ function ScaledBlockPreview( {
 		if ( styles ) {
 			return [
 				...styles,
-				...__experimentalStyles,
 				{
-					css: 'body{height:auto;overflow:hidden;border:none;}',
+					css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
 					__unstableType: 'presets',
 				},
+				...additionalStyles,
 			];
 		}
 
 		return styles;
-	}, [ styles, __experimentalStyles ] );
+	}, [ styles, additionalStyles ] );
 
 	const svgFilters = useMemo( () => {
 		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
@@ -73,7 +72,7 @@ function ScaledBlockPreview( {
 				height: contentHeight * scale,
 				maxHeight:
 					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
-				minHeight: __experimentalMinHeight,
+				minHeight,
 			} }
 		>
 			<Iframe
@@ -87,7 +86,6 @@ function ScaledBlockPreview( {
 					);
 					documentElement.style.position = 'absolute';
 					documentElement.style.width = '100%';
-					bodyElement.style.padding = __experimentalPadding + 'px';
 
 					// Necessary for contentResizeListener to work.
 					bodyElement.style.boxSizing = 'border-box';
@@ -105,9 +103,9 @@ function ScaledBlockPreview( {
 					// See: https://github.com/WordPress/gutenberg/pull/38175.
 					maxHeight: MAX_HEIGHT,
 					minHeight:
-						scale !== 0 && scale < 1 && __experimentalMinHeight
-							? __experimentalMinHeight / scale
-							: __experimentalMinHeight,
+						scale !== 0 && scale < 1 && minHeight
+							? minHeight / scale
+							: minHeight,
 				} }
 			>
 				{ contentResizeListener }

packages/block-editor/src/components/block-preview/index.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useDisabled, useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -20,11 +21,33 @@ import { BlockListItems } from '../block-list';
 
 export function BlockPreview( {
 	blocks,
-	__experimentalPadding = 0,
 	viewportWidth = 1200,
+	minHeight,
+	additionalStyles = [],
+	// Deprecated props:
 	__experimentalMinHeight,
-	__experimentalStyles = [],
+	__experimentalPadding,
 } ) {
+	if ( __experimentalMinHeight ) {
+		minHeight = __experimentalMinHeight;
+		deprecated( 'The __experimentalMinHeight prop', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'minHeight',
+		} );
+	}
+	if ( __experimentalPadding ) {
+		additionalStyles = [
+			...additionalStyles,
+			{ css: `body { padding: ${ __experimentalPadding }px; }` },
+		];
+		deprecated( 'The __experimentalPadding prop of BlockPreview', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'additionalStyles',
+		} );
+	}
+
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -37,16 +60,17 @@ export function BlockPreview( {
 		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
 		[ blocks ]
 	);
+
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
+
 	return (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
 			<AutoHeightBlockPreview
 				viewportWidth={ viewportWidth }
-				__experimentalPadding={ __experimentalPadding }
-				__experimentalMinHeight={ __experimentalMinHeight }
-				__experimentalStyles={ __experimentalStyles }
+				minHeight={ minHeight }
+				additionalStyles={ additionalStyles }
 			/>
 		</BlockEditorProvider>
 	);

packages/block-editor/src/components/global-styles/README.md

@@ -0,0 +1,78 @@
+# Global Styles
+
+This folder contains all the necessary APIs to manipulate the global styles data. It can be potentially extracted to its own package.
+
+# Available public APIs
+
+## useGlobalStylesReset
+
+A React hook used to retrieve whether the Global Styles have been edited and a callback to reset to the default theme values.
+
+```js
+import { useGlobalStylesReset } from '@wordpress/block-editor';
+
+function MyComponent() {
+	const [ canReset, reset ] = useGlobalStylesReset();
+
+	return canReset 
+		? <Button onClick={ () => reset() }>Reset</Button> 
+		: null;
+}
+```
+
+## useGlobalStylesOutput
+
+A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
+
+```js
+import { useGlobalStylesOutput, BlockEditorProvider, BlockList } from '@wordpress/block-editor';
+
+function MyComponent() {
+	const [ styles, settings ] = useGlobalStylesOutput();
+
+	return <BlockEditorProvider settings={{
+		styles,
+		__experimentalFeatures: settings
+	}}>
+		<BlockList />
+	</BlockEditorProvider>
+}
+```
+
+## useGlobalStyle
+
+A react hook used to retrieve the style applied to a given context.
+
+```js
+import { useGlobalStyle } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// Text color for the site root.
+	const [ color, setColor ] = useGlobalStyle( 'color.text' ); 
+
+	// The user modified color for the core paragraph block.
+	const [ pColor, setPColor ] = useGlobalStyle( 'color.text', 'core/paragraph', 'user' ); 
+
+	return "Something";
+}
+```
+
+## useGlobalSetting
+
+A react hook used to retrieve the setting applied to a given context.
+
+```js
+import { useGlobalSetting } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// The default color palette.
+	const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette' ); 
+
+	// The base (theme + core) color palette for the paragraph block,
+	// ignoring user provided palette.
+	// If the palette is not defined for the paragraph block, the root one is returned.
+	const [ pColor, setPColor ] = useGlobalSetting( 'color.palette', 'core/paragraph', 'base' ); 
+
+	return "Something";
+}
+```