prep build 07/18

.eslintrc.js

@@ -277,6 +277,31 @@ module.exports = {
 				],
 			},
 		},
+		{
+			// Temporary rules until we're ready to officially deprecate the bottom margins.
+			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
+			excludedFiles: [
+				'packages/components/src/**/@(test|stories)/**',
+				'**/*.@(native|ios|android).js',
+			],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
+					...[
+						'FocalPointPicker',
+						'TextareaControl',
+						'TreeSelect',
+					].map( ( componentName ) => ( {
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__nextHasNoMarginBottom"]))`,
+						message:
+							componentName +
+							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
+					} ) ),
+				],
+			},
+		},
 		{
 			files: [
 				// Components package.

.gitattributes

@@ -20,3 +20,6 @@ changelog.txt linguist-language=Markdown
 
 # Flag docs directory as documentation for GitHub stats.
 docs/** linguist-documentation
+
+# TSConfig files use jsonc.
+tsconfig*.json linguist-language=jsonc

bin/api-docs/gen-theme-reference.js → bin/api-docs/gen-theme-reference.mjs

@@ -7,8 +7,13 @@
 /**
  * External dependencies
  */
-const path = require( 'path' );
-const fs = require( 'fs' );
+import path from 'path';
+import fs from 'fs';
+import url from 'url';
+import $RefParser from '@apidevtools/json-schema-ref-parser';
+
+const __dirname = path.dirname( url.fileURLToPath( import.meta.url ) );
+
 /**
  * Path to root project directory.
  *
@@ -58,7 +63,7 @@ const END_TOKEN = '<!-- END TOKEN Autogenerated - DO NOT EDIT -->';
  */
 const TOKEN_PATTERN = new RegExp( START_TOKEN + '[^]*' + END_TOKEN );
 
-const themejson = require( THEME_JSON_SCHEMA_FILE );
+const themejson = await $RefParser.dereference( THEME_JSON_SCHEMA_FILE );
 
 /**
  * Convert object keys to an array.
@@ -74,42 +79,6 @@ const keys = ( maybeObject ) => {
 	return Object.keys( maybeObject );
 };
 
-/**
- * Get definition from ref.
- *
- * @param {string} ref
- * @return {Object} definition
- * @throws {Error} If the referenced definition is not found in 'themejson.definitions'.
- *
- * @example
- * getDefinition( '#/definitions/typographyProperties/properties/fontFamily' )
- *  // returns themejson.definitions.typographyProperties.properties.fontFamily
- */
-const resolveDefinitionRef = ( ref ) => {
-	const refParts = ref.split( '/' );
-	const definition = refParts[ refParts.length - 1 ];
-	if ( ! themejson.definitions[ definition ] ) {
-		throw new Error( `Can't resolve '${ ref }'. Definition not found` );
-	}
-	return themejson.definitions[ definition ];
-};
-
-/**
- * Get properties from an array.
- *
- * @param {Object} items
- * @return {Object} properties
- */
-const getPropertiesFromArray = ( items ) => {
-	// if its a $ref resolve it
-	if ( items.$ref ) {
-		return resolveDefinitionRef( items.$ref ).properties;
-	}
-
-	// otherwise just return the properties
-	return items.properties;
-};
-
 /**
  * Convert settings properties to markup.
  *
@@ -133,9 +102,7 @@ const getSettingsPropertiesMarkup = ( struct ) => {
 		let type = props[ key ].type || '';
 		let ps =
 			props[ key ].type === 'array'
-				? keys( getPropertiesFromArray( props[ key ].items ) )
-						.sort()
-						.join( ', ' )
+				? keys( props[ key ].items.properties ).sort().join( ', ' )
 				: '';
 
 		/*
@@ -154,9 +121,7 @@ const getSettingsPropertiesMarkup = ( struct ) => {
 					.map( ( item ) =>
 						item?.type === 'object' && item?.properties
 							? '_{' +
-							  keys( getPropertiesFromArray( item ) )
-									.sort()
-									.join( ', ' ) +
+							  keys( item.properties ).sort().join( ', ' ) +
 							  '}_'
 							: ''
 					)
@@ -244,10 +209,6 @@ const formatType = ( prop ) => {
 			if ( item.type ) {
 				types.push( item.type );
 			}
-			// refComplete is always an object
-			if ( item.$ref && item.$ref === '#/definitions/refComplete' ) {
-				types.push( 'object' );
-			}
 		} );
 
 		type = [ ...new Set( types ) ].join( ', ' );

changelog.txt

@@ -1,60 +1,6 @@
 == Changelog ==
 
-= 18.8.0-rc.3 =
-
-
-## Changelog
-
-### Bug Fixes
-
-#### Layout
-- Fix invalid css for nested fullwidth layouts with zero padding applied. ([63436](https://github.com/WordPress/gutenberg/pull/63436))
-
-#### Typography
-- Font Appearance Control: Refactor font appearance fallbacks. ([63215](https://github.com/WordPress/gutenberg/pull/63215))
-
-
-
-
-## Contributors
-
-The following contributors merged PRs in this release:
-
-@mikachan @richtabor
-
-
-= 18.8.0-rc.2 =
-
-
-## Changelog
-
-### Bug Fixes
-
-- Fix: Error when calling the PostActions `view-post` callback. ([63460](https://github.com/WordPress/gutenberg/pull/63460))
-
-
-### Various
-
-#### CSS & Styling
-- Only add customizer additional CSS to global styles in block themes. ([63331](https://github.com/WordPress/gutenberg/pull/63331))
-
-
-## First-time contributors
-
-The following PRs were merged by first-time contributors:
-
-- @sejas: Fix: Error when calling the PostActions `view-post` callback. ([63460](https://github.com/WordPress/gutenberg/pull/63460))
-
-
-## Contributors
-
-The following contributors merged PRs in this release:
-
-@sejas @tellthemachines
-
-
-= 18.8.0-rc.1 =
-
+= 18.8.0 =
 
 ## Changelog
 
@@ -192,6 +138,7 @@ The following contributors merged PRs in this release:
 - Fix Incorrect URL basename logic in EmbedPreview. ([63052](https://github.com/WordPress/gutenberg/pull/63052))
 - Fix: Update "Link Text" label to "Text" on Social Icons block #60966. ([61715](https://github.com/WordPress/gutenberg/pull/61715))
 - List: Maintain nested list on parent item removal. ([62949](https://github.com/WordPress/gutenberg/pull/62949))
+- Navigation: Allow themes to override block library text-decoration rule. ([63406](https://github.com/WordPress/gutenberg/pull/63406))
 - Patterns: Check for edited entity content property when exporting. ([63227](https://github.com/WordPress/gutenberg/pull/63227))
 - Reduce specificity of social link icon specific colors. ([63049](https://github.com/WordPress/gutenberg/pull/63049))
 - Refactor Post Date Relative Time Rendering for Future Dates. ([62979](https://github.com/WordPress/gutenberg/pull/62979))
@@ -224,11 +171,14 @@ The following contributors merged PRs in this release:
 - Only hide drop indicator when grid has `isManualPlacement` set. ([63226](https://github.com/WordPress/gutenberg/pull/63226))
 - Remove dotted border from grid dropzone. ([63162](https://github.com/WordPress/gutenberg/pull/63162))
 - Resizing in Auto mode shouldn't add `columnStart` and `rowStart` values. ([63160](https://github.com/WordPress/gutenberg/pull/63160))
+- Fix invalid css for nested fullwidth layouts with zero padding applied. ([63436](https://github.com/WordPress/gutenberg/pull/63436))
 
 #### Global Styles
+- Elements: Avoid specificity bump for top-level element-only selectors. ([63403](https://github.com/WordPress/gutenberg/pull/63403))
 - Global styles revisions: Ensure that user-defined variation styles CSS is generated. ([62768](https://github.com/WordPress/gutenberg/pull/62768))
 - Root padding styles: Include alignwide in nested has-outer-padding logic. ([63207](https://github.com/WordPress/gutenberg/pull/63207))
 - Remove letter-spacing from typography element preview. ([60322](https://github.com/WordPress/gutenberg/pull/60322))
+- Only add customizer additional CSS to global styles in block themes. ([63331](https://github.com/WordPress/gutenberg/pull/63331))
 
 #### Site Editor
 - Make SiteHub available for Pages, Patterns, and Templates in mobile viewports. ([63118](https://github.com/WordPress/gutenberg/pull/63118))
@@ -243,6 +193,7 @@ The following contributors merged PRs in this release:
 #### Block Editor
 - Featured Image Panel: Align text and icons horizontally to avoid clipping. ([62842](https://github.com/WordPress/gutenberg/pull/62842))
 - Zoom Out: Move the hook to the inserter component. ([63315](https://github.com/WordPress/gutenberg/pull/63315))
+- Fix error when calling the PostActions `view-post` callback. ([63460](https://github.com/WordPress/gutenberg/pull/63460))
 
 #### Block bindings
 - Disable post meta editing in blocks inside a Query Loop. ([63237](https://github.com/WordPress/gutenberg/pull/63237))
@@ -265,6 +216,7 @@ The following contributors merged PRs in this release:
 
 #### Typography
 - Use available font weights and styles in FontAppearanceControl. ([61915](https://github.com/WordPress/gutenberg/pull/61915))
+- Font Appearance Control: Refactor font appearance fallbacks. ([63215](https://github.com/WordPress/gutenberg/pull/63215))
 
 
 ### Accessibility
@@ -419,6 +371,7 @@ The following PRs were merged by first-time contributors:
 - @iworks: Translation should depend on number of items. ([62857](https://github.com/WordPress/gutenberg/pull/62857))
 - @roygbyte: Fix typo to be preposition, not verb, in some package comments and documentations. ([62945](https://github.com/WordPress/gutenberg/pull/62945))
 - @shreya0204: Add justification to block toolbar in addition to sidebar. ([62924](https://github.com/WordPress/gutenberg/pull/62924))
+- @sejas: Fix: Error when calling the PostActions `view-post` callback. ([63460](https://github.com/WordPress/gutenberg/pull/63460))
 
 
 ## Contributors
@@ -428,6 +381,8 @@ The following contributors merged PRs in this release:
 @aaronrobertshaw @afercia @airman5573 @akasunil @aliaghdam @amitraj2203 @bogiii @carolinan @Chrico @ciampo @costasovo @creativecoder @DaniGuardiola @desrosj @dhananjaykuber @dmsnell @ellatrix @fluiddot @geriux @hbhalodia @iamibrahimriaz @iworks @jameskoster @jasmussen @jeryj @jffng @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @michalczaplinski @mikachan @mirka @ndiego @ntsekouras @oandregal @ockham @peterwilsoncc @ramonjd @richtabor @roygbyte @SantosGuillamot @scruffian @shail-mehta @shreya0204 @sirreal @stokesman @swissspidy @t-hamano @talldan @tellthemachines @tyxla @vipul0425 @westonruter @youknowriad
 
 
+
+
 = 18.7.1 =
 
 

docs/contributors/code/coding-guidelines.md

@@ -65,7 +65,7 @@ Examples of styles that appear in both the theme and the editor include gallery
 
 ## JavaScript
 
-JavaScript in Gutenberg uses modern language features of the [ECMAScript language specification](https://www.ecma-international.org/ecma-262/) as well as the [JSX language syntax extension](https://reactjs.org/docs/introducing-jsx.html). These are enabled through a combination of preset configurations, notably [`@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default) which is used as a preset in the project's [Babel](https://babeljs.io/) configuration.
+JavaScript in Gutenberg uses modern language features of the [ECMAScript language specification](https://www.ecma-international.org/ecma-262/) as well as the [JSX language syntax extension](https://react.dev/learn/writing-markup-with-jsx). These are enabled through a combination of preset configurations, notably [`@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default) which is used as a preset in the project's [Babel](https://babeljs.io/) configuration.
 
 While the [staged process](https://tc39.es/process-document/) for introducing a new JavaScript language feature offers an opportunity to use new features before they are considered complete, **the Gutenberg project and the `@wordpress/babel-preset-default` configuration will only target support for proposals which have reached Stage 4 ("Finished")**.
 
@@ -531,7 +531,7 @@ alert( `My name is ${ name }.` );
 
 ### React components
 
-It is preferred to implement all components as [function components](https://reactjs.org/docs/components-and-props.html), using [hooks](https://reactjs.org/docs/hooks-reference.html) to manage component state and lifecycle. With the exception of [error boundaries](https://reactjs.org/docs/error-boundaries.html), you should never encounter a situation where you must use a class component. Note that the [WordPress guidance on Code Refactoring](https://make.wordpress.org/core/handbook/contribute/code-refactoring/) applies here: There needn't be a concentrated effort to update class components in bulk. Instead, consider it as a good refactoring opportunity in combination with some other change.
+It is preferred to implement all components as [function components](https://react.dev/learn/your-first-component), using [hooks](https://react.dev/reference/react/hooks) to manage component state and lifecycle. With the exception of [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), you should never encounter a situation where you must use a class component. Note that the [WordPress guidance on Code Refactoring](https://make.wordpress.org/core/handbook/contribute/code-refactoring/) applies here: There needn't be a concentrated effort to update class components in bulk. Instead, consider it as a good refactoring opportunity in combination with some other change.
 
 ## JavaScript documentation using JSDoc
 
@@ -758,7 +758,7 @@ When documenting an example, use the markdown <code>\`\`\`</code> code block to
 
 ### Documenting React components
 
-When possible, all components should be implemented as [function components](https://reactjs.org/docs/components-and-props.html#function-and-class-components), using [hooks](https://react.dev/reference/react/hooks) for managing component lifecycle and state.
+When possible, all components should be implemented as [function components](https://react.dev/learn/your-first-component), using [hooks](https://react.dev/reference/react/hooks) for managing component lifecycle and state.
 
 Documenting a function component should be treated the same as any other function. The primary caveat in documenting a component is being aware that the function typically accepts only a single argument (the "props"), which may include many property members. Use the [dot syntax for parameter properties](https://jsdoc.app/tags-param.html#parameters-with-properties) to document individual prop types.
 

docs/contributors/code/deprecations.md

@@ -183,7 +183,7 @@ For features included in the Gutenberg plugin, the deprecation policy is intende
 
 ## 3.8.0
 
--   `wp.components.withContext` has been removed. Please use `wp.element.createContext` instead. See: https://reactjs.org/docs/context.html.
+-   `wp.components.withContext` has been removed. Please use `wp.element.createContext` instead. See: https://react.dev/reference/react/createContext.
 -   `wp.coreBlocks.registerCoreBlocks` has been removed. Please use `wp.blockLibrary.registerCoreBlocks` instead.
 -   `wp.editor.DocumentTitle` component has been removed.
 -   `getDocumentTitle` selector (`core/editor`) has been removed.

docs/how-to-guides/data-basics/2-building-a-list-of-pages.md

@@ -172,7 +172,7 @@ Note that instead of using an `input` tag, we took advantage of the [SearchContr
 
 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/filter-field.jpg)
 
-The field starts empty, and the contents are stored in the `searchTerm` state value. If you aren’t familiar with the [useState](https://reactjs.org/docs/hooks-state.html) hook, you can learn more in [React’s documentation](https://reactjs.org/docs/hooks-state.html).
+The field starts empty, and the contents are stored in the `searchTerm` state value. If you aren’t familiar with the [useState](https://react.dev/reference/react/useState) hook, you can learn more in [React’s documentation](https://react.dev/reference/react/useState).
 
 We can now request only the pages matching the `searchTerm`.
 

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

@@ -277,7 +277,7 @@ function Editor( { settings } ) {
 }
 ```
 
-In this process, the core of the editor's layout is being scaffolded, along with a few specialized [context providers](https://reactjs.org/docs/context.html#contextprovider) that make specific functionality available throughout the component hierarchy.
+In this process, the core of the editor's layout is being scaffolded, along with a few specialized [context providers](https://react.dev/reference/react/createContext#provider) that make specific functionality available throughout the component hierarchy.
 
 Let's examine these in more detail:
 

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

@@ -4,7 +4,7 @@ Block context is a feature which enables ancestor blocks to provide values which
 
 This is especially useful in full-site editing where, for example, the contents of a block may depend on the context of the post in which it is displayed. A blogroll template may show excerpts of many different posts. Using block context, there can still be one single "Post Excerpt" block which displays the contents of the post based on an inherited post ID.
 
-If you are familiar with [React Context](https://reactjs.org/docs/context.html), block context adopts many of the same ideas. In fact, the client-side block editor implementation of block context is a very simple application of React Context. Block context is also supported in server-side `render_callback` implementations, demonstrated in the examples below.
+If you are familiar with [React Context](https://react.dev/learn/passing-data-deeply-with-context), block context adopts many of the same ideas. In fact, the client-side block editor implementation of block context is a very simple application of React Context. Block context is also supported in server-side `render_callback` implementations, demonstrated in the examples below.
 
 ## Defining block context
 

docs/reference-guides/core-blocks.md

@@ -387,7 +387,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 
 -	**Name:** core/image
 -	**Category:** media
--	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity, shadow ()
+-	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity, shadow (), spacing (margin)
 -	**Attributes:** alt, aspectRatio, blob, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments
@@ -810,7 +810,7 @@ Help visitors find your content. ([Source](https://github.com/WordPress/gutenber
 
 -	**Name:** core/search
 -	**Category:** widgets
--	**Supports:** align (center, left, right), color (background, gradients, text), interactivity, typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (center, left, right), color (background, gradients, text), interactivity, spacing (margin), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** buttonPosition, buttonText, buttonUseIcon, isSearchFieldHidden, label, placeholder, query, showLabel, width, widthUnit
 
 ## Separator

docs/reference-guides/filters/editor-filters.md

@@ -226,9 +226,9 @@ function example_filter_block_editor_rest_api_preload_paths_when_post_provided(
 
 ## Logging errors
 
-A JavaScript error in a part of the UI shouldn't break the whole app. To solve this problem for users, React library uses the concept of an ["error boundary"](https://reactjs.org/docs/error-boundaries.html). Error boundaries are React components that catch JavaScript errors anywhere in their child component tree and display a fallback UI instead of the component tree that crashed.
+A JavaScript error in a part of the UI shouldn't break the whole app. To solve this problem for users, React library uses the concept of an ["error boundary"](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Error boundaries are React components that catch JavaScript errors anywhere in their child component tree and display a fallback UI instead of the component tree that crashed.
 
-The `editor.ErrorBoundary.errorLogged` action allows you to hook into the [Error Boundaries](https://reactjs.org/docs/error-boundaries.html) and gives you access to the error object.
+The `editor.ErrorBoundary.errorLogged` action allows you to hook into the [Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) and gives you access to the error object.
 
 You can use this action to get hold of the error object handled by the boundaries. For example, you may want to send them to an external error-tracking tool. Here's an example: