Merge branch 'trunk' into add/wp-ai-client

Author: JasonTheAdams

.github/pull_request_template.md

@@ -12,11 +12,18 @@ If this is your first time contributing, you may also find reviewing these guide
 - Inline Documentation Standards: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/
 - Browser Support Policies: https://make.wordpress.org/core/handbook/best-practices/browser-support/
 - Proper spelling and grammar related best practices: https://make.wordpress.org/core/handbook/best-practices/spelling/
+- ✨ If you are using AI tools, you must adhere to the AI Guidelines: https://make.wordpress.org/ai/handbook/ai-guidelines/
 -->
 
 <!-- Insert a description of your changes here -->
 
 Trac ticket: <!-- insert a link to the WordPress Trac ticket here -->
 
+## Use of AI Tools
+
+<!--
+You are free to use artificial intelligence (AI) tooling to contribute, but you must disclose what tooling you are using and to what extent a pull request has been authored by AI. It is your responsibility to review and take responsibility for what AI generates. See the WordPress AI Guidelines: <https://make.wordpress.org/ai/handbook/ai-guidelines/>.
+-->
+
 ---
 **This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See [GitHub Pull Requests for Code Review](https://make.wordpress.org/core/handbook/contribute/git/github-pull-requests-for-code-review/) in the Core Handbook for more details.**

package-lock.json

@@ -7,7 +7,7 @@
 		"url": "https://develop.svn.wordpress.org/trunk"
 	},
 	"gutenberg": {
-		"ref": "7bf80ea84eb8b62eceb1bb3fe82e42163673ca79"
+		"ref": "59a08c5496008ca88f4b6b86f38838c3612d88c8"
 	},
 	"engines": {
 		"node": ">=20.10.0",
@@ -30,6 +30,7 @@
 		"@lodder/grunt-postcss": "^3.1.1",
 		"@playwright/test": "1.56.1",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
+		"@types/codemirror": "5.60.17",
 		"@wordpress/e2e-test-utils-playwright": "1.33.2",
 		"@wordpress/prettier-config": "4.33.1",
 		"@wordpress/scripts": "30.26.2",
@@ -79,6 +80,7 @@
 		"core-js-url-browser": "3.6.4",
 		"csslint": "1.0.5",
 		"element-closest": "3.0.2",
+		"espree": "9.6.1",
 		"esprima": "4.0.1",
 		"formdata-polyfill": "4.0.10",
 		"hoverintent": "2.2.1",

package.json

@@ -0,0 +1,121 @@
+/**
+ * CodeMirror JavaScript linter.
+ *
+ * @since 7.0.0
+ */
+
+import CodeMirror from 'codemirror';
+
+/**
+ * CodeMirror Lint Error.
+ *
+ * @see https://codemirror.net/5/doc/manual.html#addon_lint
+ *
+ * @typedef {Object} CodeMirrorLintError
+ * @property {string} message - Error message.
+ * @property {'error'} severity - Severity.
+ * @property {CodeMirror.Position} from - From position.
+ * @property {CodeMirror.Position} to - To position.
+ */
+
+/**
+ * JSHint options supported by Espree.
+ *
+ * @see https://jshint.com/docs/options/
+ * @see https://www.npmjs.com/package/espree#options
+ *
+ * @typedef {Object} SupportedJSHintOptions
+ * @property {number} [esversion] - "This option is used to specify the ECMAScript version to which the code must adhere."
+ * @property {boolean} [es5] - "This option enables syntax first defined in the ECMAScript 5.1 specification. This includes allowing reserved keywords as object properties."
+ * @property {boolean} [es3] - "This option tells JSHint that your code needs to adhere to ECMAScript 3 specification. Use this option if you need your program to be executable in older browsers—such as Internet Explorer 6/7/8/9—and other legacy JavaScript environments."
+ * @property {boolean} [module] - "This option informs JSHint that the input code describes an ECMAScript 6 module. All module code is interpreted as strict mode code."
+ * @property {'implied'} [strict] - "This option requires the code to run in ECMAScript 5's strict mode."
+ */
+
+/**
+ * Validates JavaScript.
+ *
+ * @since 7.0.0
+ *
+ * @param {string} text - Source.
+ * @param {SupportedJSHintOptions} options - Linting options.
+ * @returns {Promise<CodeMirrorLintError[]>}
+ */
+async function validator( text, options ) {
+	const errors = /** @type {CodeMirrorLintError[]} */ [];
+	try {
+		const espree = await import( /* webpackIgnore: true */ 'espree' );
+		espree.parse( text, {
+			...getEspreeOptions( options ),
+			loc: true,
+		} );
+	} catch ( error ) {
+		if (
+			// This is an `EnhancedSyntaxError` in Espree: <https://github.com/brettz9/espree/blob/3c1120280b24f4a5e4c3125305b072fa0dfca22b/packages/espree/lib/espree.js#L48-L54>.
+			error instanceof SyntaxError &&
+			typeof error.lineNumber === 'number' &&
+			typeof error.column === 'number'
+		) {
+			const line = error.lineNumber - 1;
+			errors.push( {
+				message: error.message,
+				severity: 'error',
+				from: CodeMirror.Pos( line, error.column - 1 ),
+				to: CodeMirror.Pos( line, error.column ),
+			} );
+		} else {
+			console.warn( '[CodeMirror] Unable to lint JavaScript:', error ); // jshint ignore:line
+		}
+	}
+
+	return errors;
+}
+
+CodeMirror.registerHelper( 'lint', 'javascript', validator );
+
+/**
+ * Gets the options for Espree from the supported JSHint options.
+ *
+ * @since 7.0.0
+ *
+ * @param {SupportedJSHintOptions} options - Linting options for JSHint.
+ * @return {{
+ *     ecmaVersion?: number|'latest',
+ *     ecmaFeatures?: {
+ *         impliedStrict?: true
+ *     }
+ * }}
+ */
+function getEspreeOptions( options ) {
+	const ecmaFeatures = {};
+	if ( options.strict === 'implied' ) {
+		ecmaFeatures.impliedStrict = true;
+	}
+
+	return {
+		ecmaVersion: getEcmaVersion( options ),
+		sourceType: options.module ? 'module' : 'script',
+		ecmaFeatures,
+	};
+}
+
+/**
+ * Gets the ECMAScript version.
+ *
+ * @since 7.0.0
+ *
+ * @param {SupportedJSHintOptions} options - Options.
+ * @return {number|'latest'} ECMAScript version.
+ */
+function getEcmaVersion( options ) {
+	if ( typeof options.esversion === 'number' ) {
+		return options.esversion;
+	}
+	if ( options.es5 ) {
+		return 5;
+	}
+	if ( options.es3 ) {
+		return 3;
+	}
+	return 'latest';
+}

src/js/_enqueues/vendor/codemirror/javascript-lint.js

@@ -139,6 +139,7 @@
 .screen-reader-text + .dashicons-external {
 	margin-top: -1px;
 	margin-left: 2px;
+	text-decoration: none;
 }
 
 .screen-reader-shortcut {

src/wp-admin/css/common.css

@@ -1086,9 +1086,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 
 .upload-theme .wp-upload-form,
 .upload-plugin .wp-upload-form {
-	background: #f6f7f7;
-	border: 1px solid #c3c4c7;
-	padding: 30px;
+	position: relative;
 	margin: 30px auto;
 	display: inline-flex;
 	justify-content: space-between;
@@ -1097,7 +1095,16 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 
 .upload-theme .wp-upload-form input[type="file"],
 .upload-plugin .wp-upload-form input[type="file"] {
-	margin-right: 10px;
+	background: #f6f7f7;
+    border: 1px solid #c3c4c7;
+    margin: 0;
+    padding: 30px 128px 30px 30px;
+}
+
+.upload-plugin .wp-upload-form input[type=submit], 
+.upload-theme .wp-upload-form input[type=submit] {
+	position: absolute;
+	right: 30px;
 }
 
 .upload-theme .install-help,
@@ -1131,6 +1138,7 @@ p.no-themes-local {
 }
 
 @media only screen and (max-width: 1120px) {
+	.upload-plugin .wp-upload-form,
 	.upload-theme .wp-upload-form {
 		margin: 20px 0;
 		max-width: 100%;
@@ -2015,12 +2023,22 @@ body.full-overlay-active {
 		padding-bottom: 4px;
 	}
 
-	.upload-theme .wp-upload-form,
-	.upload-plugin .wp-upload-form {
-		display: block;
+	.upload-plugin .wp-upload-form,
+	.upload-theme .wp-upload-form {
+		width: 100%;
 	}
 
-	:is(.upload-theme, .upload-plugin) .wp-upload-form input[type="submit"] {
-		margin-top: 10px;
+	.upload-plugin .wp-upload-form input[type=file], 
+	.upload-theme .wp-upload-form input[type=file] {
+		padding: 30px 30px 80px;
+		width: 100%;
+	}
+
+	:is(.upload-theme, .upload-plugin) .wp-upload-form input[type="submit"].button {
+		right: unset;
+		left: 50%;
+		transform: translateX(-50%) !important;
+    	top: calc( 1.4em + 42px ); /* Line height of control + gap + top padding. */
+		margin: 10px 0 0;
 	}
 }