Build: Normalize JSX file extensions

.github/CODEOWNERS

@@ -19,7 +19,7 @@
 # Duotone
 /lib/block-supports/duotone.php									@sgomes
 /packages/block-editor/src/components/duotone-control	@sgomes
-/packages/block-editor/src/hooks/duotone.js			@sgomes
+/packages/block-editor/src/hooks/duotone.jsx			@sgomes
 /packages/components/src/duotone-picker					@sgomes
 
 # Editor

docs/contributors/code/testing-overview.md

@@ -291,7 +291,7 @@ test( 'fires onChange when a new value is typed', async () => {
 
 ### Integration testing for block UI
 
-Integration testing is defined as a type of testing where different parts are tested as a group. In this case, the parts that we want to test are the different components that are required to be rendered for a specific block or editor logic. In the end, they are very similar to unit tests as they are run with the same command using the Jest library. The main difference is that for the integration tests the blocks are run within a [`special instance of the block editor`](https://github.com/WordPress/gutenberg/blob/trunk/test/integration/helpers/integration-test-editor.js#L60).
+Integration testing is defined as a type of testing where different parts are tested as a group. In this case, the parts that we want to test are the different components that are required to be rendered for a specific block or editor logic. In the end, they are very similar to unit tests as they are run with the same command using the Jest library. The main difference is that for the integration tests the blocks are run within a [`special instance of the block editor`](https://github.com/WordPress/gutenberg/blob/trunk/test/integration/helpers/integration-test-editor.jsx#L60).
 
 The advantage of this approach is that the bulk of a block editor's functionality (block toolbar and inspector panel interactions, etc.) can be tested without having to fire up the full e2e test framework. This means the tests can run much faster and more reliably. It is suggested that as much of a block's UI functionality as possible is covered with integration tests, with e2e tests used for interactions that require a full browser environment, eg. file uploads, drag and drop, etc.
 

docs/getting-started/fundamentals/static-dynamic-rendering.md

@@ -24,7 +24,7 @@ Blocks in WordPress are encapsulated within special comment tags that serve as u
 
 <details><summary><strong>View an example of static rendering in the Preformatted block</strong></summary>
 <br/>
-The following <a href="https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/preformatted/save.js"><code>save</code> function</a> for the <a href="https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/preformatted">Preformatted</a> core block looks like this:
+The following <a href="https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/preformatted/save.jsx"><code>save</code> function</a> for the <a href="https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/preformatted">Preformatted</a> core block looks like this:
 
 ```js
 import { RichText, useBlockProps } from '@wordpress/block-editor';
@@ -66,9 +66,9 @@ WordPress provides mechanisms like the <a href="https://developer.wordpress.org/
 
 Additional examples of WordPress blocks that use static rendering, meaning their output is fixed at the time of saving and doesn't rely on server-side processing, include:
 
-- [Separator](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/separator/save.js)
-- [Spacer](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/spacer/save.js)
-- [Button](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/button/save.js)
+- [Separator](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/separator/save.jsx)
+- [Spacer](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/spacer/save.jsx)
+- [Button](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/button/save.jsx)
 
 
 ## Dynamic rendering
@@ -168,8 +168,8 @@ Blocks with dynamic rendering can also save an HTML representation of the block
 
 In some cases, the block saves an HTML representation of the block and uses a dynamic rendering to fine-tune this markup if some conditions are met. Some examples of core blocks using this approach are:
 
-- The [Cover](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover) block [saves](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover/save.js) a full HTML representation of the block in the database. This markup is processed via a [`render_callback`](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/cover/index.php#L74), which [dynamically injects](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/cover/index.php#L16) the featured image if the "Use featured image" setting is enabled.
-- The [Image](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/image) block also [saves](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/image/save.js) its HTML representation in the database. This markup is processed via a [`render_callback`](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/image/index.php#L363), which [adds additional attributes](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/image/index.php#L18) to the markup if specific conditions are met.
+- The [Cover](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover) block [saves](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover/save.jsx) a full HTML representation of the block in the database. This markup is processed via a [`render_callback`](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/cover/index.php#L74), which [dynamically injects](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/cover/index.php#L16) the featured image if the "Use featured image" setting is enabled.
+- The [Image](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/image) block also [saves](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/image/save.jsx) its HTML representation in the database. This markup is processed via a [`render_callback`](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/image/index.php#L363), which [adds additional attributes](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/image/index.php#L18) to the markup if specific conditions are met.
 
 If you are using [InnerBlocks](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/) in a dynamic block, you will need to save the `InnerBlocks` in the `save` callback function using `<InnerBlocks.Content/>`.
 

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

@@ -445,7 +445,7 @@ And with that you have covered the render of you custom `<BlockEditor>`.
 
 <div class="callout callout-tip">
 <a href="https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-editor/src/components/block-inspector/index.js"><code>&lt;BlockInspector&gt;</code></a>
-itself actually renders a <code>Slot</code> for <a href="https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/inspector-controls"><code>&lt;InspectorControls&gt;</code></a>. This is what allows you <a href="https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-library/src/paragraph/edit.js#L127">render</a> a <code>&lt;InspectorControls>&gt;</code> component inside
+itself actually renders a <code>Slot</code> for <a href="https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/inspector-controls"><code>&lt;InspectorControls&gt;</code></a>. This is what allows you <a href="https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-library/src/paragraph/edit.js#L127">render</a> a <code>&lt;InspectorControls&gt;</code> component inside
 the <code>edit()</code> definition for your block and have
 it display within the editor's sidebar. Exploring this component in more detail is recommended.
 </div>

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

@@ -493,4 +493,4 @@ _Example_: `local` role used for temporary data.
 }
 ```
 
-Learn more in the [WordPress 6.7 dev note](https://make.wordpress.org/core/2024/10/20/miscellaneous-block-editor-changes-in-wordpress-6-7/#stabilized-role-property-for-block-attributes).
+Learn more in the [WordPress 6.7 dev note](https://make.wordpress.org/core/2024/10/20/miscellaneous-block-editor-changes-in-wordpress-6-7/#stabilized-role-property-for-block-attributes).

docs/reference-guides/richtext.md

@@ -18,10 +18,10 @@ For a list of the possible properties to pass your RichText component, [check ou
 
 There are a number of core blocks using the RichText component. The JavaScript edit function linked below for each block can be used as a best practice reference while creating your own blocks.
 
--   **[Button](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/button/edit.js):** RichText is used to enter the button's text.
--   **[Heading](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/heading/edit.js):** RichText is used to enter the heading's text.
--   **[Quote](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/quote/edit.js):** RichText is used in two places, for both the quotation and citation text.
--   **[Search](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/search/edit.js):** RichText is used in two places, for both the label above the search field and the submit button text.
+-   **[Button](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/button/edit.jsx):** RichText is used to enter the button's text.
+-   **[Heading](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/heading/edit.jsx):** RichText is used to enter the heading's text.
+-   **[Quote](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/quote/edit.jsx):** RichText is used in two places, for both the quotation and citation text.
+-   **[Search](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/search/edit.jsx):** RichText is used in two places, for both the label above the search field and the submit button text.
 
 ## Example
 

docs/reference-guides/slotfills/README.md

@@ -254,7 +254,7 @@ registerPlugin( 'example-site-editor-only', {
 
 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/editor/src/components/plugin-post-status-info/index.js#L55))
+**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-post-status-info/index.jsx#L55))
 
 ```js
 /**
@@ -280,7 +280,7 @@ This new Slot is then exposed in the editor. The example below is from core and
 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 in the end of the component.
 
-See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.js#L39).
+See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.jsx#L39).
 
 ```js
 export default function PostSummary( { onActionPerformed } ) {

lint-staged.config.cjs

@@ -9,7 +9,7 @@ module.exports = {
 	'packages/*/package.json': [ 'wp-scripts lint-pkg-json' ],
 	'{docs/toc.json,tools/docs/*.cjs,packages/{*/README.md,components/src/*/**/README.md,block-library/src/*/README.md}}':
 		[ 'npm run docs:gen' ],
-	'packages/**/*.{js,ts,tsx,json}': [
+	'packages/**/*.{js,jsx,ts,tsx,json}': [
 		'npm run docs:api-ref',
 		'npm run docs:blocks',
 		'npm run docs:blocks-detail',

packages/block-directory/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Use the `.jsx` extension for JavaScript source files that contain JSX ([#80990](https://github.com/WordPress/gutenberg/pull/80990)).
+
 ## 5.54.0 (2026-08-26)
 
 ## 5.53.0 (2026-08-12)

packages/block-editor/CHANGELOG.md

@@ -11,6 +11,10 @@
 -   Inserter: Keep the hovered block preview inside the viewport, so a tall preview in a short window is no longer clipped ([#82060](https://github.com/WordPress/gutenberg/pull/82060)).
 -   Client-side media processing: Refuse a batch of more than one file when the caller only takes one, such as a Cover block placeholder, matching what the server-side upload path already did. Every dropped file was uploaded instead, and the block kept whichever one finished last ([#82041](https://github.com/WordPress/gutenberg/issues/82041)).
 
+### Internal
+
+-   Use the `.jsx` extension for JavaScript source files that contain JSX ([#80990](https://github.com/WordPress/gutenberg/pull/80990)).
+
 ## 17.0.0 (2026-08-26)
 
 ### Breaking Changes

packages/block-editor/src/components/background-image-control/README.md

@@ -2,7 +2,7 @@
 
 The `BackgroundImageControl` component provides an interface for selecting, positioning, and configuring background images in the WordPress block editor.
 
-_Note:_ This is an internal component. It is not exported from `@wordpress/block-editor` and is not part of the public API; it is rendered by the Global Styles [background panel](../global-styles/background-panel.js).
+_Note:_ This is an internal component. It is not exported from `@wordpress/block-editor` and is not part of the public API; it is rendered by the Global Styles [background panel](../global-styles/background-panel.jsx).
 
 ## Features
 

packages/block-editor/src/components/block-visibility/constants.ts

@@ -10,7 +10,7 @@ export type BlockVisibilityViewport = 'desktop' | 'tablet' | 'mobile';
 /**
  * The choices for the block visibility.
  *
- * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices
+ * Duplicated in packages/editor/src/components/preview-dropdown/index.jsx (choices
  * array), packages/edit-site/src/components/block-editor/viewport.js and
  * packages/boot/src/components/canvas/viewport.ts (VALID_VIEWPORTS). Update all
  * four when adding new viewport types.

packages/block-editor/src/components/global-styles/background-panel.js → packages/block-editor/src/components/global-styles/background-panel.jsx

@@ -305,7 +305,7 @@ export default function BackgroundImagePanel( {
 	// Get current gradient value, decoding preset slug references.
 	// Fall back to color.gradient for legacy blocks that haven't migrated
 	// to background.gradient yet (mirrors block inspector fallback in
-	// packages/block-editor/src/hooks/background.js).
+	// packages/block-editor/src/hooks/background.jsx).
 	const currentGradient = decodeValue(
 		value?.background?.gradient ?? value?.color?.gradient
 	);
@@ -315,7 +315,7 @@ export default function BackgroundImagePanel( {
 
 	// Set gradient value, encoding preset matches as slug references.
 	// Also clear color.gradient to migrate from the legacy location,
-	// matching the block inspector behavior in hooks/background.js.
+	// matching the block inspector behavior in hooks/background.jsx.
 	const setGradient = ( newGradient, newSlug ) => {
 		let newValue = setImmutably(
 			value,

packages/block-editor/src/components/global-styles/test/background-panel.js → packages/block-editor/src/components/global-styles/test/background-panel.jsx

@@ -105,7 +105,7 @@ describe( 'hasBackgroundGradientValue', () => {
  *   enabled.
  *
  * - Background gradient: renders `ColorPanelDropdown` (re-used from
- *   `color-panel.js`). The inner `Dropdown` indicator shows the inherited
+ *   `color-panel.jsx`). The inner `Dropdown` indicator shows the inherited
  *   gradient at-rest, and the `ColorPanelTab.onChange` interceptor commits
  *   the inherited value when the user clicks the active swatch.
  *

packages/block-editor/src/components/global-styles/test/inherited-value-context-core.js

@@ -31,7 +31,7 @@ jest.mock( '../../../store', () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
-// `inherited-value-context.js` imports the blocks store for
+// `inherited-value-context.jsx` imports the blocks store for
 // `useVariationAndElements`. Its real import chain needs data-module exports
 // the stub above does not provide, so stub the blocks module too.
 jest.mock( '@wordpress/blocks', () => ( {

packages/block-editor/src/components/global-styles/test/inherited-value-context.js → packages/block-editor/src/components/global-styles/test/inherited-value-context.jsx

@@ -46,7 +46,7 @@ jest.mock( '../../../store', () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
-// `inherited-value-context.js` imports `store as blocksStore` from
+// `inherited-value-context.jsx` imports `store as blocksStore` from
 // `@wordpress/blocks` for `useVariationAndElements`. The blocks store's
 // transitive import chain fails under this file's `@wordpress/data` mock
 // (missing `createSelector`), so stub the blocks module with just the shape

packages/block-editor/src/components/global-styles/test/typography-panel.js → packages/block-editor/src/components/global-styles/test/typography-panel.jsx

@@ -6,7 +6,7 @@ import TypographyPanel, { useHasTypographyPanel } from '../typography-panel';
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path. The off path lives in
-// `typography-panel-core.js`.
+// `typography-panel-core.jsx`.
 beforeEach( () => {
 	window.__experimentalGlobalStylesInheritanceUI = true;
 } );