Post editor: iframe if all blocks are v3 (#48286)

WordPress · Jun 2, 2023 · 3a419b8 · 3a419b8
1 parent 7180361
commit 3a419b8
Show file tree

Hide file tree

Showing 227 changed files with 1,083 additions and 766 deletions.
diff --git a/docs/getting-started/create-block/block-anatomy.md b/docs/getting-started/create-block/block-anatomy.md
@@ -44,7 +44,7 @@ Most of the properties are set in the `src/block.json` file.
 ```json
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "create-block/gutenpride",
 	"version": "0.1.0",
 	"title": "Gutenpride",

diff --git a/docs/getting-started/create-block/wp-plugin.md b/docs/getting-started/create-block/wp-plugin.md
@@ -104,7 +104,7 @@ The `register_block_type` function registers the block we are going to create an
 ```json
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "create-block/gutenpride",
 	"version": "0.1.0",
 	"title": "Gutenpride",

diff --git a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
@@ -205,7 +205,7 @@ For example:
 
 ```json
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "gutenberg-examples/example-02-stylesheets",
 	"title": "Example: Stylesheets",
 	"icon": "universal-access-alt",

diff --git a/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md b/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md
@@ -24,7 +24,7 @@ import {
 } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: Controls (esnext)',
 	icon: 'universal-access-alt',
 	category: 'design',
@@ -208,7 +208,7 @@ import {
 } from '@wordpress/block-editor';
 
 registerBlockType( 'create-block/gutenpride', {
-	apiVersion: 2,
+	apiVersion: 3,
 	attributes: {
 		message: {
 			type: 'string',

diff --git a/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md b/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md
@@ -20,7 +20,7 @@ import {
 } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-dynamic', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: last post title',
 	icon: 'megaphone',
 	category: 'widgets',
@@ -119,7 +119,7 @@ function gutenberg_examples_dynamic() {
 	register_block_type(
 		'gutenberg-examples/example-dynamic',
 		array(
-			'api_version'       => 2,
+			'api_version'       => 3,
 			'category'          => 'widgets',
 			'attributes'        => array(
 				'bgColor'   => array( 'type' => 'string' ),
@@ -144,7 +144,7 @@ import { useSelect } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-dynamic-block-supports', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: last post title(block supports)',
 	icon: 'megaphone',
 	category: 'widgets',
@@ -195,7 +195,7 @@ function gutenberg_examples_dynamic_block_supports() {
 	register_block_type(
 		'gutenberg-examples/example-dynamic-block-supports',
 		array(
-			'api_version'       => 2,
+			'api_version'       => 3,
 			'category'          => 'widgets',
 			'supports'          => array( 'color' => true ),
 			'render_callback'   => 'gutenberg_examples_dynamic_block_supports_render_callback',

diff --git a/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md b/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md
@@ -16,7 +16,7 @@ import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps, RichText } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: Basic with block supports',
 	icon: 'universal-access-alt',
 	category: 'design',
@@ -73,7 +73,7 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 	var useBlockProps = blockEditor.useBlockProps;
 
 	blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
-		apiVersion: 2,
+		apiVersion: 3,
 		title: 'Example: Basic with block supports',
 		icon: 'universal-access-alt',
 		category: 'design',
@@ -127,7 +127,7 @@ Now, let's alter the block.json file for that block, and add the supports key. (
 
 ```json
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "gutenberg-examples/example-03-editable-esnext",
 	"title": "Example: Basic with block supports",
 	"icon": "universal-access-alt",

diff --git a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md
@@ -26,7 +26,7 @@ import { useSelect } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-dynamic', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: last post',
 	icon: 'megaphone',
 	category: 'widgets',
@@ -62,7 +62,7 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 		useBlockProps = blockEditor.useBlockProps;
 
 	registerBlockType( 'gutenberg-examples/example-dynamic', {
-		apiVersion: 2,
+		apiVersion: 3,
 		title: 'Example: last post',
 		icon: 'megaphone',
 		category: 'widgets',
@@ -132,7 +132,7 @@ function gutenberg_examples_dynamic() {
 	);
 
 	register_block_type( 'gutenberg-examples/example-dynamic', array(
-		'api_version' => 2,
+		'api_version' => 3,
 		'editor_script' => 'gutenberg-examples-dynamic',
 		'render_callback' => 'gutenberg_examples_dynamic_render_callback'
 	) );
@@ -165,7 +165,7 @@ import ServerSideRender from '@wordpress/server-side-render';
 import { useBlockProps } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-dynamic', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: last post',
 	icon: 'megaphone',
 	category: 'widgets',
@@ -194,7 +194,7 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 		useBlockProps = blockEditor.useBlockProps;
 
 	registerBlockType( 'gutenberg-examples/example-dynamic', {
-		apiVersion: 2,
+		apiVersion: 3,
 		title: 'Example: last post',
 		icon: 'megaphone',
 		category: 'widgets',

diff --git a/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md b/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md
@@ -60,7 +60,7 @@ import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps, RichText } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: Editable (esnext)',
 	icon: 'universal-access-alt',
 	category: 'design',
@@ -117,7 +117,7 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 	var useBlockProps = blockEditor.useBlockProps;
 
 	blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
-		apiVersion: 2,
+		apiVersion: 3,
 		title: 'Example: Editable',
 		icon: 'universal-access-alt',
 		category: 'design',

diff --git a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md
@@ -43,7 +43,7 @@ Create a basic `block.json` file there:
 
 ```json
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"title": "Example: Basic (ESNext)",
 	"name": "gutenberg-examples/example-01-basic-esnext",
 	"category": "layout",
@@ -56,7 +56,7 @@ Create a basic `block.json` file there:
 
 ```json
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"title": "Example: Basic",
 	"name": "gutenberg-examples/example-01-basic",
 	"category": "layout",

diff --git a/docs/how-to-guides/internationalization.md b/docs/how-to-guides/internationalization.md
@@ -28,7 +28,7 @@ function myguten_block_init() {
     );
 
     register_block_type( 'myguten/simple', array(
-		'api_version' => 2,
+		'api_version' => 3,
         'editor_script' => 'myguten-script',
     ) );
 }
@@ -46,7 +46,7 @@ import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
 
 registerBlockType( 'myguten/simple', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: __( 'Simple Block', 'myguten' ),
 	category: 'widgets',
 

diff --git a/docs/how-to-guides/metabox.md b/docs/how-to-guides/metabox.md
@@ -152,7 +152,7 @@ function myguten_render_paragraph( $block_attributes, $content ) {
 }
 
 register_block_type( 'core/paragraph', array(
-	'api_version' => 2,
+	'api_version' => 3,
 	'render_callback' => 'myguten_render_paragraph',
 ) );
 ```

diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md
@@ -14,7 +14,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 
 // ...
 const blockSettings = {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	// ...
 
@@ -30,7 +30,7 @@ const blockSettings = {
 
 ```js
 var blockSettings = {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	// ...
 
@@ -58,7 +58,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 
 // ...
 const blockSettings = {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	// ...
 
@@ -76,7 +76,7 @@ const blockSettings = {
 
 ```js
 var blockSettings = {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	// ...
 

diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
@@ -7,7 +7,7 @@ Starting in WordPress 5.8 release, we recommend using the `block.json` metadata
 ```json
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "my-plugin/notice",
 	"title": "Notice",
 	"category": "text",
@@ -150,10 +150,10 @@ This section describes all the properties that can be added to the `block.json`
 -   Default: `1`
 
 ```json
-{ "apiVersion": 2 }
+{ "apiVersion": 3 }
 ```
 
-The version of the Block API used by the block. The most recent version is `2` and it was introduced in WordPress 5.6.
+The version of the Block API used by the block. The most recent version is `3` and it was introduced in WordPress 6.3.
 
 See the [the API versions documentation](/docs/reference-guides/block-api/block-api-versions.md) for more details.
 

diff --git a/lib/blocks.php b/lib/blocks.php
@@ -77,6 +77,7 @@ function gutenberg_reregister_core_block_types() {
 				'navigation-link.php'              => 'core/navigation-link',
 				'navigation-submenu.php'           => 'core/navigation-submenu',
 				'page-list.php'                    => 'core/page-list',
+				'page-list-item.php'               => 'core/page-list-item',
 				'pattern.php'                      => 'core/pattern',
 				'post-author.php'                  => 'core/post-author',
 				'post-author-name.php'             => 'core/post-author-name',

diff --git a/lib/compat/wordpress-6.3/script-loader.php b/lib/compat/wordpress-6.3/script-loader.php
@@ -42,8 +42,12 @@ function _gutenberg_get_iframed_editor_assets() {
 	$wp_styles->registered  = $current_wp_styles->registered;
 	$wp_scripts->registered = $current_wp_scripts->registered;
 
-	// We do not need reset styles for the iframed editor.
-	$wp_styles->done = array( 'wp-reset-editor-styles' );
+	// We generally do not need reset styles for the iframed editor.
+	// However, if it's a classic theme, margins will be added to every block,
+	// which is reset specifically for list items, so classic themes rely on
+	// these reset styles.
+	$wp_styles->done =
+		wp_theme_has_theme_json() ? array( 'wp-reset-editor-styles' ) : array();
 
 	wp_enqueue_script( 'wp-polyfill' );
 	// Enqueue the `editorStyle` handles for all core block, and dependencies.

diff --git a/packages/block-editor/src/components/block-edit/test/edit.js b/packages/block-editor/src/components/block-edit/test/edit.js
@@ -107,7 +107,7 @@ describe( 'Edit', () => {
 		it( 'should assign context', () => {
 			const edit = ( { context } ) => context.value;
 			registerBlockType( 'core/test-block', {
-				apiVersion: 2,
+				apiVersion: 3,
 				category: 'text',
 				title: 'block title',
 				usesContext: [ 'value' ],

diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
@@ -38,12 +38,6 @@ export function useCompatibilityStyles() {
 					return accumulator;
 				}
 
-				// Generally, ignore inline styles. We add inline styles belonging to a
-				// stylesheet later, which may or may not match the selectors.
-				if ( ownerNode.tagName !== 'LINK' ) {
-					return accumulator;
-				}
-
 				// Don't try to add the reset styles, which were removed as a dependency
 				// from `edit-blocks` for the iframe since we don't need to reset admin
 				// styles.
@@ -76,20 +70,25 @@ export function useCompatibilityStyles() {
 				}
 
 				if ( matchFromRules( cssRules ) ) {
-					// Display warning once we have a way to add style dependencies to the editor.
-					// See: https://github.com/WordPress/gutenberg/pull/37466.
-					accumulator.push( ownerNode.cloneNode( true ) );
+					const isInline = ownerNode.tagName === 'STYLE';
 
 					// Add inline styles belonging to the stylesheet.
 					const inlineCssId = ownerNode.id.replace(
-						'-css',
-						'-inline-css'
+						isInline ? '-inline-css' : '-css',
+						isInline ? '-css' : '-inline-css'
 					);
-					const inlineCssElement =
-						document.getElementById( inlineCssId );
+					const otherElement = document.getElementById( inlineCssId );
+
+					// If the matched stylesheet is inline, add the main
+					// stylesheet before the inline style element.
+					if ( otherElement && isInline ) {
+						accumulator.push( otherElement.cloneNode( true ) );
+					}
+
+					accumulator.push( ownerNode.cloneNode( true ) );
 
-					if ( inlineCssElement ) {
-						accumulator.push( inlineCssElement.cloneNode( true ) );
+					if ( otherElement && ! isInline ) {
+						accumulator.push( otherElement.cloneNode( true ) );
 					}
 				}
 

diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md
@@ -23,7 +23,7 @@ import {
 } from '@wordpress/block-editor';
 
 registerBlockType( 'my-plugin/inspector-controls-example', {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	title: 'Inspector controls example',
 

diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/archives",
 	"title": "Archives",
 	"category": "widgets",

diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/audio",
 	"title": "Audio",
 	"category": "media",

diff --git a/packages/block-library/src/avatar/block.json b/packages/block-library/src/avatar/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/avatar",
 	"title": "Avatar",
 	"category": "theme",

diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/block",
 	"title": "Reusable block",
 	"category": "reusable",