Update wordpress packages to a recent version (#78711)

* Add script which updates package.json resolutions field

* Update @WordPress packages to latest versions in package.json resolutions

* Update all @WordPress packages to the latest version

* Update internal @wordpress/data peer dependency versions

* Resolve most peer dependency issues

* Use ComponentProps for some WP component type imports

* Rework submenu popover to remove legacy offset props

* Fix all Button variant type issues

* Remove uneeded button wrapper component in info-tooltip

* Fix type for close modal event in page pattern modal

* Add ts expect error for ExternalLink required children prop

* Add onChange type definition for CustomSelectControl for language-picker

* Remove unused @types/wordpress__ packages

* Remove uneeded entries in yarnrc.yml

* Change another case of isPrimary to variant

* Fix global styles package for new WordPress package versions (#78715)

* @automattic/global-styles: Replace @wordpress/edit-site apis with new ones

* Use fixed version of private-apis package to make __private symbol consistent

* Use ExperimentalBlockEditorProvider to initialize Iframe

* Fix unable to get fontFamilies

* Fix styles

* Fix style variation preview

* Fix types

* Replace mergeWith with deepmerge

* Get rid of isEmpty and mapValues in global-stypes pkg

* Add comments

* Revert some changes

* cleanEmptyObject: Fix type

* transformStyles: Fix type

* WP components: Fix types

* Move EditorStyles into the children of the Iframe

---------

Co-authored-by: arthur <[email protected]>

* Delete several @WordPress module declarations that duplicate bundled types

* Remove uneeded HTMLElement override

* Remove Global Styles wp components type declaration override

* Remove manage purchases renew toggle wp components type override

* Add back html element hotfix

* Remove imports of deleted type patch files

* Fix type errors related to re-declaring Button prop types

* Fix type errors related to ExternalLink requiring children

* Fix type errors related to Modal isOpen prop

* Remove registerPlugin override

* Remove target blank from ExternalLink, because it isn't used by the component internally

* Fix several prop issues related to ExternalLink (remove target, include children)

* Add missing @types/wordpress__block-library package

* Fix type errors related to Modal open prop

* Remove size prop in a couple cases because it doesn't do anything

* Fix type errors related to importing component prop types

* Fix useState types for date time picker example

* yarn dedupe

* Fix type issue with NavigatorButton wrapper class name

* Remove another wp components type override file

* Update onNavigatorPathChange argument which is sometimes undefined

* Fix a type issue with global styles context

* Fix eslint issues with hooks in modified files

* Remove unused translate import

* Fix type issue where reader button couldn't be disabled

* Remove disabled from a Button instance which is a link

* Fix state type related to FontSizePicker

* Fix odd issue with query control types

* Fix issue with SlotFill not being typed

* Remove broken types from ToolbarGroup as it's just an example

* Fix issue with arr.includes undefined

* Fix issue with combobox onchange arg type

* Remove disabled from another button link

* Cast translateresult to string for input to label

* Cast string to more specific type for log tab

* Fix onChange type for another combobox

* Add missing onhover prop to component

* Fix issue with Token value types

* Add missing labels to notification toggles

* Remove useless wrapper component

* Add types to callback args

* Remove uneeded ts expect err and update component props for combobox control

* fix color type definition for global styles

* Remove uneeded types in callback

* Remove useless component wrapper

* Utilize useLocalizeUrl() where necessary

* Fix some test snapshots

* Fix composite checkout tests by introducing field reset

* dedupe

* Fix most of the remaining TS errors

* Remove uneeded wrapper components

* Add expect-error to incorrect .then error

* Assembler: Fix the main layout is broken (#79275)

* Comment out wrapperClassName which causes a type error

* Change a few HStack props from alignItems to alignment

* Assembler: Fix the styles of the navigator button (#79338)

* Lock file update

* Make Button variants more consistent with trunk

* Use better approach for picking anchor button types

---------

Co-authored-by: arthur <[email protected]>
Co-authored-by: Marin Atanasov <[email protected]>

.yarnrc.yml

@@ -43,7 +43,7 @@ logFilters:
   - level: discard
     pattern: "calypso@workspace:client provides +(react|react-dom) (*) with version 18.2.0, which doesn't satisfy what reakit and some of its descendants request"
 
-# TODO: Remove this once the react-easy-crop transitive dependency can be removed. (Likely after updating @wordpress/block-editor to a newer version.)
+# TODO: Remove this once the react-autosize-textarea transitive dependency has been fixed/updated to a version with React 18 support.
   - level: discard
     pattern: "calypso@workspace:client provides +(react|react-dom) (*) with version 18.2.0, which doesn't satisfy what @automattic/block-renderer and some of its descendants request"
 
@@ -62,21 +62,27 @@ packageExtensions:
   "@signal-noise/[email protected]":
     peerDependencies:
       postcss: "*"
-  "@types/[email protected]":
+  "@wordpress/[email protected]":
     peerDependencies:
-      react: "*"
-  "@types/[email protected]":
+      react-dom: "*"
+  "@wordpress/[email protected]":
     peerDependencies:
-      react: "*"
-  "@wordpress/data-controls@2.23.0":
+      react-dom: "*"
+  "@wordpress/data-controls@3.4.0":
     peerDependencies:
       react: "*"
-  "@wordpress/notices@3.23.0":
+  "@wordpress/notices@4.3.0":
     peerDependencies:
       react: "*"
-  "@wordpress/[email protected]":
+  "@wordpress/[email protected]":
+    peerDependencies:
+      react-dom: "*"
+  "@wordpress/[email protected]":
     peerDependencies:
       postcss: "*"
+  "[email protected]":
+    peerDependencies:
+      react: "*"
   [email protected]:
     peerDependencies:
       core-js-bundle: "*"

apps/blaze-dashboard/package.json

@@ -53,7 +53,7 @@
 		"@automattic/webpack-extensive-lodash-replacement-plugin": "workspace:^",
 		"@automattic/webpack-inline-constant-exports-plugin": "workspace:^",
 		"@automattic/wp-babel-makepot": "workspace:^",
-		"@wordpress/dependency-extraction-webpack-plugin": "^4.5.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "^4.19.0",
 		"autoprefixer": "^10.2.5",
 		"gettext-parser": "^6.0.0",
 		"html-webpack-plugin": "^5.0.0-beta.4",

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/attach-sidebar.tsx

@@ -2,7 +2,7 @@ import { START_WRITING_FLOW, DESIGN_FIRST_FLOW } from '@automattic/onboarding';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
 import { useEffect, createPortal, useState } from '@wordpress/element';
-import { registerPlugin as originalRegisterPlugin, PluginSettings } from '@wordpress/plugins';
+import { registerPlugin } from '@wordpress/plugins';
 import useSiteIntent from '../../dotcom-fse/lib/site-intent/use-site-intent';
 import WpcomBlockEditorNavSidebar from './components/nav-sidebar';
 import ToggleSidebarButton from './components/toggle-sidebar-button';
@@ -11,9 +11,6 @@ type CoreEditPostPlaceholder = {
 	isFeatureActive: ( ...args: unknown[] ) => boolean;
 };
 
-const registerPlugin = ( name: string, settings: Omit< PluginSettings, 'icon' > ) =>
-	originalRegisterPlugin( name, settings as PluginSettings );
-
 if ( typeof MainDashboardButton !== 'undefined' ) {
 	registerPlugin( 'a8c-full-site-editing-nav-sidebar', {
 		render: function NavSidebar() {

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/create-page/index.tsx

@@ -1,5 +1,5 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import { Button as OriginalButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
@@ -8,13 +8,6 @@ import { get } from 'lodash';
 
 import './style.scss';
 
-const Button = ( {
-	children,
-	...rest
-}: OriginalButton.Props & { icon?: unknown; iconSize?: number } ) => (
-	<OriginalButton { ...rest }>{ children }</OriginalButton>
-);
-
 interface Props {
 	postType: { slug: string };
 }
@@ -47,7 +40,7 @@ export default function CreatePage( { postType }: Props ) {
 			target={
 				applyFilters( 'a8c.WpcomBlockEditorNavSidebar.linkTarget', undefined ) as string | undefined
 			}
-			isPrimary
+			variant="primary"
 			className="wpcom-block-editor-nav-sidebar-create-page"
 			href={ url }
 			icon={ plus }

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/index.tsx

@@ -35,17 +35,8 @@ type CorePlaceholder = {
 };
 
 const Button = forwardRef(
-	(
-		{
-			children,
-			...rest
-		}: OriginalButton.Props & { icon?: unknown; iconSize?: number; showTooltip?: boolean },
-		ref
-	) => (
-		<OriginalButton
-			ref={ ref as string | ( ( instance: HTMLElement | null ) => void ) }
-			{ ...rest }
-		>
+	( { children, ...rest }: React.ComponentProps< typeof OriginalButton >, ref ) => (
+		<OriginalButton ref={ ref } { ...rest }>
 			{ children }
 		</OriginalButton>
 	)

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/toggle-sidebar-button/index.tsx

@@ -1,19 +1,12 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import { Button as OriginalButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { store } from '../../store';
 import SiteIcon from '../site-icon';
 import './style.scss';
 
-const Button = ( {
-	children,
-	...rest
-}: OriginalButton.Props & { icon?: unknown; iconSize?: number; showTooltip?: boolean } ) => (
-	<OriginalButton { ...rest }>{ children }</OriginalButton>
-);
-
 export default function ToggleSidebarButton() {
 	const { toggleSidebar } = useDispatch( store );
 	const isSidebarOpen = useSelect( ( select ) => select( store ).isSidebarOpened(), [] );

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/first-post-published-modal/index.tsx

@@ -90,11 +90,11 @@ const FirstPostPublishedModal: React.FC = () => {
 			imageSrc={ postPublishedImage }
 			actionButtons={
 				<>
-					<Button isPrimary onClick={ handleViewPostClick }>
+					<Button variant="primary" onClick={ handleViewPostClick }>
 						{ __( 'View Post', 'full-site-editing' ) }
 					</Button>
 					{ launchpadScreenOption === 'full' && siteIntentOption === 'write' && (
-						<Button isSecondary onClick={ handleNextStepsClick }>
+						<Button variant="secondary" onClick={ handleNextStepsClick }>
 							{ __( 'Next Steps', 'full-site-editing' ) }
 						</Button>
 					) }

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/nux-modal/index.tsx

@@ -42,7 +42,6 @@ const NuxModal: React.FC< Props > = ( {
 	return (
 		<Modal
 			className={ classnames( 'wpcom-block-editor-nux-modal', className ) }
-			open={ isOpen }
 			title=""
 			onRequestClose={ onRequestClose }
 		>

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/sharing-modal/index.tsx

@@ -178,7 +178,6 @@ const SharingModal: React.FC = () => {
 	return (
 		<Modal
 			className="wpcom-block-editor-post-published-sharing-modal"
-			open={ isOpen }
 			title=""
 			onRequestClose={ closeModal }
 		>
@@ -195,9 +194,9 @@ const SharingModal: React.FC = () => {
 							{
 								a: (
 									<ExternalLink
+										children={ null }
 										href={ subscribersUrl }
 										onClick={ trackSubscribersClick }
-										target="_blank"
 									/>
 								),
 							}

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/welcome-tour/tour-steps.tsx

@@ -99,6 +99,7 @@ function getTourSteps(
 										<ExternalLink
 											href={ siteEditorCourseUrl }
 											onClick={ onSiteEditorCourseLinkClick }
+											children={ null }
 										/>
 									),
 								}
@@ -322,7 +323,6 @@ function getTourSteps(
 									'https://wordpress.com/support/video-tutorials-add-payments-features-to-your-site-with-our-guides/#how-to-use-the-payments-block-video',
 									localeSlug
 								) }
-								target="_blank"
 								rel="noopener noreferrer"
 							>
 								{ __( 'Learn more', 'full-site-editing' ) }
@@ -359,6 +359,7 @@ function getTourSteps(
 													'https://wordpress.com/support/full-site-editing/',
 													localeSlug
 												) }
+												children={ null }
 											/>
 										),
 									}
@@ -396,6 +397,7 @@ function getTourSteps(
 										'https://wordpress.com/support/settings/privacy-settings/#launch-your-site',
 										localeSlug
 									) }
+									children={ null }
 								/>
 							),
 							link_to_editor_docs: (
@@ -404,6 +406,7 @@ function getTourSteps(
 										'https://wordpress.com/support/wordpress-editor/',
 										localeSlug
 									) }
+									children={ null }
 								/>
 							),
 						}

apps/editing-toolkit/package.json

@@ -68,37 +68,37 @@
 		"@popperjs/core": "^2.10.2",
 		"@sentry/browser": "^7.54.0",
 		"@tanstack/react-query": "^4.29.1",
-		"@wordpress/a11y": "^3.23.0",
-		"@wordpress/api-fetch": "^6.20.0",
-		"@wordpress/base-styles": "^4.14.0",
-		"@wordpress/block-editor": "^11.0.0",
-		"@wordpress/blocks": "^12.0.0",
-		"@wordpress/components": "^23.0.0",
-		"@wordpress/compose": "^6.0.0",
-		"@wordpress/data": "^8.0.0",
-		"@wordpress/data-controls": "^2.23.0",
-		"@wordpress/date": "^4.23.0",
-		"@wordpress/dependency-extraction-webpack-plugin": "^4.6.0",
-		"@wordpress/dom-ready": "^3.23.0",
-		"@wordpress/edit-post": "^7.0.0",
-		"@wordpress/element": "^5.0.0",
+		"@wordpress/a11y": "^3.36.0",
+		"@wordpress/api-fetch": "^6.33.0",
+		"@wordpress/base-styles": "^4.27.0",
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/compose": "^6.12.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/data-controls": "^3.4.0",
+		"@wordpress/date": "^4.36.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "^4.19.0",
+		"@wordpress/dom-ready": "^3.36.0",
+		"@wordpress/edit-post": "^7.12.0",
+		"@wordpress/element": "^5.13.0",
 		"@wordpress/env": "^8.3.0",
-		"@wordpress/escape-html": "^2.23.0",
-		"@wordpress/hooks": "^3.23.0",
-		"@wordpress/html-entities": "^3.23.0",
-		"@wordpress/i18n": "^4.23.0",
-		"@wordpress/icons": "^9.14.0",
-		"@wordpress/interface": "^5.0.0",
-		"@wordpress/is-shallow-equal": "^4.23.0",
-		"@wordpress/keycodes": "^3.23.0",
-		"@wordpress/notices": "^3.23.0",
+		"@wordpress/escape-html": "^2.36.0",
+		"@wordpress/hooks": "^3.36.0",
+		"@wordpress/html-entities": "^3.36.0",
+		"@wordpress/i18n": "^4.36.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/interface": "^5.12.0",
+		"@wordpress/is-shallow-equal": "^4.36.0",
+		"@wordpress/keycodes": "^3.36.0",
+		"@wordpress/notices": "^4.3.0",
 		"@wordpress/nux": "^6.0.0",
-		"@wordpress/plugins": "^5.0.0",
-		"@wordpress/primitives": "^3.21.0",
-		"@wordpress/private-apis": "^0.9.0",
-		"@wordpress/rich-text": "^6.0.0",
-		"@wordpress/server-side-render": "^4.0.0",
-		"@wordpress/url": "^3.24.0",
+		"@wordpress/plugins": "^6.3.0",
+		"@wordpress/primitives": "^3.34.0",
+		"@wordpress/private-apis": "^0.18.0",
+		"@wordpress/rich-text": "^6.12.0",
+		"@wordpress/server-side-render": "^4.12.0",
+		"@wordpress/url": "^3.37.0",
 		"calypso": "workspace:^",
 		"classnames": "^2.3.1",
 		"eslint": "^8.34.0",
@@ -124,9 +124,8 @@
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.0.0",
 		"@types/node": "^18.11.18",
-		"@types/wordpress__plugins": "^3.0.0",
-		"@wordpress/eslint-plugin": "^13.7.0",
-		"@wordpress/readable-js-assets-webpack-plugin": "^2.6.0",
+		"@wordpress/eslint-plugin": "^14.8.0",
+		"@wordpress/readable-js-assets-webpack-plugin": "^2.19.0",
 		"babel-jest": "^29.6.1",
 		"eslint-filtered-fix": "^0.3.0",
 		"eslint-nibble": "^8.1.0",

apps/happy-blocks/package.json

@@ -33,12 +33,12 @@
 		"@automattic/wp-babel-makepot": "workspace:^",
 		"@automattic/wpcom-template-parts": "workspace:^",
 		"@emotion/styled": "^11.3.0",
-		"@wordpress/base-styles": "^4.14.0",
-		"@wordpress/block-editor": "^11.0.0",
-		"@wordpress/blocks": "^12.0.0",
-		"@wordpress/components": "^23.0.0",
-		"@wordpress/element": "^5.0.0",
-		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/base-styles": "^4.27.0",
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/element": "^5.13.0",
+		"@wordpress/i18n": "^4.36.0",
 		"classnames": "^2.3.2",
 		"glob": "^7.1.6",
 		"i18n-calypso": "workspace:^",
@@ -49,7 +49,7 @@
 		"@automattic/calypso-apps-builder": "workspace:^",
 		"@emotion/react": "^11.4.1",
 		"@testing-library/react": "^14.0.0",
-		"@wordpress/readable-js-assets-webpack-plugin": "^2.6.0",
+		"@wordpress/readable-js-assets-webpack-plugin": "^2.19.0",
 		"copy-webpack-plugin": "^10.1.0",
 		"glob": "^7.1.6",
 		"postcss": "^8.4.5",

apps/o2-blocks/package.json

@@ -22,19 +22,19 @@
 	},
 	"dependencies": {
 		"@automattic/calypso-build": "workspace:^",
-		"@wordpress/api-fetch": "^6.20.0",
-		"@wordpress/base-styles": "^4.14.0",
-		"@wordpress/block-editor": "^11.0.0",
-		"@wordpress/blocks": "^12.0.0",
-		"@wordpress/components": "^23.0.0",
-		"@wordpress/data": "^8.0.0",
-		"@wordpress/editor": "^13.0.0",
-		"@wordpress/element": "^5.0.0",
-		"@wordpress/hooks": "^3.23.0",
-		"@wordpress/i18n": "^4.23.0",
-		"@wordpress/icons": "^9.14.0",
-		"@wordpress/is-shallow-equal": "^4.23.0",
-		"@wordpress/primitives": "^3.21.0",
+		"@wordpress/api-fetch": "^6.33.0",
+		"@wordpress/base-styles": "^4.27.0",
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/editor": "^13.12.0",
+		"@wordpress/element": "^5.13.0",
+		"@wordpress/hooks": "^3.36.0",
+		"@wordpress/i18n": "^4.36.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/is-shallow-equal": "^4.36.0",
+		"@wordpress/primitives": "^3.34.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment": "^2.26.0",
@@ -46,7 +46,7 @@
 	"devDependencies": {
 		"@automattic/calypso-apps-builder": "workspace:^",
 		"@automattic/calypso-eslint-overrides": "workspace:^",
-		"@wordpress/readable-js-assets-webpack-plugin": "^2.6.0",
+		"@wordpress/readable-js-assets-webpack-plugin": "^2.19.0",
 		"postcss": "^8.4.5",
 		"webpack": "^5.68.0"
 	}

apps/odyssey-stats/package.json

@@ -33,9 +33,9 @@
 		"@automattic/calypso-url": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@tanstack/react-query": "4.29.1",
-		"@wordpress/base-styles": "^4.14.0",
-		"@wordpress/data": "^8.0.0",
-		"@wordpress/icons": "^9.14.0",
+		"@wordpress/base-styles": "^4.27.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/icons": "^9.26.0",
 		"calypso": "workspace:^",
 		"classnames": "^2.3.1",
 		"debug": "^4.3.4",
@@ -61,7 +61,7 @@
 		"@automattic/wp-babel-makepot": "workspace:^",
 		"@babel/core": "^7.17.5",
 		"@size-limit/file": "^8.2.4",
-		"@wordpress/dependency-extraction-webpack-plugin": "^4.6.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "^4.19.0",
 		"autoprefixer": "^10.2.5",
 		"babel-jest": "^29.6.1",
 		"gettext-parser": "^6.0.0",