Attributes may be obtained from a post's meta rather than from the block's representation in saved post content. For this, an attribute is required to specify its corresponding meta key under the `meta` key:
diff --git a/docs/reference-guides/block-api/block-templates.md b/docs/reference-guides/block-api/block-templates.md
index 343a27d1c00e1b..a565eec59b5059 100644
--- a/docs/reference-guides/block-api/block-templates.md
+++ b/docs/reference-guides/block-api/block-templates.md
@@ -59,7 +59,7 @@ registerBlockType( 'myplugin/template', {
} );
```
-See the [Meta Block Tutorial](/docs/how-to-guides/metabox/meta-block-5-finishing.md) for a full example of a template in use.
+See the [Meta Block Tutorial](/docs/how-to-guides/metabox.md#step-4-finishing-touches) for a full example of a template in use.
## Block Attributes
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index b4cfb0f110caa9..1b460219d5fda6 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -95,7 +95,7 @@ Display content in multiple columns, with blocks added to each column.
- **Name:** core/columns
- **Category:** design
-- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), ~~html~~
+- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), ~~html~~
- **Attributes:** isStackedOnMobile, verticalAlignment
## Comment Author Avatar
@@ -365,7 +365,7 @@ A collection of blocks that allow visitors to get around your site.
- **Name:** core/navigation
- **Category:** theme
-- **Supports:** align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, inserter, spacing (units), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
## Navigation Area
diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md
index 8bf9b08c273548..428b2c1a100f72 100644
--- a/docs/reference-guides/data/data-core.md
+++ b/docs/reference-guides/data/data-core.md
@@ -636,6 +636,8 @@ _Returns_
### receiveUploadPermissions
+> **Deprecated** since WP 5.9, use receiveUserPermission instead.
+
Returns an action object used in signalling that Upload permissions have been received.
_Parameters_
diff --git a/docs/toc.json b/docs/toc.json
index 35186a8579a4c3..ab49003a7a7ca4 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -48,9 +48,6 @@
"docs/how-to-guides/backward-compatibility/README.md": [
{
"docs/how-to-guides/backward-compatibility/deprecations.md": []
- },
- {
- "docs/how-to-guides/backward-compatibility/meta-box.md": []
}
]
},
@@ -122,19 +119,7 @@
},
{ "docs/how-to-guides/internationalization.md": [] },
{
- "docs/how-to-guides/metabox/README.md": [
- { "docs/how-to-guides/metabox/meta-block-1-intro.md": [] },
- {
- "docs/how-to-guides/metabox/meta-block-2-register-meta.md": []
- },
- { "docs/how-to-guides/metabox/meta-block-3-add.md": [] },
- {
- "docs/how-to-guides/metabox/meta-block-4-use-data.md": []
- },
- {
- "docs/how-to-guides/metabox/meta-block-5-finishing.md": []
- }
- ]
+ "docs/how-to-guides/metabox.md": []
},
{ "docs/how-to-guides/notices/README.md": [] },
{ "docs/how-to-guides/plugin-sidebar-0.md": [] },
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index fd2a84c84ea5f7..5ed5f2f16ae754 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -31,10 +31,11 @@ function gutenberg_register_layout_support( $block_type ) {
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked the existance of default block layout.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
+ * @param string $gap_value The block gap value to apply.
*
* @return string CSS style.
*/
-function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
+function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
$style = '';
@@ -65,8 +66,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
$style .= "$selector .alignright { float: right; margin-left: 2em; }";
if ( $has_block_gap_support ) {
- $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
- $style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
+ $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
+ $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
+ $style .= "$selector > * + * { margin-top: $gap_style; margin-bottom: 0; }";
}
} elseif ( 'flex' === $layout_type ) {
$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
@@ -89,7 +91,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style = "$selector {";
$style .= 'display: flex;';
if ( $has_block_gap_support ) {
- $style .= 'gap: var( --wp--style--block-gap, 0.5em );';
+ $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
+ $style .= "gap: $gap_style;";
} else {
$style .= 'gap: 0.5em;';
}
@@ -145,8 +148,13 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$used_layout = $default_layout;
}
- $id = uniqid();
- $style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
+ $id = uniqid();
+ $gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
+ // Skip if gap value contains unsupported characters.
+ // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
+ // because we only want to match against the value, not the CSS attribute.
+ $gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
+ $style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support, $gap_value );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index ca7b77f43864b9..78f5b59f90fb04 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -90,57 +90,6 @@ function gutenberg_skip_spacing_serialization( $block_type ) {
$spacing_support['__experimentalSkipSerialization'];
}
-
-/**
- * Renders the spacing gap support to the block wrapper, to ensure
- * that the CSS variable is rendered in all environments.
- *
- * @param string $block_content Rendered block content.
- * @param array $block Block object.
- * @return string Filtered block content.
- */
-function gutenberg_render_spacing_gap_support( $block_content, $block ) {
- $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
- $has_gap_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'blockGap' ), false );
- if ( ! $has_gap_support || ! isset( $block['attrs']['style']['spacing']['blockGap'] ) ) {
- return $block_content;
- }
-
- $gap_value = $block['attrs']['style']['spacing']['blockGap'];
-
- // Skip if gap value contains unsupported characters.
- // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
- // because we only want to match against the value, not the CSS attribute.
- if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
- return $block_content;
- }
-
- $style = sprintf(
- '--wp--style--block-gap: %s',
- esc_attr( $gap_value )
- );
-
- // Attempt to update an existing style attribute on the wrapper element.
- $injected_style = preg_replace(
- '/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
- '$1$2' . $style . '; ',
- $block_content,
- 1
- );
-
- // If there is no existing style attribute, add one to the wrapper element.
- if ( $injected_style === $block_content ) {
- $injected_style = preg_replace(
- '/<([a-zA-Z0-9]+)([ >])/',
- '<$1 style="' . $style . '"$2',
- $block_content,
- 1
- );
- };
-
- return $injected_style;
-}
-
// Register the block support.
WP_Block_Supports::get_instance()->register(
'spacing',
@@ -149,5 +98,3 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
'apply' => 'gutenberg_apply_spacing_support',
)
);
-
-add_filter( 'render_block', 'gutenberg_render_spacing_gap_support', 10, 2 );
diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
index c223b9ac96f414..83d9508fb59565 100644
--- a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
+++ b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
@@ -285,7 +285,7 @@ class WP_Theme_JSON_Gutenberg {
'spacing' => array(
'margin' => null,
'padding' => null,
- 'blockGap' => null,
+ 'blockGap' => 'top',
),
'typography' => array(
'fontFamily' => null,
@@ -428,17 +428,28 @@ private static function sanitize( $input, $valid_block_names, $valid_element_nam
$output = array_intersect_key( $input, array_flip( self::VALID_TOP_LEVEL_KEYS ) );
+ // Some styles are only meant to be available at the top-level (e.g.: blockGap),
+ // hence, the schema for blocks & elements should not have them.
+ $styles_non_top_level = self::VALID_STYLES;
+ foreach ( array_keys( $styles_non_top_level ) as $section ) {
+ foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
+ if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
+ unset( $styles_non_top_level[ $section ][ $prop ] );
+ }
+ }
+ }
+
// Build the schema based on valid block & element names.
$schema = array();
$schema_styles_elements = array();
foreach ( $valid_element_names as $element ) {
- $schema_styles_elements[ $element ] = self::VALID_STYLES;
+ $schema_styles_elements[ $element ] = $styles_non_top_level;
}
$schema_styles_blocks = array();
$schema_settings_blocks = array();
foreach ( $valid_block_names as $block ) {
$schema_settings_blocks[ $block ] = self::VALID_SETTINGS;
- $schema_styles_blocks[ $block ] = self::VALID_STYLES;
+ $schema_styles_blocks[ $block ] = $styles_non_top_level;
$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
}
$schema['styles'] = self::VALID_STYLES;
diff --git a/package-lock.json b/package-lock.json
index 7aa8a8c8073d2c..7a68a9f93f0638 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "gutenberg",
- "version": "12.2.0",
+ "version": "12.3.0-rc.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index d46a2091f862b2..507f4ff6418330 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "gutenberg",
- "version": "12.2.0",
+ "version": "12.3.0-rc.1",
"private": true,
"description": "A new WordPress editor experience.",
"author": "The WordPress Contributors",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index cc610c321eede2..15623b198b41a1 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -72,6 +72,10 @@
"rememo": "^3.0.0",
"traverse": "^0.6.6"
},
+ "peerDependencies": {
+ "react": "^17.0.0",
+ "react-dom": "^17.0.0"
+ },
"publishConfig": {
"access": "public"
}
diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 4cbaa8b21c3cc5..17bf066266d5be 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -14,7 +14,6 @@ import {
ColorIndicator,
Dropdown,
} from '@wordpress/components';
-import { isRTL } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -33,7 +32,7 @@ export default function ColorGradientSettingsDropdown( {
} ) {
let dropdownPosition;
if ( __experimentalIsRenderedInSidebar ) {
- dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
+ dropdownPosition = 'bottom left';
}
return (
diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js
index 07130f37add24a..4acf09fc03b522 100644
--- a/packages/block-editor/src/components/gradients/use-gradient.js
+++ b/packages/block-editor/src/components/gradients/use-gradient.js
@@ -59,22 +59,22 @@ export function getGradientSlugByValue( gradients, value ) {
return gradient && gradient.slug;
}
-const EMPTY_OBJECT = {};
-
export function __experimentalUseGradient( {
gradientAttribute = 'gradient',
customGradientAttribute = 'customGradient',
} = {} ) {
const { clientId } = useBlockEditContext();
- const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+ const userGradientPalette = useSetting( 'color.gradients.custom' );
+ const themeGradientPalette = useSetting( 'color.gradients.theme' );
+ const defaultGradientPalette = useSetting( 'color.gradients.default' );
const allGradients = useMemo(
() => [
- ...( gradientsPerOrigin?.custom || [] ),
- ...( gradientsPerOrigin?.theme || [] ),
- ...( gradientsPerOrigin?.default || [] ),
+ ...( userGradientPalette || [] ),
+ ...( themeGradientPalette || [] ),
+ ...( defaultGradientPalette || [] ),
],
- [ gradientsPerOrigin ]
+ [ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
);
const { gradient, customGradient } = useSelect(
( select ) => {
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 0e9e31ba3a8537..bb648bac9f212c 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -32,8 +32,6 @@ import useSetting from '../components/use-setting';
export const COLOR_SUPPORT_KEY = 'color';
-const EMPTY_OBJECT = {};
-
const hasColorSupport = ( blockType ) => {
const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
return (
@@ -232,7 +230,17 @@ export function ColorEdit( props ) {
],
[ userPalette, themePalette, defaultPalette ]
);
- const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+ const userGradientPalette = useSetting( 'color.gradients.custom' );
+ const themeGradientPalette = useSetting( 'color.gradients.theme' );
+ const defaultGradientPalette = useSetting( 'color.gradients.default' );
+ const allGradients = useMemo(
+ () => [
+ ...( userGradientPalette || [] ),
+ ...( themeGradientPalette || [] ),
+ ...( defaultGradientPalette || [] ),
+ ],
+ [ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
+ );
const areCustomSolidsEnabled = useSetting( 'color.custom' );
const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
const isBackgroundEnabled = useSetting( 'color.background' );
@@ -244,17 +252,8 @@ export function ColorEdit( props ) {
const gradientsEnabled =
areCustomGradientsEnabled ||
- ! gradientsPerOrigin?.theme ||
- gradientsPerOrigin?.theme?.length > 0;
-
- const allGradients = useMemo(
- () => [
- ...( gradientsPerOrigin?.custom || [] ),
- ...( gradientsPerOrigin?.theme || [] ),
- ...( gradientsPerOrigin?.default || [] ),
- ],
- [ gradientsPerOrigin ]
- );
+ ! themeGradientPalette ||
+ themeGradientPalette?.length > 0;
// Shouldn't be needed but right now the ColorGradientsPanel
// can trigger both onChangeColor and onChangeBackground
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index a1f17c525c0c6a..b2cfde0b5e06cc 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -215,6 +215,7 @@ export const withLayoutStyles = createHigherOrderComponent(