Merge branch 'release/23.3'

Yoast · Aug 20, 2024 · 2f6a0c1 · 2f6a0c1
2 parents ceb8167 + ba2921a
commit 2f6a0c1
Show file tree

Hide file tree

Showing 24 changed files with 441 additions and 57 deletions.
diff --git a/admin/class-gutenberg-compatibility.php b/admin/class-gutenberg-compatibility.php
@@ -15,14 +15,14 @@ class WPSEO_Gutenberg_Compatibility {
 	 *
 	 * @var string
 	 */
-	public const CURRENT_RELEASE = '18.9.0';
+	public const CURRENT_RELEASE = '19.0.0';
 
 	/**
 	 * The minimally supported version of Gutenberg by the plugin.
 	 *
 	 * @var string
 	 */
-	public const MINIMUM_SUPPORTED = '18.9.0';
+	public const MINIMUM_SUPPORTED = '19.0.0';
 
 	/**
 	 * Holds the current version.

diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "webpack-bundle-analyzer": "^4.9.1"
   },
   "yoast": {
-    "pluginVersion": "23.2"
+    "pluginVersion": "23.3"
   },
   "version": "0.0.0"
 }
diff --git a/packages/analysis-report/CHANGELOG.MD b/packages/analysis-report/CHANGELOG.MD
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file. Releases without a changelog entry contain only minor changes that are irrelevant for users of this library.
 We follow [Semantic Versioning](http://semver.org/).
 
+## Future Release
+### Enhancements:
+* Removes an unused named export `AnalysisResult`. Potentially breaking, if you were importing this directly. [#20003](https://github.com/Yoast/wordpress-seo/pull/20003)
+* Makes it possible to render the AI Assessment Fixes button inside `AnalysisResult.js`. [#21348](https://github.com/Yoast/wordpress-seo/pull/21348)
+* Strips HTML tags from the AnalysisResult _text_. Allowed tags are: _a_, _b_, _strong_, _em_ and _i_. [#20086](https://github.com/Yoast/wordpress-seo/pull/20086)
+* Strips HTML tags from the ScoreAssessment _html_. Allowed tags are: _a_, _b_, _strong_, _em_, _i_, _span_, _p_, _ul_, _ol_, _li_ and _div_. [#20086](https://github.com/Yoast/wordpress-seo/pull/20086)
+
+### Non user facing:
+* Now published as a transpiled package.
+* Adds a development dependency `eslint-plugin-import`. [#20003](https://github.com/Yoast/wordpress-seo/pull/20003)
+* Improves internal imports. [#20003](https://github.com/Yoast/wordpress-seo/pull/20003)
+* Implements Babel, ESLint and Jest preset packages. [#18398](https://github.com/Yoast/wordpress-seo/pull/18398)
+* Upgrades `styled-components` to `5.3.6` to fix compatibility with React 18. [#19857](https://github.com/Yoast/wordpress-seo/pull/19857)
+* Upgrades react to 18.2.0, Upgrade react test renderer. [#20653](https://github.com/Yoast/wordpress-seo/pull/20653)
+* Upgrades ESLint and plugins (`import`, `jsx-a11y` and `react`) to the latest versions. [#21315](https://github.com/Yoast/wordpress-seo/pull/21315)
+
 ## 1.2.0 April 23rd, 2020
 ### Other
 * Adds a CSS test stub.

diff --git a/packages/analysis-report/package.json b/packages/analysis-report/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoast/analysis-report",
-  "version": "1.21.0",
+  "version": "2.0.0-alpha.0",
   "main": "build/index.js",
   "files": [
     "build",
@@ -20,17 +20,16 @@
   },
   "author": "Team Yoast",
   "license": "GPL-3.0",
-  "private": true,
   "dependencies": {
     "@wordpress/i18n": "^1.1.0",
-    "@yoast/components": "^3.0.0-alpha.0",
+    "@yoast/components": "^3.0.0-alpha.1",
     "@yoast/helpers": "^0.17.0-alpha.0",
     "@yoast/style-guide": "^0.14.0-alpha.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.0",
-    "styled-components": "^5.3.6",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
     "@babel/core": "^7.17.10",

diff --git a/packages/components/CHANGELOG.MD b/packages/components/CHANGELOG.MD
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file. Releases wi
 We follow [Semantic Versioning](http://semver.org/).
 
 ## Future Release
+### Enhancements
+* Adds component `SparklesIcon`. [#21449](https://github.com/Yoast/wordpress-seo/pull/21449)
+* Adds component `IconButtonBase`. [#21348](https://github.com/Yoast/wordpress-seo/pull/21348)
+* Adds component `IconAIFixesButton`. [#21348](https://github.com/Yoast/wordpress-seo/pull/21348)
+
 ### Other
 * Adds a way to change the link in the `WordOccurenceInsights` component.
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoast/components",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "description": "Yoast Components",
   "main": "build/index.js",
   "private": false,

diff --git a/packages/js/images/lock-closed.svg b/packages/js/images/lock-closed.svg
diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js
@@ -12,7 +12,7 @@ import { Paper } from "yoastseo";
 /* Internal dependencies */
 import { ModalContent } from "./modal-content";
 import { getAllBlocks } from "../../helpers/getAllBlocks";
-import { ReactComponent as LockClosed } from "../../../images/lock-closed.svg";
+import { LockClosedIcon } from "@heroicons/react/solid";
 
 /**
  * The AI Assessment Fixes button component.
@@ -135,7 +135,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 			pressed={ isButtonPressed }
 			disabled={ ! isEnabled }
 		>
-			{ ! isPremium && <LockClosed className="yst-fixes-button__lock-icon" /> }
+			{ ! isPremium && <LockClosedIcon className="yst-fixes-button__lock-icon yst-text-amber-900" /> }
 			<SparklesIcon pressed={ isButtonPressed } />
 			{
 				// We put the logic for the Upsell component in place.

diff --git a/packages/replacement-variable-editor/package.json b/packages/replacement-variable-editor/package.json
@@ -30,7 +30,7 @@
     "@wordpress/components": "^20.0.0",
     "@wordpress/hooks": "^2.12.3",
     "@wordpress/i18n": "^1.2.3",
-    "@yoast/components": "^3.0.0-alpha.0",
+    "@yoast/components": "^3.0.0-alpha.1",
     "@yoast/helpers": "^0.17.0-alpha.0",
     "@yoast/style-guide": "^0.14.0-alpha.0",
     "classnames": "^2.3.2",

diff --git a/packages/search-metadata-previews/package.json b/packages/search-metadata-previews/package.json
@@ -24,7 +24,7 @@
   "dependencies": {
     "@wordpress/a11y": "^1.0.7",
     "@wordpress/i18n": "^1.1.0",
-    "@yoast/components": "^3.0.0-alpha.0",
+    "@yoast/components": "^3.0.0-alpha.1",
     "@yoast/helpers": "^0.17.0-alpha.0",
     "@yoast/replacement-variable-editor": "^2.0.0-alpha.0",
     "@yoast/style-guide": "^0.14.0-alpha.0",

diff --git a/packages/social-metadata-forms/package.json b/packages/social-metadata-forms/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@wordpress/i18n": "^1.1.0",
-    "@yoast/components": "^3.0.0-alpha.0",
+    "@yoast/components": "^3.0.0-alpha.1",
     "@yoast/helpers": "^0.17.0-alpha.0",
     "@yoast/replacement-variable-editor": "^2.0.0-alpha.0",
     "@yoast/style-guide": "^0.14.0-alpha.0",

diff --git a/packages/social-metadata-previews/package.json b/packages/social-metadata-previews/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@wordpress/i18n": "^1.1.0",
-    "@yoast/components": "^3.0.0-alpha.0",
+    "@yoast/components": "^3.0.0-alpha.1",
     "@yoast/replacement-variable-editor": "^2.0.0-alpha.0",
     "@yoast/social-metadata-forms": "^2.0.0-alpha.0",
     "@yoast/style-guide": "^0.14.0-alpha.0",

diff --git a/packages/ui-library/src/elements/toast/docs/complex-layout.md b/packages/ui-library/src/elements/toast/docs/complex-layout.md
@@ -0,0 +1,2 @@
+The content of the `Toast` element can be provided a complex structure. Here `Toast.Title`, `Toast.Description`
+and `Toast.Close` are combined with several other elements like `Button` and `ValidationIcon` in a flex-based structure.
diff --git a/packages/ui-library/src/elements/toast/docs/component.md b/packages/ui-library/src/elements/toast/docs/component.md
@@ -1 +1 @@
-The `Toast` element is a versatile toast component that can be used to implement custom notifications.
+Toasts are versatile elements that can include multiple subcomponents for implementing custom notifications.
diff --git a/packages/ui-library/src/elements/toast/docs/index.js b/packages/ui-library/src/elements/toast/docs/index.js
@@ -2,4 +2,5 @@ export { default as component } from "./component.md";
 export { default as close } from "./close.md";
 export { default as description } from "./description.md";
 export { default as title } from "./title.md";
-
+export { default as useToastContext } from "./use-toast-context.md";
+export { default as complexLayout } from "./complex-layout.md";
diff --git a/packages/ui-library/src/elements/toast/docs/use-toast-context.md b/packages/ui-library/src/elements/toast/docs/use-toast-context.md
@@ -0,0 +1,14 @@
+The `useToastContext` hook returns the toast context. It provides an object with a `handleDismiss` callback, which can be used
+to close the toast from other actions inside the modal. This is useful when you want to close the toast from a custom button or
+a different kind of action.
+
+With help of the `handleDismiss` callback, the `Toast.Close` subcomponent could be replaced with below `ConfirmButton`.
+
+```jsx dark
+import { Button, useToastContext } from "@yoast/ui-library";
+
+const ConfirmButton = () => {
+	const { handleDismiss } = useToastContext();
+	return <Button size="small" onClick={ handleDismiss }>Confirm</Button>;
+};
+```
diff --git a/packages/ui-library/src/elements/toast/index.js b/packages/ui-library/src/elements/toast/index.js
@@ -8,6 +8,11 @@ import React, { createContext, useCallback, useContext, useEffect } from "react"
 
 const ToastContext = createContext( { handleDismiss: noop } );
 
+/**
+ * @returns {Object} The toast context.
+ */
+export const useToastContext = () => useContext( ToastContext );
+
 export const toastClassNameMap = {
 	position: {
 		"bottom-center": "yst-translate-y-full",
@@ -24,7 +29,7 @@ export const toastClassNameMap = {
 const Close = ( {
 	dismissScreenReaderLabel,
 } ) => {
-	const { handleDismiss } = useContext( ToastContext );
+	const { handleDismiss } = useToastContext();
 	return (
 		<div className="yst-flex-shrink-0 yst-flex yst-self-start">
 			<button

diff --git a/packages/ui-library/src/elements/toast/stories.js b/packages/ui-library/src/elements/toast/stories.js
@@ -1,11 +1,13 @@
 import { noop } from "lodash";
 import PropTypes from "prop-types";
-import React, { useCallback, useState } from "react";
-import Toast  from ".";
+import React from "react";
+import Toast, { useToastContext } from ".";
 import Button from "../../elements/button";
 import { InteractiveDocsPage } from "../../../.storybook/interactive-docs-page";
-import { description, component, close, title } from "./docs";
+import { description, component, close, title, useToastContext as useToastContextDocs, complexLayout } from "./docs";
 import classNames from "classnames";
+import { ValidationIcon } from "../validation";
+import { useToggleState } from "../../hooks";
 
 const positionClassNameMap = {
 	position: {
@@ -15,9 +17,7 @@ const positionClassNameMap = {
 	},
 };
 const Template = ( { isVisible: initialVisible, setIsVisible: _, position, children, ...props } ) => {
-	const [ isVisible, setIsVisible ] = useState( initialVisible );
-	const toggleToast = useCallback( () => setIsVisible( ! isVisible ), [ isVisible ] );
-	const openToast = useCallback( () => setIsVisible( true ), [] );
+	const [ isVisible, toggleToast, , openToast ] = useToggleState( initialVisible );
 
 	return (
 		<>
@@ -90,12 +90,14 @@ export const withClose = {
 	name: "With close button",
 	args: {
 		children: (
-			<>
-				<div className="yst-flex yst-flex-row-reverse">
+			<div className="yst-flex">
+				<div className="yst-flex-1">
+					<p>Hello everyone!</p>
+				</div>
+				<div>
 					<Toast.Close dismissScreenReaderLabel="Dismiss" />
 				</div>
-				<p>Hello everyone!</p>
-			</>
+			</div>
 		),
 	},
 	parameters: {
@@ -104,6 +106,74 @@ export const withClose = {
 	},
 };
 
+const ConfirmButton = () => {
+	const { handleDismiss } = useToastContext();
+
+	return <Button size="small" onClick={ handleDismiss }>Confirm</Button>;
+};
+
+export const useToastContextHook = {
+	name: "useToastContext",
+	args: {
+		children: (
+			<div className="yst-flex">
+				<div className="yst-flex-1">
+					<p>Hello everyone!</p>
+				</div>
+				<div>
+					<ConfirmButton />
+				</div>
+			</div>
+		),
+	},
+	parameters: {
+		controls: { disable: true },
+		docs: { description: { story: useToastContextDocs } },
+	},
+};
+
+const DismissButton = () => {
+	const { handleDismiss } = useToastContext();
+	return <Button size="small" variant="tertiary" onClick={ handleDismiss }>Dismiss</Button>;
+};
+
+export const asComplexLayout = {
+	name: "Complex layout",
+	args: {
+		children: (
+			<>
+				<div className="yst-flex yst-gap-3">
+					<div className="yst-flex-shrink-0">
+						<ValidationIcon className="yst-w-5 yst-h-5" />
+					</div>
+					<div className="yst-flex-1">
+						<Toast.Title title="Perform an action?" />
+						<p>An optional action can be performed. Please confirm this action. Otherwise, feel free to dismiss this suggestion.</p>
+					</div>
+					<div>
+						<Toast.Close dismissScreenReaderLabel="Dismiss" />
+					</div>
+				</div>
+				<div className="yst-flex yst-gap-3 yst-justify-end yst-mt-3">
+					<DismissButton />
+					<ConfirmButton />
+				</div>
+			</>
+		),
+	},
+	parameters: {
+		controls: { disable: true },
+		docs: { description: { story: complexLayout } },
+	},
+	decorators: [
+		( Story ) => (
+			<div className="yst-min-h-[21rem]">
+				<Story />
+			</div>
+		),
+	],
+};
+
 export default {
 	title: "1) Elements/Toast",
 	component: Template,
@@ -159,7 +229,7 @@ export default {
 			description: {
 				component,
 			},
-			page: () => <InteractiveDocsPage stories={ [ withClose, withDescription, withTitle ] } />,
+			page: () => <InteractiveDocsPage stories={ [ withTitle, withDescription, withClose, useToastContextHook, asComplexLayout ] } />,
 		},
 	},
 	decorators: [

diff --git a/packages/ui-library/src/index.js b/packages/ui-library/src/index.js
@@ -18,7 +18,7 @@ export { default as TagInput } from "./elements/tag-input";
 export { default as TextInput } from "./elements/text-input";
 export { default as Textarea } from "./elements/textarea";
 export { default as Title } from "./elements/title";
-export { default as Toast } from "./elements/toast";
+export { default as Toast, useToastContext } from "./elements/toast";
 export { default as Toggle } from "./elements/toggle";
 export { default as Tooltip } from "./elements/tooltip";
 export { ValidationIcon, ValidationInput, ValidationMessage } from "./elements/validation";

diff --git a/packages/yoastseo/src/languageProcessing/helpers/index.js b/packages/yoastseo/src/languageProcessing/helpers/index.js
@@ -1,6 +1,7 @@
 import matchStringWithRegex from "./regex/matchStringWithRegex";
 import { normalize } from "./sanitize/quotes";
 import { createShortcodeTagsRegex, filterShortcodesFromHTML } from "./sanitize/filterShortcodesFromTree";
+import processExactMatchRequest from "./match/processExactMatchRequest";
 import removeHtmlBlocks from "./html/htmlParser";
 
 export {
@@ -9,4 +10,5 @@ export {
 	removeHtmlBlocks,
 	filterShortcodesFromHTML,
 	createShortcodeTagsRegex,
+	processExactMatchRequest,
 };