prep build 6/5

bph · Jun 5, 2024 · 916d7b5 · 916d7b5
2 parents a48d64f + a58e49b
commit 916d7b5
Show file tree

Hide file tree

Showing 70 changed files with 625 additions and 740 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -83,6 +83,72 @@ const restrictedImports = [
 	},
 ];
 
+const restrictedSyntax = [
+	// NOTE: We can't include the forward slash in our regex or
+	// we'll get a `SyntaxError` (Invalid regular expression: \ at end of pattern)
+	// here. That's why we use \\u002F in the regexes below.
+	{
+		selector:
+			'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
+		message: 'Path access on WordPress dependencies is not allowed.',
+	},
+	{
+		selector:
+			'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' +
+			majorMinorRegExp +
+			'/]',
+		message:
+			'Deprecated functions must be removed before releasing this version.',
+	},
+	{
+		selector:
+			'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',
+		message:
+			'This method is deprecated. You should use the more explicit API methods available.',
+	},
+	{
+		selector:
+			'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]',
+		message: 'Prefer page.waitForSelector instead.',
+	},
+	{
+		selector: 'JSXAttribute[name.name="id"][value.type="Literal"]',
+		message:
+			'Do not use string literals for IDs; use withInstanceId instead.',
+	},
+	{
+		// Discourage the usage of `Math.random()` as it's a code smell
+		// for UUID generation, for which we already have a higher-order
+		// component: `withInstanceId`.
+		selector:
+			'CallExpression[callee.object.name="Math"][callee.property.name="random"]',
+		message:
+			'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)',
+	},
+	{
+		selector:
+			'CallExpression[callee.name="withDispatch"] > :function > BlockStatement > :not(VariableDeclaration,ReturnStatement)',
+		message:
+			'withDispatch must return an object with consistent keys. Avoid performing logic in `mapDispatchToProps`.',
+	},
+	{
+		selector:
+			'LogicalExpression[operator="&&"][left.property.name="length"][right.type="JSXElement"]',
+		message:
+			'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
+	},
+];
+
+/** `no-restricted-syntax` rules for components. */
+const restrictedSyntaxComponents = [
+	{
+		selector:
+			'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="__experimentalIsFocusable"])) JSXAttribute[name.name="disabled"]',
+		message:
+			'`disabled` used without the `__experimentalIsFocusable` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)',
+	},
+];
+
 module.exports = {
 	root: true,
 	extends: [
@@ -147,63 +213,7 @@ module.exports = {
 				disallowTypeAnnotations: false,
 			},
 		],
-		'no-restricted-syntax': [
-			'error',
-			// NOTE: We can't include the forward slash in our regex or
-			// we'll get a `SyntaxError` (Invalid regular expression: \ at end of pattern)
-			// here. That's why we use \\u002F in the regexes below.
-			{
-				selector:
-					'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
-				message:
-					'Path access on WordPress dependencies is not allowed.',
-			},
-			{
-				selector:
-					'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' +
-					majorMinorRegExp +
-					'/]',
-				message:
-					'Deprecated functions must be removed before releasing this version.',
-			},
-			{
-				selector:
-					'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',
-				message:
-					'This method is deprecated. You should use the more explicit API methods available.',
-			},
-			{
-				selector:
-					'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]',
-				message: 'Prefer page.waitForSelector instead.',
-			},
-			{
-				selector: 'JSXAttribute[name.name="id"][value.type="Literal"]',
-				message:
-					'Do not use string literals for IDs; use withInstanceId instead.',
-			},
-			{
-				// Discourage the usage of `Math.random()` as it's a code smell
-				// for UUID generation, for which we already have a higher-order
-				// component: `withInstanceId`.
-				selector:
-					'CallExpression[callee.object.name="Math"][callee.property.name="random"]',
-				message:
-					'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)',
-			},
-			{
-				selector:
-					'CallExpression[callee.name="withDispatch"] > :function > BlockStatement > :not(VariableDeclaration,ReturnStatement)',
-				message:
-					'withDispatch must return an object with consistent keys. Avoid performing logic in `mapDispatchToProps`.',
-			},
-			{
-				selector:
-					'LogicalExpression[operator="&&"][left.property.name="length"][right.type="JSXElement"]',
-				message:
-					'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
-			},
-		],
+		'no-restricted-syntax': [ 'error', ...restrictedSyntax ],
 	},
 	overrides: [
 		{
@@ -262,12 +272,8 @@ module.exports = {
 			rules: {
 				'no-restricted-syntax': [
 					'error',
-					{
-						selector:
-							'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="__experimentalIsFocusable"])) JSXAttribute[name.name="disabled"]',
-						message:
-							'`disabled` used without the `__experimentalIsFocusable` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)',
-					},
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
 				],
 			},
 		},
@@ -390,6 +396,7 @@ module.exports = {
 			rules: {
 				'no-restricted-syntax': [
 					'error',
+					...restrictedSyntax,
 					{
 						selector:
 							':matches(Literal[value=/--wp-admin-theme-/],TemplateElement[value.cooked=/--wp-admin-theme-/])',

diff --git a/backport-changelog/6.6/6616.md b/backport-changelog/6.6/6616.md
@@ -2,4 +2,6 @@ https://github.com/WordPress/wordpress-develop/pull/6616
 
 * https://github.com/WordPress/gutenberg/pull/58409
 * https://github.com/WordPress/gutenberg/pull/61328
-* https://github.com/WordPress/gutenberg/pull/61842
+* https://github.com/WordPress/gutenberg/pull/61842
+* https://github.com/WordPress/gutenberg/pull/62199
+* https://github.com/WordPress/gutenberg/pull/62252
diff --git a/backport-changelog/6.6/6731.md b/backport-changelog/6.6/6731.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6731
+
+* https://github.com/WordPress/gutenberg/pull/62299
diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md
@@ -310,20 +310,21 @@ There's one special setting property, `appearanceTools`, which is a boolean and
 
 To retain backward compatibility, the existing `add_theme_support` declarations that configure the block editor are retrofit in the proper categories for the top-level section. For example, if a theme uses `add_theme_support('disable-custom-colors')`, it'll be the same as setting `settings.color.custom` to `false`. If the `theme.json` contains any settings, these will take precedence over the values declared via `add_theme_support`. This is the complete list of equivalences:
 
-| add_theme_support           | theme.json setting                                        |
-| --------------------------- | --------------------------------------------------------- |
-| `custom-line-height`        | Set `typography.lineHeight` to `true`.              |
-| `custom-spacing`            | Set `spacing.padding` to `true`.                    |
-| `custom-units`              | Provide the list of units via `spacing.units`.            |
-| `disable-custom-colors`     | Set `color.custom` to `false`.                            |
-| `disable-custom-font-sizes` | Set `typography.customFontSize` to `false`.               |
-| `disable-custom-gradients`  | Set `color.customGradient` to `false`.                    |
-| `editor-color-palette`      | Provide the list of colors via `color.palette`.           |
-| `editor-font-sizes`         | Provide the list of font size via `typography.fontSizes`. |
-| `editor-gradient-presets`   | Provide the list of gradients via `color.gradients`.      |
-| `appearance-tools`          | Set `appearanceTools` to `true`.                          |
-| `border`                    | Set `border: color, radius, style, width` to `true`.      |
-| `link-color `               | Set `color.link` to `true`.                               |
+| add_theme_support           | theme.json setting                                            |
+| --------------------------- | ------------------------------------------------------------- |
+| `custom-line-height`        | Set `typography.lineHeight` to `true`.                        |
+| `custom-spacing`            | Set `spacing.padding` to `true`.                              |
+| `custom-units`              | Provide the list of units via `spacing.units`.                |
+| `disable-custom-colors`     | Set `color.custom` to `false`.                                |
+| `disable-custom-font-sizes` | Set `typography.customFontSize` to `false`.                   |
+| `disable-custom-gradients`  | Set `color.customGradient` to `false`.                        |
+| `editor-color-palette`      | Provide the list of colors via `color.palette`.               |
+| `editor-font-sizes`         | Provide the list of font size via `typography.fontSizes`.     |
+| `editor-gradient-presets`   | Provide the list of gradients via `color.gradients`.          |
+| `editor-spacing-sizes`      | Provide the list of spacing sizes via `spacing.spacingSizes`. |
+| `appearance-tools`          | Set `appearanceTools` to `true`.                              |
+| `border`                    | Set `border: color, radius, style, width` to `true`.          |
+| `link-color `               | Set `color.link` to `true`.                                   |
 
 #### Presets
 

diff --git a/docs/reference-guides/block-api/block-styles.md b/docs/reference-guides/block-api/block-styles.md
@@ -1,6 +1,6 @@
 # Styles
 
-Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Getting Started with JavaScript tutorial](/docs/how-to-guides/javascript/) for a full example.
+Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Use styles and stylesheets](/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md) for a full example on how to apply styles to a block.
 
 _Example:_
 

diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md
@@ -33,7 +33,7 @@ registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
 
 SlotFills are created using `createSlotFill`. This creates two components, `Slot` and `Fill` which are then used to create a new component that is exported on the `wp.plugins` global.
 
-**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js#L54))
+**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-post-status-info/index.js#L55))
 
 ```js
 /**
@@ -61,34 +61,70 @@ export default PluginPostStatusInfo;
 This new Slot is then exposed in the editor. The example below is from core and represents the Summary panel.
 
 As we can see, the `<PluginPostStatusInfo.Slot>` is wrapping all of the items that will appear in the panel.
-Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed between the `<PostAuthor/>` and `<PostTrash/>` components.
+Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed in the end of the component.
 
-See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/edit-post/src/components/sidebar/post-status/index.js#L26).
+See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.js#L39).
 
 ```js
-const PostStatus = ( { isOpened, onTogglePanel } ) => (
-	<PanelBody
-		className="edit-post-post-status"
-		title={ __( 'Summary' ) }
-		opened={ isOpened }
-		onToggle={ onTogglePanel }
-	>
-		<PluginPostStatusInfo.Slot>
-			{ ( fills ) => (
-				<>
-					<PostVisibility />
-					<PostSchedule />
-					<PostFormat />
-					<PostSticky />
-					<PostPendingStatus />
-					<PostAuthor />
-					{ fills }
-					<PostTrash />
-				</>
-			) }
-		</PluginPostStatusInfo.Slot>
-	</PanelBody>
-);
+export default function PostSummary( { onActionPerformed } ) {
+	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
+		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+		const { isEditorPanelRemoved, getCurrentPostType } =
+			select( editorStore );
+		return {
+			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	return (
+		<PostPanelSection className="editor-post-summary">
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<VStack spacing={ 4 }>
+							<PostCardPanel
+								actions={
+									<PostActions
+										onActionPerformed={ onActionPerformed }
+									/>
+								}
+							/>
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
+							<VStack spacing={ 1 }>
+								<PostContentInformation />
+								<PostLastEditedPanel />
+							</VStack>
+							{ ! isRemovedPostStatusPanel && (
+								<VStack spacing={ 2 }>
+									<VStack spacing={ 1 }>
+										<PostStatusPanel />
+										<PostSchedulePanel />
+										<PostURLPanel />
+										<PostAuthorPanel />
+										<PostTemplatePanel />
+										<PostDiscussionPanel />
+										<PageAttributesPanel />
+										<PostSyncStatus />
+										<BlogTitle />
+										<PostsPerPage />
+										<SiteDiscussion />
+										<PostFormatPanel />
+										<PostStickyPanel />
+									</VStack>
+									<TemplateAreas />
+									{ fills }
+								</VStack>
+							) }
+						</VStack>
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
+		</PostPanelSection>
+	);
+}
 ```
 
 ## Currently available SlotFills and examples