prep build 04/17

.eslintrc.js

@@ -407,6 +407,24 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: [ 'packages/edit-post/**', 'packages/edit-site/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					{
+						paths: [
+							...restrictedImports,
+							{
+								name: '@wordpress/interface',
+								message:
+									'The edit-post and edit-site package should not directly import the interface package. They should import them from the private APIs of the editor package instead.',
+							},
+						],
+					},
+				],
+			},
+		},
 		{
 			files: [ 'packages/interactivity*/src/**' ],
 			rules: {

.github/CODEOWNERS

@@ -47,7 +47,7 @@
 /packages/block-editor/src/components/link-control  @getdave
 
 # Widgets
-/packages/edit-widgets                          @draganescu @talldan @adamziel @kevin940726
+/packages/edit-widgets                          @draganescu @adamziel @kevin940726
 /packages/customize-widgets
 /packages/widgets
 

changelog.txt

@@ -1,5 +1,19 @@
 == Changelog ==
 
+= 18.1.1 =
+
+## Bug Fixes
+
+- Add null check to prevent errors in `get_block_template` filter ([60491](https://github.com/WordPress/gutenberg/pull/60491))
+- Fix activating a theme in site editor when previewing ([60699](https://github.com/WordPress/gutenberg/pull/60699))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@okmttdhr @ntsekouras 
+
+
 = 18.1.0 =
 
 ## Changelog

docs/getting-started/devenv/get-started-with-wp-scripts.md

@@ -4,7 +4,7 @@ The [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/referenc
 
 A JavaScript build step refers to the process of transforming, bundling, and optimizing JavaScript source code and related assets into a format suitable for production environments. These build steps often take modern JavaScript (ESNext and JSX) and convert it to a version compatible with most browsers. They can also bundle multiple files into one, minify the code to reduce file size and perform various other tasks to optimize the code.
 
-You will typically be working with ESNext and JSX when building for the Block Editor, and most examples in the Block Editor Handbook are written in these syntaxes. Learning how to set up a build step is essential. However, configuring the necessary tools like [webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), and [ESLint](https://eslint.org/) can become complex. This is where `wp-scripts` comes in. 
+You will typically be working with ESNext and JSX when building for the Block Editor, and all examples in the Block Editor Handbook are written in these syntaxes. Learning how to set up a build step is essential. However, configuring the necessary tools like [webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), and [ESLint](https://eslint.org/) can become complex. This is where `wp-scripts` comes in.
 
 Here are a few things that `wp-scripts` can do: 
 

docs/how-to-guides/platform/custom-block-editor.md

@@ -24,7 +24,7 @@ By the end of this article, you will have a solid understanding of the block edi
 
 ## Code syntax
 
-The code snippets in this guide use JSX syntax. However, you could use plain JavaScript if you prefer. However, once familiar with JSX, many developers find it easier to read and write, so most code examples in the Block Editor Handbook use this syntax.
+The code snippets in this guide use JSX syntax. However, you could use plain JavaScript if you prefer. However, once familiar with JSX, many developers find it easier to read and write, so all code examples in the Block Editor Handbook use this syntax.
 
 ## What you're going to be building
 

docs/how-to-guides/themes/global-settings-and-styles.md

@@ -265,6 +265,7 @@ The settings section has the following structure:
 			"fontWeight": true,
 			"letterSpacing": true,
 			"lineHeight": false,
+			"textAlign": true,
 			"textColumns": false,
 			"textDecoration": true,
 			"textTransform": true

docs/reference-guides/block-api/block-attributes.md

@@ -375,9 +375,6 @@ Attribute definition:
 
 From here, meta attributes can be read and written by a block using the same interface as any attribute:
 
-
-{% JSX %}
-
 ```js
 edit( { attributes, setAttributes } ) {
 	function onChange( event ) {

docs/reference-guides/block-api/block-supports.md

@@ -149,13 +149,13 @@ When a background image is selected, the image data is stored in the `style.back
 When a background images is selected and its position or size are changed, the background-position is stored in the `style.background.backgroundPosition` and its background-size in `style.background.backgroundSize` attribute.
 
 -   `style`: an attribute of `object` type with no default assigned. This is added when `backgroundImage` or `backgroundSize` support is declared. It stores the custom values set by the user.
-    -   `background`: an attribute of `object` type. 
-        - `backgroundImage`: an attribute of `object` type, containing information about the selected image 
+    -   `background`: an attribute of `object` type.
+        - `backgroundImage`: an attribute of `object` type, containing information about the selected image
             - `url`: type `string`, URL to the image
             - `id`: type `int`, media attachment ID
             - `source`: type `string`, at the moment the only value is `file`
-            - `title`: type `string`, title of the media attachment 
-        - `backgroundPosition`: an attribute of `string` type, defining the background images position, selected by FocalPointPicker and used in CSS as the [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) value. 
+            - `title`: type `string`, title of the media attachment
+        - `backgroundPosition`: an attribute of `string` type, defining the background images position, selected by FocalPointPicker and used in CSS as the [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) value.
         - `backgroundSize`: an attribute of `string` type. defining the CSS [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) value.
 
 The block can apply a default background image, position and size by specifying its own attribute with a default. For example:
@@ -484,10 +484,10 @@ When the block declares support for `color.link`, the attributes definition is e
                         color: {
                             text: 'var:preset|color|contrast',
                         },
-						":hover": { 
-							color: { 
-								text: "#000000" 
-							} 
+						":hover": {
+							color: {
+								text: "#000000"
+							}
 						}
                     }
                 }
@@ -973,6 +973,7 @@ supports: {
 -   Subproperties:
     -   `fontSize`: type `boolean`, default value `false`
     -   `lineHeight`: type `boolean`, default value `false`
+    -   `textAlign`: type `boolean` or `array`, default value `false`
 
 The presence of this object signals that a block supports some typography related properties. When it does, the block editor will show a typography UI allowing the user to control their values.
 
@@ -983,6 +984,8 @@ supports: {
         fontSize: true,
         // Enable support and UI control for line-height.
         lineHeight: true,
+        // Enable support and UI control for text alignment.
+        textAlign: true,
     },
 }
 ```
@@ -1063,3 +1066,47 @@ attributes: {
     }
 }
 ```
+
+### typography.textAlign
+
+_**Note:** Since WordPress 6.6._
+
+-   Type: `boolean` or `array`
+-   Default value: `false`
+
+This property adds block toolbar controls which allow to change block's text alignment.
+
+```js
+supports: {
+    typography: {
+        // Declare support for block's text alignment.
+        // This adds support for all the options:
+        // left, center, right.
+        textAlign: true
+    }
+}
+```
+
+```js
+supports: {
+    typography: {
+        // Declare support for specific text alignment options.
+        textAlign: [ 'left', 'right' ]
+    }
+}
+```
+
+When the block declares support for `textAlign`, the attributes definition is extended to include a new attribute `style` of `object` type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own `style` attribute with a default. For example:
+
+```js
+attributes: {
+    style: {
+        type: 'object',
+        default: {
+            typography: {
+                textAlign: 'value'
+            }
+        }
+    }
+}
+```

docs/reference-guides/block-api/block-variations.md

@@ -1,6 +1,6 @@
 # Variations
 
-The Block Variations API  allows you to define multiple versions (variations) of a block. A block variation differs from the original block by a set of initial attributes or inner blocks. When you insert the block variation into the Editor, these attributes and/or inner blocks are applied. 
+The Block Variations API  allows you to define multiple versions (variations) of a block. A block variation differs from the original block by a set of initial attributes or inner blocks. When you insert the block variation into the Editor, these attributes and/or inner blocks are applied.
 
 Variations are an excellent way to create iterations of existing blocks without building entirely new blocks from scratch.
 
@@ -55,8 +55,8 @@ Block variations can be declared during a block's registration by providing the
 To create a variation for an existing block, such as a Core block, use `wp.blocks.registerBlockVariation()`. This function accepts the name of the block and the object defining the variation.
 
 ```js
-wp.blocks.registerBlockVariation( 
-	'core/embed', 
+wp.blocks.registerBlockVariation(
+	'core/embed',
 	{
 		name: 'custom-embed',
 		attributes: { providerNameSlug: 'custom' },
@@ -66,7 +66,7 @@ wp.blocks.registerBlockVariation(
 
 ## Removing a block variation
 
-Block variations can also be easily removed. To do so, use `wp.blocks.unregisterBlockVariation()`. This function accepts the name of the block and the `name` of the variation that should be unregistered. 
+Block variations can also be easily removed. To do so, use `wp.blocks.unregisterBlockVariation()`. This function accepts the name of the block and the `name` of the variation that should be unregistered.
 
 ```js
 wp.blocks.unregisterBlockVariation( 'core/embed', 'youtube' );
@@ -84,9 +84,9 @@ variations: [
 		name: 'blue',
 		title: __( 'Blue Quote' ),
 		isDefault: true,
-		attributes: { 
-			color: 'blue', 
-			className: 'is-style-blue-quote' 
+		attributes: {
+			color: 'blue',
+			className: 'is-style-blue-quote'
 		},
 		icon: 'format-quote',
 		isActive: ( blockAttributes, variationAttributes ) =>
@@ -99,16 +99,16 @@ variations: [
 
 By default, all variations will show up in the Inserter in addition to the original block type item. However, setting the `isDefault` flag for any variations listed will override the regular block type in the Inserter. This is a great tool for curating the Editor experience to your specific needs.
 
-For example, if you want Media & Text block to display the image on the right by default, you could create a variation like this: 
+For example, if you want Media & Text block to display the image on the right by default, you could create a variation like this:
 
 ```js
  wp.blocks.registerBlockVariation(
-	'core/media-text', 
+	'core/media-text',
 	{
 		name: 'media-text-media-right',
 		title: __( 'Media & Text' ),
 		isDefault: true,
-		attributes: { 
+		attributes: {
 			mediaPosition: 'right'
 		}
 	}
@@ -125,20 +125,53 @@ The solution is to unregister the other variation before registering your variat
 
 ## Using `isActive`
 
-While the `isActive` property is optional, you will often want to use it to display information about the block variation after the block has been inserted. For example, this API is used in `useBlockDisplayInformation` hook to fetch and display proper information in places like the `BlockCard` or `Breadcrumbs` components.
+While the `isActive` property is optional, it's recommended. This API is used by the block editor to check which variation is active, and display the correct variation's title, icon and description when an instance of the variation is selected in the editor.
+
+If `isActive` is not set, the Editor cannot distinguish between an instance of the original block and your variation, so the original block information will be displayed.
+
+The property can be set to either a function or an array of strings (`string[]`).
 
-If `isActive` is not set, the Editor cannot distinguish between the original block and your variation, so the original block information will be displayed. 
+The function version of this property accepts a block instance's `blockAttributes` as the first argument, and the `variationAttributes` declared for a variation as the second argument. These arguments can be used to determine if a variation is active by comparing them and returning a `true` or `false` (indicating whether this variation is inactive for this block instance).
 
-The property can use either a function or an array of strings (`string[]`). The function accepts `blockAttributes` and `variationAttributes`, which can be used to determine if a variation is active. In the Embed block, the primary differentiator is the `providerNameSlug` attribute, so if you wanted to determine if the YouTube Embed variation was active, you could do something like this: 
+As an example, in the core Embed block, the `providerNameSlug` attribute is used to determine the embed provider (e.g. 'youtube' or 'twitter'). The variations may be declared like this:
 
+```js
+const variations = [
+	{
+		name: 'twitter',
+		title: 'Twitter',
+		icon: embedTwitterIcon,
+		keywords: [ 'tweet', __( 'social' ) ],
+		description: __( 'Embed a tweet.' ),
+		patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ],
+		attributes: { providerNameSlug: 'twitter', responsive: true },
+	},
+	{
+		name: 'youtube',
+		title: 'YouTube',
+		icon: embedYouTubeIcon,
+		keywords: [ __( 'music' ), __( 'video' ) ],
+		description: __( 'Embed a YouTube video.' ),
+		patterns: [
+			/^https?:\/\/((m|www)\.)?youtube\.com\/.+/i,
+			/^https?:\/\/youtu\.be\/.+/i,
+		],
+		attributes: { providerNameSlug: 'youtube', responsive: true },
+	},
+	// ...
+]
 ```
+
+ The `isActive` function can compare the block instance value for `providerNameSlug` to the value declared in the variation's declaration (the values in the code snippet above) to determine which embed variation is active:
+
+```js
 isActive: ( blockAttributes, variationAttributes ) =>
 	blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,
 ```
 
-You can also use a `string[]` to tell which attributes should be compared as a shorthand. Each attribute will be checked and the variation will be active if all of them match. Using the same example of the YouTube Embed variation, the string version would look like this:
+The `string[]` version is used to declare which attributes should be compared as a shorthand. Each attribute will be checked and the variation will be active if all of them match. Using the same example for the embed block, the string version would look like this:
 
-```
+```js
 isActive: [ 'providerNameSlug' ]
 ```
 
@@ -175,4 +208,4 @@ wp.blocks.registerBlockVariation(
 
 The `isActive` check on both variations tests the `textColor`, but each variations uses `vivid-red`. Since the `paragraph-red` variation is registered first, once the `paragraph-red-grey` variation is inserted into the Editor, it will have the title `Red Paragraph` instead of `Red/Grey Paragraph`. As soon as the Editor finds a match, it stops checking.
 
-There have been [discussions](https://github.com/WordPress/gutenberg/issues/41303#issuecomment-1526193087) around how the API can be improved, but as of WordPress 6.3, this remains an issue to watch out for.
+There have been [discussions](https://github.com/WordPress/gutenberg/issues/41303#issuecomment-1526193087) around how the API can be improved, but as of WordPress 6.3, this remains an issue to watch out for.

docs/reference-guides/core-blocks.md

@@ -860,7 +860,7 @@ Displays the name of this site. Update the block, and the changes apply everywhe
 
 ## Social Icon
 
-Display an icon linking to a social media profile or site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-link))
+Display an icon linking to a social profile or site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-link))
 
 -	**Name:** core/social-link
 -	**Category:** widgets
@@ -870,7 +870,7 @@ Display an icon linking to a social media profile or site. ([Source](https://git
 
 ## Social Icons
 
-Display icons linking to your social media profiles or sites. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-links))
+Display icons linking to your social profiles or sites. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-links))
 
 -	**Name:** core/social-links
 -	**Category:** widgets

docs/reference-guides/data/data-core-edit-site.md

@@ -371,7 +371,7 @@ Resolves the template for a page and displays both. If no path is given, attempt
 
 _Returns_
 
--   `number`: The resolved template ID for the page route.
+-   `Object`: Action object.
 
 ### setTemplate
 

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -185,6 +185,7 @@ Settings related to typography.
 | fluid | undefined | false |  |
 | letterSpacing | boolean | true |  |
 | lineHeight | boolean | false |  |
+| textAlign | boolean | true |  |
 | textColumns | boolean | false |  |
 | textDecoration | boolean | true |  |
 | writingMode | boolean | false |  |
@@ -268,6 +269,7 @@ Typography styles.
 | fontWeight | string, object |  |
 | letterSpacing | string, object |  |
 | lineHeight | string, object |  |
+| textAlign | string |  |
 | textColumns | string |  |
 | textDecoration | string, object |  |
 | writingMode | string, object |  |