Merge pull request #23552 from Yoast/feature/bulk-editor-ph2

Feature/bulk editor ph2

Author: vraja-pro

.phpcs.xml.dist

@@ -275,6 +275,12 @@
 		<exclude-pattern>/tests/*/Doubles/*</exclude-pattern>
 	</rule>
 
+	<!-- The double/mock classes mirror the real classes' properties; enforcing type hints on the mock's own
+		 property declarations adds no value, as the real class is the source of truth. -->
+	<rule ref="SlevomatCodingStandard.TypeHints.PropertyTypeHint">
+		<exclude-pattern>/tests/*/Doubles/*</exclude-pattern>
+	</rule>
+
 
 	<!--
 	#############################################################################

admin/metabox/class-metabox.php

@@ -801,7 +801,7 @@ public function save_postdata( $post_id ) {
 	 * @return bool Whether the given meta value key is disabled.
 	 */
 	public function is_meta_value_disabled( $key ) {
-		if ( $key === 'linkdex' && ! $this->seo_analysis->is_enabled() ) {
+		if ( in_array( $key, [ 'linkdex', 'seo_title_score', 'meta_description_score' ], true ) && ! $this->seo_analysis->is_enabled() ) {
 			return true;
 		}
 

composer.json

@@ -111,7 +111,7 @@
 			"Yoast\\WP\\SEO\\Composer\\Actions::check_coding_standards"
 		],
 		"check-cs-thresholds": [
-			"@putenv YOASTCS_THRESHOLD_ERRORS=2366",
+			"@putenv YOASTCS_THRESHOLD_ERRORS=2220",
 			"@putenv YOASTCS_THRESHOLD_WARNINGS=254",
 			"Yoast\\WP\\SEO\\Composer\\Actions::check_cs_thresholds"
 		],

css/src/bulk-editor-page.css

@@ -1,3 +1,6 @@
+@import "@draft-js-plugins/mention/lib/plugin.css";
+@import "draft-js/dist/Draft.css";
+
 .seo_page_wpseo_page_bulk_edit {
 	@apply yst-bg-slate-100;
 
@@ -84,6 +87,59 @@
 	overflow-wrap: break-word;
 }
 
+/* Shared layout for the filter popover's checkbox groups: each option is a full-width, rounded hover target.
+ * The popover drops its own horizontal padding (yst-px-0) so the target can span the full width; each option
+ * carries its own inset instead, which keeps the bleed without a negative margin. */
+.yst-root .yst-bulk-editor-filter-group .yst-checkbox {
+	@apply yst-cursor-pointer yst-rounded yst-px-4 yst-py-2;
+}
+
+.yst-root .yst-bulk-editor-filter-group .yst-checkbox:hover {
+	@apply yst-bg-slate-50;
+}
+
+.yst-root .yst-bulk-editor-filter-group label {
+	@apply yst-cursor-pointer !important;
+}
+
+.yst-root .yst-bulk-editor-filter-group .yst-checkbox-group__options {
+	@apply yst-gap-0;
+}
+
+.yst-root .yst-bulk-editor-filter-group .yst-checkbox-group__label {
+	@apply yst-m-0;
+}
+
+/* The "Overview selection" filter group. It is separated from the status filters below it by a divider,
+ * mirroring the one above the "needs improvement" group. */
+.yst-root .yst-bulk-editor-overview-selection {
+	@apply yst-border-b yst-border-slate-200 yst-mb-0.5 yst-pb-0.5;
+}
+
+/* The "needs improvement" filter group. It is separated from the status filters by a divider; each option is
+ * prefixed with a red score dot; and the group's legend is hidden visually but kept for assistive tech, so the
+ * dot's "needs improvement" meaning is never conveyed by colour alone. */
+.yst-root .yst-bulk-editor-needs-improvement {
+	@apply yst-border-t yst-border-slate-200 yst-mt-0.5 yst-pt-0.5;
+}
+
+.yst-root .yst-bulk-editor-needs-improvement .yst-checkbox-group__label {
+	@apply yst-sr-only;
+}
+
+.yst-root .yst-bulk-editor-needs-improvement .yst-checkbox__label {
+	@apply yst-flex yst-items-center;
+}
+
+.yst-root .yst-bulk-editor-needs-improvement .yst-checkbox__label::before {
+	content: "";
+	/* A 12px dot (the design's 11.14px oval on a scaled frame) with an 8px gap to the label. */
+	@apply yst-me-2 yst-h-3 yst-w-3 yst-flex-shrink-0 yst-rounded-full;
+
+	/* The Yoast bad-score red — the same value as .wpseo-score-icon.bad and the ui-library .yst-bad-score. */
+	background-color: #dc3232;
+}
+
 /* The row title links to the post editor. */
 .yst-root .yst-bulk-editor-title-link,
 .yst-root .yst-bulk-editor-title-link:visited {
@@ -113,6 +169,11 @@
 	@apply yst-outline-none;
 }
 
+.yst-root .yst-bulk-editor-textarea-field textarea {
+	@apply yst-min-h-16;
+	field-sizing: content;
+}
+
 /* The guided-tour spotlight overlay is decorative only; a separate backdrop blocks interaction, so it ignores pointer events. */
 .yst-root .yst-tour-spotlight {
 	pointer-events: none;
@@ -140,3 +201,45 @@
 	border-inline-start: 14px solid transparent !important;
 	border-inline-end: 14px solid white !important;
 }
+
+.yst-root .yst-replacevar__editor {
+	@apply
+	yst-w-full
+	yst-min-h-16
+	yst-py-2
+	yst-px-3
+	yst-border
+	yst-border-slate-300
+	yst-rounded-md
+	yst-shadow-sm
+	yst-bg-white
+	yst-text-sm
+	yst-leading-5
+	yst-text-slate-800
+	yst-placeholder-slate-500
+	focus-within:yst-outline-none
+	focus-within:yst-ring-primary-500
+	focus-within:yst-border-primary-500
+	focus-within:yst-ring-2
+	focus-within:yst-border-opacity-0;
+}
+
+.yst-root .yst-replacevar__editor span.yst-replacevar__mention {
+	@apply yst-text-sm;
+}
+
+.yst-root .yst-replacevar {
+	@apply yst-m-0;
+}
+
+.yst-root .yst-replacevar__label {
+	@apply yst-sr-only;
+}
+
+.yst-root .yst-replacevar__buttons {
+	display: none;
+}
+
+.yst-root .DraftEditor-editorContainer {
+	@apply yst-leading-6;
+}

inc/class-wpseo-meta.php

@@ -132,6 +132,14 @@ class WPSEO_Meta {
 				'type'          => 'hidden',
 				'default_value' => '0',
 			],
+			'seo_title_score' => [
+				'type'          => 'hidden',
+				'default_value' => '0',
+			],
+			'meta_description_score' => [
+				'type'          => 'hidden',
+				'default_value' => '0',
+			],
 			'is_cornerstone' => [
 				'type'          => 'hidden',
 				'default_value' => 'false',
@@ -443,6 +451,14 @@ public static function sanitize_post_meta( $meta_value, $meta_key ) {
 				}
 				break;
 
+			case ( in_array( $meta_key, [ self::$meta_prefix . 'seo_title_score', self::$meta_prefix . 'meta_description_score' ], true ) ):
+				// Per-field scores are 0-100 percentages; out-of-range input keeps the "never scored" default.
+				$int = WPSEO_Utils::validate_int( $meta_value );
+				if ( $int !== false && $int >= 0 && $int <= 100 ) {
+					$clean = (string) $int; // Convert to string to make sure default check works.
+				}
+				break;
+
 			case ( $field_def['type'] === 'checkbox' ):
 				// Only allow value if it's one of the predefined options.
 				if ( in_array( $meta_value, [ 'on', 'off' ], true ) ) {

packages/js/src/ai-generator/components/errors/modal-parts.js

@@ -1,50 +1,8 @@
-import ExclamationIcon from "@heroicons/react/outline/ExclamationIcon";
+import { Actions, CloseButton } from "../../../shared-admin/components/danger-modal";
 import { __ } from "@wordpress/i18n";
-import { Button, Modal, useSvgAria } from "@yoast/ui-library";
-import { noop } from "lodash";
+import { Button } from "@yoast/ui-library";
 import PropTypes from "prop-types";
 
-/**
- * Wraps the error copy below the title, applying the muted modal-description tone.
- * The message `Paragraph`s add their own top margin, so the first paragraph sits
- * just under the title.
- *
- * @param {JSX.node} children The copy (message `Body`).
- * @returns {JSX.Element} The element.
- */
-export const ModalDescription = ( { children } ) => (
-	<div className="yst-mt-1 yst-text-sm yst-text-slate-500">
-		{ children }
-	</div>
-);
-ModalDescription.propTypes = { children: PropTypes.node.isRequired };
-
-/**
- * The button row shown at the bottom of an error modal.
- *
- * @param {JSX.node} children The buttons.
- * @returns {JSX.Element} The element.
- */
-export const Actions = ( { children } ) => (
-	<div className="yst-mt-6 yst-flex yst-flex-row yst-justify-end yst-gap-3">
-		{ children }
-	</div>
-);
-Actions.propTypes = { children: PropTypes.node.isRequired };
-
-/**
- * A "Close" button that dismisses the modal.
- *
- * @param {function} onClose Dismisses the modal.
- * @returns {JSX.Element} The element.
- */
-export const CloseButton = ( { onClose } ) => (
-	<Button variant="secondary" onClick={ onClose }>
-		{ __( "Close", "wordpress-seo" ) }
-	</Button>
-);
-CloseButton.propTypes = { onClose: PropTypes.func.isRequired };
-
 /**
  * The action row for retryable errors: always a Close button, plus a Try again
  * when `showActions` is set (a retryable context such as a timeout or a failed
@@ -71,47 +29,4 @@ RetryableActions.propTypes = {
 	onClose: PropTypes.func.isRequired,
 };
 
-/**
- * The "Danger modal" shell every AI error shares: a centered modal panel with the
- * rose-circle outline exclamation icon, the resolved title, and a dismiss control.
- *
- * @param {boolean} isOpen Whether the modal is open.
- * @param {string} title The modal title.
- * @param {function} [onClose=noop] Dismisses the modal.
- * @param {JSX.node} children The modal body (copy + actions).
- * @returns {JSX.Element} The element.
- */
-export const DangerModal = ( { isOpen, title, onClose = noop, children } ) => {
-	const svgAriaProps = useSvgAria();
-
-	return (
-		<Modal isOpen={ isOpen } onClose={ onClose }>
-			<Modal.Panel className="yst-max-w-lg" closeButtonScreenReaderText={ __( "Dismiss", "wordpress-seo" ) }>
-				{ /*
-					* An unconditional row (icon | title + body), not the `sm:`-gated
-					* stack-then-row other danger modals use. This modal is portaled inside
-					* the block editor, where the viewport `sm` breakpoint does not match
-					* reliably; gating the layout on it leaves the modal stuck stacked and
-					* centered. Mirrors `ReplaceContentModal`, which renders in the same context.
-					*/ }
-				<div className="yst-flex yst-items-start yst-gap-4">
-					<div className="yst-flex-shrink-0 yst-flex yst-items-center yst-justify-center yst-h-10 yst-w-10 yst-rounded-full yst-bg-red-100">
-						<ExclamationIcon className="yst-h-6 yst-w-6 yst-text-red-600" { ...svgAriaProps } />
-					</div>
-					<div className="yst-text-start yst-flex-1 yst-min-w-0">
-						<Modal.Title className="yst-text-lg yst-leading-6 yst-font-medium yst-text-slate-900">
-							{ title }
-						</Modal.Title>
-						{ children }
-					</div>
-				</div>
-			</Modal.Panel>
-		</Modal>
-	);
-};
-DangerModal.propTypes = {
-	isOpen: PropTypes.bool.isRequired,
-	title: PropTypes.string.isRequired,
-	onClose: PropTypes.func,
-	children: PropTypes.node.isRequired,
-};
+export { DangerModal, CloseButton, Actions, ModalDescription } from "../../../shared-admin/components/danger-modal";

packages/js/src/ai-generator/components/tip-notification.js

@@ -4,15 +4,15 @@ import { __, sprintf } from "@wordpress/i18n";
 import { Button, Notifications, useToggleState } from "@yoast/ui-library";
 import { safeCreateInterpolateElement } from "../../helpers/i18n";
 import { CONTENT_TYPE, EDIT_TYPE, MIN_CHARACTERS_DEFAULT, MIN_CHARACTERS_IRREGULAR, STORE_NAME_EDITOR } from "../constants";
+import { getVisibleContentLength } from "../../shared-admin/helpers/get-visible-content-length";
 import { useTypeContext } from "../hooks";
 
 const ALERT_KEY = "ai_generator_tip_notification";
 
 /**
  * Returns the minimum content length in characters for the given post type and content type.
- * @param {string} postType The current post type.
+ * @param {boolean} isWooProductEntity Whether the current post type is a WooCommerce product.
  * @param {string} contentType The current content type.
- * @param {boolean} isWooCommerceActive Whether WooCommerce is active.
  * @returns {number} The minimum content length.
  */
 const getMinimumContentLength = ( isWooProductEntity, contentType ) =>
@@ -55,8 +55,12 @@ export const TipNotification = () => {
 	const minimumContentLength = useMemo( () => getMinimumContentLength( isWooProductEntity, contentType ),
 		[ contentType, isWooProductEntity ] );
 
+	// Measured on the visible text rather than on the editor markup, so block comments and HTML tags do not count
+	// towards the threshold. This matches the prompt content the AI receives, which is built from parsed sentences.
+	const visibleContentLength = useMemo( () => getVisibleContentLength( content ), [ content ] );
+
 	// If the tip is dismissed or ignored, or the content length is greater than the minimum required, don't show the tip.
-	if ( isDismissed || isIgnored || content.length > minimumContentLength ) {
+	if ( isDismissed || isIgnored || visibleContentLength > minimumContentLength ) {
 		// Bail to not show the tip notification.
 		return null;
 	}

packages/js/src/ai-generator/constants/index.js

@@ -103,16 +103,10 @@ export const FETCH_RESPONSE_STATUS = {
 	abort: "abort",
 };
 
-/**
- * The maximum number of tokens to consider for default content types.
- * @type {number}
- */
-export const MAX_TOKENS_DEFAULT = 300;
-/**
- * The maximum number of tokens to consider for irregular content types (e.g. products or terms).
- * @type {number}
+/*
+ * The prompt's token budgets (MAX_TOKENS_DEFAULT / MAX_TOKENS_IRREGULAR) live in
+ * shared-admin/helpers/prompt-content.js, so the in-editor generator and the bulk editor share one definition.
  */
-export const MAX_TOKENS_IRREGULAR = 150;
 
 /**
  * The expected minimum character length of content for default content types.