+### Block Toolbar
When the user selects a block, a number of control buttons may be shown in a toolbar above the selected block. Some of these block-level controls may be included automatically but you can also customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, those controls will be shown in the selected block's toolbar.
@@ -98,8 +98,6 @@ Note that `BlockControls` is only visible when the block is currently selected a
### Settings Sidebar
-
-
The Settings Sidebar is used to display less-often-used settings or settings that require more screen space. The Settings Sidebar should be used for **block-level settings only**.
If you have settings that affects only selected content inside a block (example: the "bold" setting for selected text inside a paragraph): **do not place it inside the Settings Sidebar**. The Settings Sidebar is displayed even when editing a block in HTML mode, so it should only contain block-level settings.
diff --git a/docs/getting-started/fundamentals/block-json.md b/docs/getting-started/fundamentals/block-json.md
index d06d2579969f4a..f659564f0cfc3c 100644
--- a/docs/getting-started/fundamentals/block-json.md
+++ b/docs/getting-started/fundamentals/block-json.md
@@ -73,7 +73,9 @@ _Example: Atributes stored in the Markup representation of the block_
x
```
-These [attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#attributes) are passed to the React component `Edit`(to display in the Block Editor), and the `save` function (to return the markup saved to the database) of the block, and to any server-side render definition for the block (see the `render` property above).
+### Reading and updating attributes
+
+These [attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#attributes) are passed to the React component `Edit`(to display in the Block Editor) and the `save` function (to return the markup saved to the database) of the block, and to any server-side render definition for the block (see the `render` property above).
The `Edit` component receives exclusively the capability of updating the attributes via the [`setAttributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#setattributes) function.
diff --git a/docs/getting-started/fundamentals/block-wrapper.md b/docs/getting-started/fundamentals/block-wrapper.md
index 6ecebbe8303864..1f2404eca9b031 100644
--- a/docs/getting-started/fundamentals/block-wrapper.md
+++ b/docs/getting-started/fundamentals/block-wrapper.md
@@ -5,7 +5,7 @@ Each block's markup is wrapped by a container HTML tag that needs to have the pr
Ensuring proper attributes to the block wrapper is especially important when using custom styling or features like `supports`.
+
+```
+
+The [markup representation of a block is parsed for the Block Editor](https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/) and the block's output for the front end:
+- In the editor, WordPress parses this block markup, captures its data and loads its `edit` version
+- In the front end, WordPress parses this block markup, captures its data and generates its final HTML markup
+
+Whenever a block is saved, the `save` function, defined when the [block is registered in the client](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/#registration-of-the-block-with-javascript-client-side), is called to return the markup that will be saved into the database within the block delimiter's comment. If `save` is `null` (common case for blocks with dynamic rendering), only a single line block delimiter's comment is stored, along with any attributes
+
+The Post Editor checks that the markup created by the `save` function is identical to the block's markup saved to the database:
+- If there are any differences, the Post Editor trigger a **block validation error**.
+- Block validation errors usually happen when a block’s `save` function is updated to change the markup produced by the block.
+- A block developer can mitigate these issues by adding a [**block deprecation**](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/) to register the change in the block.
+
+The markup of a **block with dynamic rendering** is expected to change so the markup of these blocks is not saved to the database. What is saved in the DB as representation of the block, for blocks with dynamic rendering, is a single line of HTML consisting on just the block delimiter's comment (including block attributes values). That HTML is not subject to the Post Editor’s validation.
+
+_Example: Markup representation of a block with dynamic rendering (`save` = `null`) and attributes_
+
+
+```html
+
+```
+
+## Additional Resources
+
+- [Data Flow and Data Format](https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/)
+- [Static vs. dynamic blocks: What’s the difference?](https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/)
+- [Block deprecation – a tutorial](https://developer.wordpress.org/news/2023/03/10/block-deprecation-a-tutorial/)
+- [Introduction to Templates > Block markup](https://developer.wordpress.org/themes/templates/introduction-to-templates/#block-markup) | Theme Handbook
\ No newline at end of file
diff --git a/docs/how-to-guides/platform/README.md b/docs/how-to-guides/platform/README.md
index 2ed96d6c83d876..731ae26a1ead58 100644
--- a/docs/how-to-guides/platform/README.md
+++ b/docs/how-to-guides/platform/README.md
@@ -57,4 +57,5 @@ For more info, see the [Getting Started with JavaScript tutorial](/docs/how-to-g
The [`@wordpress/block-editor` package](https://developer.wordpress.org/block-editor/packages/packages-block-editor/) allows you to create and use standalone block editors.
-You can learn more by reading the [tutorial "Building a custom block editor"](/docs/how-to-guides/platform/custom-block-editor/README.md).
+You can learn more by reading the [tutorial "Building a custom block editor"](/docs/how-to-guides/platform/custom-block-editor.md).
+
diff --git a/docs/manifest.json b/docs/manifest.json
index fb6d8550fa7ec9..7bb1e847ce03fd 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -89,6 +89,12 @@
"markdown_source": "../docs/getting-started/fundamentals/block-in-the-editor.md",
"parent": "fundamentals"
},
+ {
+ "title": "Markup representation of a block",
+ "slug": "markup-representation-block",
+ "markdown_source": "../docs/getting-started/fundamentals/markup-representation-block.md",
+ "parent": "fundamentals"
+ },
{
"title": "Working with Javascript for the Block Editor",
"slug": "javascript-in-the-block-editor",
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 2ba78177e9ec60..9f25ad0a594b89 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -341,7 +341,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
- **Name:** core/group
- **Category:** design
-- **Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage), color (background, button, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** allowedBlocks, tagName, templateLock
## Heading
diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index e269ba9ef19917..4c7e3df7cec128 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -116,7 +116,7 @@ wp.hooks.addFilter(
);
```
-#### `blocks.getSaveContent.extraProps`
+### `blocks.getSaveContent.extraProps`
A filter that applies to all blocks returning a WP Element in the `save` function. This filter is used to add extra props to the root element of the `save` function. For example: to add a className, an id, or any valid prop for this element.
@@ -229,7 +229,7 @@ const withMyPluginControls = createHigherOrderComponent( ( BlockEdit ) => {
}, 'withMyPluginControls' );
```
-#### `editor.BlockListBlock`
+### `editor.BlockListBlock`
Used to modify the block's wrapper component containing the block's `edit` component and all toolbars. It receives the original `BlockListBlock` component and returns a new wrapped component.
diff --git a/docs/toc.json b/docs/toc.json
index 4b4f5bbd69a5f6..961fc88fae4f52 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -39,6 +39,9 @@
{
"docs/getting-started/fundamentals/block-in-the-editor.md": []
},
+ {
+ "docs/getting-started/fundamentals/markup-representation-block.md": []
+ },
{
"docs/getting-started/fundamentals/javascript-in-the-block-editor.md": []
}
diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index ab2fa84361fc20..c43603046c0c08 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -54,6 +54,8 @@ function gutenberg_render_background_support( $block_content, $block ) {
$background_image_source = $block_attributes['style']['background']['backgroundImage']['source'] ?? null;
$background_image_url = $block_attributes['style']['background']['backgroundImage']['url'] ?? null;
$background_size = $block_attributes['style']['background']['backgroundSize'] ?? 'cover';
+ $background_position = $block_attributes['style']['background']['backgroundPosition'] ?? null;
+ $background_repeat = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
$background_block_styles = array();
@@ -64,8 +66,15 @@ function gutenberg_render_background_support( $block_content, $block ) {
// Set file based background URL.
// TODO: In a follow-up, similar logic could be added to inject a featured image url.
$background_block_styles['backgroundImage']['url'] = $background_image_url;
- // Only output the background size when an image url is set.
- $background_block_styles['backgroundSize'] = $background_size;
+ // Only output the background size and repeat when an image url is set.
+ $background_block_styles['backgroundSize'] = $background_size;
+ $background_block_styles['backgroundRepeat'] = $background_repeat;
+ $background_block_styles['backgroundPosition'] = $background_position;
+
+ // If the background size is set to `contain` and no position is set, set the position to `center`.
+ if ( 'contain' === $background_size && ! isset( $background_position ) ) {
+ $background_block_styles['backgroundPosition'] = 'center';
+ }
}
$styles = gutenberg_style_engine_get_styles( array( 'background' => $background_block_styles ) );
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 43a3772a1c3af0..4fe5a3a3bf6a88 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -354,6 +354,7 @@ class WP_Theme_JSON_Gutenberg {
'useRootPaddingAwareAlignments' => null,
'background' => array(
'backgroundImage' => null,
+ 'backgroundSize' => null,
),
'border' => array(
'color' => null,
@@ -650,6 +651,7 @@ public static function get_element_class_name( $element ) {
*/
const APPEARANCE_TOOLS_OPT_INS = array(
array( 'background', 'backgroundImage' ),
+ array( 'background', 'backgroundSize' ),
array( 'border', 'color' ),
array( 'border', 'radius' ),
array( 'border', 'style' ),
diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
index 950d9e00e6243f..189d411db2257f 100644
--- a/lib/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -322,9 +322,6 @@ public static function get_theme_data( $deprecated = array(), $options = array()
}
$theme_support_data['settings']['color']['defaultGradients'] = $default_gradients;
- // Classic themes without a theme.json don't support global duotone.
- $theme_support_data['settings']['color']['defaultDuotone'] = false;
-
// Allow themes to enable all border settings via theme_support.
if ( current_theme_supports( 'border' ) ) {
$theme_support_data['settings']['border']['color'] = true;
diff --git a/lib/compat/wordpress-6.4/block-patterns.php b/lib/compat/wordpress-6.4/block-patterns.php
deleted file mode 100644
index 65c31fb7a22af4..00000000000000
--- a/lib/compat/wordpress-6.4/block-patterns.php
+++ /dev/null
@@ -1,36 +0,0 @@
-= 6.4.
- *
- * @see https://github.com/WordPress/gutenberg/pull/53163
- *
- * @return void
- */
-function gutenberg_register_taxonomy_patterns() {
- $args = array(
- 'public' => false,
- 'publicly_queryable' => false,
- 'hierarchical' => false,
- 'labels' => array(
- 'name' => _x( 'Pattern Categories', 'taxonomy general name' ),
- 'singular_name' => _x( 'Pattern Category', 'taxonomy singular name' ),
- ),
- 'query_var' => false,
- 'rewrite' => false,
- 'show_ui' => true,
- '_builtin' => true,
- 'show_in_nav_menus' => false,
- 'show_in_rest' => true,
- 'show_admin_column' => true,
- );
- register_taxonomy( 'wp_pattern_category', array( 'wp_block' ), $args );
-}
-add_action( 'init', 'gutenberg_register_taxonomy_patterns' );
diff --git a/lib/compat/wordpress-6.5/block-patterns.php b/lib/compat/wordpress-6.5/block-patterns.php
index 4521d5e4e578f3..f43acda2a1035c 100644
--- a/lib/compat/wordpress-6.5/block-patterns.php
+++ b/lib/compat/wordpress-6.5/block-patterns.php
@@ -31,3 +31,49 @@ function gutenberg_register_media_pattern_categories() {
);
}
add_action( 'init', 'gutenberg_register_media_pattern_categories' );
+
+/**
+ * Adds a new taxonomy for organizing user created patterns.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/53163
+ *
+ * @return void
+ */
+function gutenberg_register_taxonomy_patterns() {
+ $args = array(
+ 'public' => false,
+ 'publicly_queryable' => false,
+ 'hierarchical' => false,
+ 'labels' => array(
+ 'name' => _x( 'Pattern Categories', 'taxonomy general name' ),
+ 'singular_name' => _x( 'Pattern Category', 'taxonomy singular name' ),
+ 'add_new_item' => __( 'Add New Category' ),
+ 'add_or_remove_items' => __( 'Add or remove pattern categories' ),
+ 'back_to_items' => __( '← Go to pattern categories' ),
+ 'choose_from_most_used' => __( 'Choose from the most used pattern categories' ),
+ 'edit_item' => __( 'Edit Pattern Category' ),
+ 'item_link' => __( 'Pattern Category Link' ),
+ 'item_link_description' => __( 'A link to a pattern category.' ),
+ 'items_list' => __( 'Pattern Categories list' ),
+ 'items_list_navigation' => __( 'Pattern Categories list navigation' ),
+ 'new_item_name' => __( 'New Pattern Category Name' ),
+ 'no_terms' => __( 'No pattern categories' ),
+ 'not_found' => __( 'No pattern categories found.' ),
+ 'popular_items' => __( 'Popular Pattern Categories' ),
+ 'search_items' => __( 'Search Pattern Categories' ),
+ 'separate_items_with_commas' => __( 'Separate pattern categories with commas' ),
+ 'update_item' => __( 'Update Pattern Category' ),
+ 'view_item' => __( 'View Pattern Category' ),
+ ),
+ 'query_var' => false,
+ 'rewrite' => false,
+ 'show_ui' => true,
+ '_builtin' => true,
+ 'show_in_nav_menus' => false,
+ 'show_in_rest' => true,
+ 'show_admin_column' => true,
+ 'show_tagcloud' => false,
+ );
+ register_taxonomy( 'wp_pattern_category', array( 'wp_block' ), $args );
+}
+add_action( 'init', 'gutenberg_register_taxonomy_patterns' );
diff --git a/lib/compat/wordpress-6.5/kses.php b/lib/compat/wordpress-6.5/kses.php
new file mode 100644
index 00000000000000..038d78645786f7
--- /dev/null
+++ b/lib/compat/wordpress-6.5/kses.php
@@ -0,0 +1,18 @@
+rest_base = 'font-collections';
+ $this->namespace = 'wp/v2';
+ }
+
+ /**
+ * Registers the routes for the objects of the controller.
+ *
+ * @since 6.5.0
+ */
+ public function register_routes() {
+ register_rest_route(
+ $this->namespace,
+ '/' . $this->rest_base,
+ array(
+ array(
+ 'methods' => WP_REST_Server::READABLE,
+ 'callback' => array( $this, 'get_font_collections' ),
+ 'permission_callback' => array( $this, 'update_font_library_permissions_check' ),
+ ),
+ )
+ );
+
+ register_rest_route(
+ $this->namespace,
+ '/' . $this->rest_base . '/(?P