From 6c06f5bd46f11caff775bd72c1853901c1c790e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Tue, 21 Feb 2023 13:55:40 -0300
Subject: [PATCH 01/38] Jetpack: log event when converting video block to the
 new VideoPress video block (#29071)

* log v5 -> v6 manual conversion event

* changelog
---
 .../changelog/update-jetpack-log-v5-v6-conversions     |  4 ++++
 .../v6-transform/components/transform-control/index.js | 10 +++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 projects/plugins/jetpack/changelog/update-jetpack-log-v5-v6-conversions

diff --git a/projects/plugins/jetpack/changelog/update-jetpack-log-v5-v6-conversions b/projects/plugins/jetpack/changelog/update-jetpack-log-v5-v6-conversions
new file mode 100644
index 0000000000000..07e39aa86e936
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-jetpack-log-v5-v6-conversions
@@ -0,0 +1,4 @@
+Significance: minor
+Type: major
+
+Jetpack: log event when converting video block to the new VideoPress video block
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/v6-transform/components/transform-control/index.js b/projects/plugins/jetpack/extensions/blocks/videopress/v6-transform/components/transform-control/index.js
index 56acd237494ed..c95b62c35a488 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/v6-transform/components/transform-control/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/v6-transform/components/transform-control/index.js
@@ -1,10 +1,12 @@
 /**
  * WordPress dependencies
  */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { Button, Notice } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 /**
  * External dependencies
@@ -22,17 +24,23 @@ import styles from './styles.module.scss';
  * @returns {ReactElement}          - Transform panel component.
  */
 export default function TransformControl() {
+	const postId = useSelect( select => select( editorStore ).getCurrentPostId() );
+
 	const { getBlocks } = useSelect( blockEditorStore );
 	const { replaceBlock } = useDispatch( blockEditorStore );
+	const { tracks } = useAnalytics();
 
 	const handleTransformAll = () => {
 		const blocks = getBlocks();
 
 		blocks.forEach( block => {
 			const { clientId, name, attributes } = block;
-
 			if ( name === 'core/video' && isVideoPressBlockBasedOnAttributes( attributes ) ) {
 				replaceBlock( clientId, createBlock( 'videopress/video', attributes ) );
+
+				tracks.recordEvent( 'jetpack_editor_videopress_block_manual_conversion_click', {
+					post_id: postId,
+				} );
 			}
 		} );
 	};

From 27e5706af62189442b41a35fb8c75bfdc259b3d1 Mon Sep 17 00:00:00 2001
From: Jasper Kang <jasper.kang@automattic.com>
Date: Wed, 22 Feb 2023 11:27:06 +1300
Subject: [PATCH 02/38] Stats Admin: move new stats toggling to package
 (#29064)

* [not verified] refactor toggling new stats logic to stats-admin

* [not verified] changelog

* [not verified] fix project versions
---
 .../update-move-new-stats-toggling-to-package |  4 +++
 projects/packages/stats-admin/package.json    |  2 +-
 .../packages/stats-admin/src/class-main.php   | 33 ++++++++++++++++++-
 ...lass.jetpack-core-api-module-endpoints.php | 21 ++----------
 .../update-move-new-stats-toggling-to-package |  4 +++
 5 files changed, 44 insertions(+), 20 deletions(-)
 create mode 100644 projects/packages/stats-admin/changelog/update-move-new-stats-toggling-to-package
 create mode 100644 projects/plugins/jetpack/changelog/update-move-new-stats-toggling-to-package

diff --git a/projects/packages/stats-admin/changelog/update-move-new-stats-toggling-to-package b/projects/packages/stats-admin/changelog/update-move-new-stats-toggling-to-package
new file mode 100644
index 0000000000000..8e7b3a44b400b
--- /dev/null
+++ b/projects/packages/stats-admin/changelog/update-move-new-stats-toggling-to-package
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Stats: moved New Stats toggling logic to stats-admin
diff --git a/projects/packages/stats-admin/package.json b/projects/packages/stats-admin/package.json
index fcd4ba532af72..8fce8c4b3fb31 100644
--- a/projects/packages/stats-admin/package.json
+++ b/projects/packages/stats-admin/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-stats-admin",
-	"version": "0.6.1",
+	"version": "0.6.2-alpha",
 	"description": "Stats Dashboard",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/stats-admin/#readme",
 	"bugs": {
diff --git a/projects/packages/stats-admin/src/class-main.php b/projects/packages/stats-admin/src/class-main.php
index 45443d0dadcdf..caecb32dff786 100644
--- a/projects/packages/stats-admin/src/class-main.php
+++ b/projects/packages/stats-admin/src/class-main.php
@@ -7,6 +7,10 @@
 
 namespace Automattic\Jetpack\Stats_Admin;
 
+use Automattic\Jetpack\Connection\Manager;
+use Automattic\Jetpack\Stats\Options as Stats_Options;
+use Automattic\Jetpack\Tracking;
+
 /**
  * Stats Main class.
  *
@@ -18,7 +22,7 @@ class Main {
 	/**
 	 * Stats version.
 	 */
-	const VERSION = '0.6.1';
+	const VERSION = '0.6.2-alpha';
 
 	/**
 	 * Singleton Main instance.
@@ -49,4 +53,31 @@ public static function init() {
 	private function __construct() {
 		add_action( 'rest_api_init', array( new REST_Controller(), 'register_rest_routes' ) );
 	}
+
+	/**
+	 * Update New Stats status.
+	 *
+	 * @param bool $status true to enable or false to disable.
+	 * @return bool
+	 */
+	public static function update_new_stats_status( $status ) {
+		$status = (bool) $status;
+
+		$stats_options = array(
+			'enable_odyssey_stats'     => $status,
+			'odyssey_stats_changed_at' => time(),
+		);
+		$updated       = Stats_Options::set_options( $stats_options );
+
+		// Track the event.
+		$event_name = 'calypso_stats_disabled';
+		if ( $status ) {
+			$event_name = 'calypso_stats_enabled';
+		}
+		$connection_manager = new Manager( 'jetpack' );
+		$tracking           = new Tracking( 'jetpack', $connection_manager );
+		$tracking->record_user_event( $event_name, array_merge( $stats_options, array( 'updated' => $updated ) ) );
+
+		return $updated;
+	}
 }
diff --git a/projects/plugins/jetpack/_inc/lib/core-api/class.jetpack-core-api-module-endpoints.php b/projects/plugins/jetpack/_inc/lib/core-api/class.jetpack-core-api-module-endpoints.php
index 83a1ee6216d15..ac3971610dcf5 100644
--- a/projects/plugins/jetpack/_inc/lib/core-api/class.jetpack-core-api-module-endpoints.php
+++ b/projects/plugins/jetpack/_inc/lib/core-api/class.jetpack-core-api-module-endpoints.php
@@ -5,14 +5,11 @@
  * @package automattic/jetpack
  */
 
-use Automattic\Jetpack\Connection\Manager;
 use Automattic\Jetpack\Connection\REST_Connector;
 use Automattic\Jetpack\Plugins_Installer;
-use Automattic\Jetpack\Stats\Options as Stats_Options;
 use Automattic\Jetpack\Stats\WPCOM_Stats;
+use Automattic\Jetpack\Stats_Admin\Main as Stats_Admin_Main;
 use Automattic\Jetpack\Status;
-use Automattic\Jetpack\Tracking;
-
 /**
  * This is the base class for every Core API endpoint Jetpack uses.
  */
@@ -883,20 +880,8 @@ public function update_data( $request ) {
 					break;
 
 				case 'enable_odyssey_stats':
-					$value         = (bool) $value;
-					$stats_options = array(
-						'enable_odyssey_stats'     => $value,
-						'odyssey_stats_changed_at' => time(),
-					);
-					$updated       = Stats_Options::set_options( $stats_options );
-					// Track the event.
-					$event_name = 'calypso_stats_disabled';
-					if ( $value ) {
-						$event_name = 'calypso_stats_enabled';
-					}
-					$connection_manager = new Manager( 'jetpack' );
-					$tracking           = new Tracking( 'jetpack', $connection_manager );
-					$tracking->record_user_event( $event_name, array_merge( $stats_options, array( 'updated' => $updated ) ) );
+					$updated = Stats_Admin_Main::update_new_stats_status( $value );
+
 					break;
 
 				case 'akismet_show_user_comments_approved':
diff --git a/projects/plugins/jetpack/changelog/update-move-new-stats-toggling-to-package b/projects/plugins/jetpack/changelog/update-move-new-stats-toggling-to-package
new file mode 100644
index 0000000000000..9ed2ed7417f99
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-move-new-stats-toggling-to-package
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Stats: moved New Stats toggling logic to stats-admin

From 5cee8654b022234188d779ae5f65b18fa8b72182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Tue, 21 Feb 2023 20:24:21 -0300
Subject: [PATCH 03/38] Jetpack: log when transform from video block v5 to v6
 (#29076)

* log when transform v5 to v6

* changelog
---
 .../changelog/update-jetpack-log-v5-v6-transform |  4 ++++
 .../extensions/blocks/videopress/editor.js       | 16 +++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/update-jetpack-log-v5-v6-transform

diff --git a/projects/plugins/jetpack/changelog/update-jetpack-log-v5-v6-transform b/projects/plugins/jetpack/changelog/update-jetpack-log-v5-v6-transform
new file mode 100644
index 0000000000000..fb200dab31555
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-jetpack-log-v5-v6-transform
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Jetpack: log when transforming from video block v5 to v6
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/editor.js b/projects/plugins/jetpack/extensions/blocks/videopress/editor.js
index 24528a54ccc28..86753d6c26733 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/editor.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/editor.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import analytics from '@automattic/jetpack-analytics';
 import {
 	isAtomicSite,
 	isSimpleSite,
@@ -13,8 +14,8 @@ import { parse } from '@wordpress/block-serialization-default-parser';
 import { createBlock, getBlockType } from '@wordpress/blocks';
 import { Button } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-import { mediaUpload } from '@wordpress/editor';
+import { useDispatch, select } from '@wordpress/data';
+import { mediaUpload, store as editorStore } from '@wordpress/editor';
 import { useContext, useEffect } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
@@ -447,7 +448,16 @@ function addVideoPressCoreVideoTransform( settings, name ) {
 						const guidFromSrc = pickGUIDFromUrl( src );
 						return guid || guidFromSrc;
 					},
-					transform: attrs => createBlock( 'videopress/video', attrs ),
+					transform: attrs => {
+						const postId = select( editorStore ).getCurrentPostId();
+						analytics?.tracks?.recordEvent(
+							'jetpack_editor_videopress_block_manual_transform_click',
+							{
+								post_id: postId,
+							}
+						);
+						return createBlock( 'videopress/video', attrs );
+					},
 				},
 			],
 			to: [

From 72ef3482932e1e1b27f481090ec48a7d18ed2ee5 Mon Sep 17 00:00:00 2001
From: Jasper Kang <jasper.kang@automattic.com>
Date: Wed, 22 Feb 2023 12:57:50 +1300
Subject: [PATCH 04/38] Stats Admin: opt-in notice  30 days after Odyssey is
 disabled (#29065)

* Show Opt-in notice 30 days after the new stats being disabled

* changelog

* fix logic and change ut

* fix project versions
---
 .../changelog/fix-opt-in-stats-notice-30days  |  4 +++
 .../stats-admin/src/class-notices.php         | 27 ++++++++++++++-----
 .../tests/php/test-stats-notices.php          |  1 +
 3 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 projects/packages/stats-admin/changelog/fix-opt-in-stats-notice-30days

diff --git a/projects/packages/stats-admin/changelog/fix-opt-in-stats-notice-30days b/projects/packages/stats-admin/changelog/fix-opt-in-stats-notice-30days
new file mode 100644
index 0000000000000..fbc22a93b83f6
--- /dev/null
+++ b/projects/packages/stats-admin/changelog/fix-opt-in-stats-notice-30days
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Stats Admin: Opt-in notice should be shown a month after the customer has opted out of Odyssey Stats.
diff --git a/projects/packages/stats-admin/src/class-notices.php b/projects/packages/stats-admin/src/class-notices.php
index bfbfac3b77a49..54f7da8ffdef9 100644
--- a/projects/packages/stats-admin/src/class-notices.php
+++ b/projects/packages/stats-admin/src/class-notices.php
@@ -22,8 +22,9 @@ class Notices {
 	const NOTICE_STATUS_DISMISSED = 'dismissed';
 	const NOTICE_STATUS_POSTPONED = 'postponed';
 
-	const VIEWS_TO_SHOW_FEEDBACK = 3;
-	const POSTPONE_FEEDBACK_DAYS = 30;
+	const VIEWS_TO_SHOW_FEEDBACK      = 3;
+	const POSTPONE_FEEDBACK_DAYS      = 30;
+	const POSTPONE_OPT_IN_NOTICE_DAYS = 30;
 
 	/**
 	 * Update the notice status.
@@ -53,13 +54,25 @@ public function update_notice( $id, $status, $postponed_for = 0 ) {
 	 * @return array
 	 */
 	public function get_notices_to_show() {
-		$new_stats_enabled = Stats_Options::get_option( 'enable_odyssey_stats' );
-		$stats_views       = $this->get_new_stats_views();
+		$new_stats_enabled        = Stats_Options::get_option( 'enable_odyssey_stats' );
+		$stats_views              = $this->get_new_stats_views();
+		$odyssey_stats_changed_at = intval( Stats_Options::get_option( 'odyssey_stats_changed_at' ) );
 
 		return array(
-			self::OPT_IN_NEW_STATS_NOTICE_ID   => ! $new_stats_enabled && ! $this->is_notice_hidden( self::OPT_IN_NEW_STATS_NOTICE_ID ),
-			self::NEW_STATS_FEEDBACK_NOTICE_ID => $new_stats_enabled && $stats_views >= self::VIEWS_TO_SHOW_FEEDBACK && ! $this->is_notice_hidden( self::NEW_STATS_FEEDBACK_NOTICE_ID ),
-			self::OPT_OUT_NEW_STATS_NOTICE_ID  => $new_stats_enabled && $stats_views < self::VIEWS_TO_SHOW_FEEDBACK && ! $this->is_notice_hidden( self::OPT_OUT_NEW_STATS_NOTICE_ID ),
+			// Show Opt-in notice 30 days after the new stats being disabled.
+			self::OPT_IN_NEW_STATS_NOTICE_ID   => ! $new_stats_enabled
+				&& $odyssey_stats_changed_at < time() - self::POSTPONE_OPT_IN_NOTICE_DAYS * DAY_IN_SECONDS
+				&& ! $this->is_notice_hidden( self::OPT_IN_NEW_STATS_NOTICE_ID ),
+
+			// Show feedback notice after 3 views of the new stats.
+			self::NEW_STATS_FEEDBACK_NOTICE_ID => $new_stats_enabled
+				&& $stats_views >= self::VIEWS_TO_SHOW_FEEDBACK
+				&& ! $this->is_notice_hidden( self::NEW_STATS_FEEDBACK_NOTICE_ID ),
+
+			// Show opt-out notice before 3 views of the new stats, where 3 is included.
+			self::OPT_OUT_NEW_STATS_NOTICE_ID  => $new_stats_enabled
+				&& $stats_views < self::VIEWS_TO_SHOW_FEEDBACK
+				&& ! $this->is_notice_hidden( self::OPT_OUT_NEW_STATS_NOTICE_ID ),
 		);
 	}
 
diff --git a/projects/packages/stats-admin/tests/php/test-stats-notices.php b/projects/packages/stats-admin/tests/php/test-stats-notices.php
index 8f268d6ade130..c3164602d9b64 100644
--- a/projects/packages/stats-admin/tests/php/test-stats-notices.php
+++ b/projects/packages/stats-admin/tests/php/test-stats-notices.php
@@ -101,6 +101,7 @@ public function test_new_stats_feedback_notice_postponed_show_again() {
 	 */
 	public function test_opt_in_new_stats_notice_show() {
 		Stats_Options::set_option( 'enable_odyssey_stats', false );
+		Stats_Options::set_option( 'odyssey_stats_changed_at', time() - 31 * DAY_IN_SECONDS );
 		$this->assertTrue( self::$notices->get_notices_to_show()['opt_in_new_stats'] );
 	}
 

From 99bc0e977ef7453162ed1c8e328ffed2f25949cd Mon Sep 17 00:00:00 2001
From: thingalon <mark@thingalon.com>
Date: Wed, 22 Feb 2023 14:52:54 +1100
Subject: [PATCH 05/38] [Boost] Fix layout of the upgrade CTA (#29063)

* Fix the layout of the upgrade CTA

* changelog

---------

Co-authored-by: Mark George <thingalon@gmail.com>
---
 .../boost/app/assets/src/css/components/critical-css.scss     | 1 +
 projects/plugins/boost/changelog/boost-fix-cta                | 4 ++++
 2 files changed, 5 insertions(+)
 create mode 100644 projects/plugins/boost/changelog/boost-fix-cta

diff --git a/projects/plugins/boost/app/assets/src/css/components/critical-css.scss b/projects/plugins/boost/app/assets/src/css/components/critical-css.scss
index 058f8f17e70bc..b02157b8a575d 100644
--- a/projects/plugins/boost/app/assets/src/css/components/critical-css.scss
+++ b/projects/plugins/boost/app/assets/src/css/components/critical-css.scss
@@ -177,6 +177,7 @@
 	border: 2px solid $jetpack-green;
 	border-radius: $border-radius;
 	background-color: #ffffff;
+	text-align: left;
 	cursor: pointer;
 
 	p {
diff --git a/projects/plugins/boost/changelog/boost-fix-cta b/projects/plugins/boost/changelog/boost-fix-cta
new file mode 100644
index 0000000000000..62721d1e8071c
--- /dev/null
+++ b/projects/plugins/boost/changelog/boost-fix-cta
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix layout of the upgrade CTA

From 68f8cb6960c70d70cfecd044a1fa0f43ef6469bf Mon Sep 17 00:00:00 2001
From: Jeremy Yip <jeremy.yip@automattic.com>
Date: Wed, 22 Feb 2023 00:10:42 -0800
Subject: [PATCH 06/38] Launchpad: Avoid rendering launchpad modal above post
 publish modal (#28989)

---
 ...o-avoid-rendering-above-post-publish-modal |  4 +++
 .../plugins/launchpad-save-modal/index.js     | 34 +++++++++++++++++--
 .../launchpad-save-modal.php                  |  5 +--
 3 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/update-launchpad-save-modal-to-avoid-rendering-above-post-publish-modal

diff --git a/projects/plugins/jetpack/changelog/update-launchpad-save-modal-to-avoid-rendering-above-post-publish-modal b/projects/plugins/jetpack/changelog/update-launchpad-save-modal-to-avoid-rendering-above-post-publish-modal
new file mode 100644
index 0000000000000..f64f394e4939b
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-launchpad-save-modal-to-avoid-rendering-above-post-publish-modal
@@ -0,0 +1,4 @@
+Significance: minor
+Type: compat
+
+Prevent launchpad modal from rendering on top of the first post published modal
diff --git a/projects/plugins/jetpack/extensions/plugins/launchpad-save-modal/index.js b/projects/plugins/jetpack/extensions/plugins/launchpad-save-modal/index.js
index c538245e5c42b..6fc0f5e876686 100644
--- a/projects/plugins/jetpack/extensions/plugins/launchpad-save-modal/index.js
+++ b/projects/plugins/jetpack/extensions/plugins/launchpad-save-modal/index.js
@@ -4,7 +4,7 @@ import { Modal, Button, CheckboxControl } from '@wordpress/components';
 import { usePrevious } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import './editor.scss';
 
@@ -17,6 +17,7 @@ export const settings = {
 			[]
 		);
 		const isSavingPost = useSelect( select => select( editorStore ).isSavingPost(), [] );
+		const isPublishingPost = useSelect( select => select( editorStore ).isPublishingPost(), [] );
 		const isCurrentPostPublished = useSelect(
 			select => select( editorStore ).isCurrentPostPublished(),
 			[]
@@ -24,6 +25,7 @@ export const settings = {
 
 		const prevIsSavingSite = usePrevious( isSavingSite );
 		const prevIsSavingPost = usePrevious( isSavingPost );
+		const prevIsPublishingPost = usePrevious( isPublishingPost );
 
 		// We use this state as a flag to manually handle the modal close on first post publish
 		const [ isInitialPostPublish, setIsInitialPostPublish ] = useState( false );
@@ -32,9 +34,11 @@ export const settings = {
 		const [ dontShowAgain, setDontShowAgain ] = useState( false );
 		const [ isChecked, setIsChecked ] = useState( false );
 
-		const { launchpadScreenOption, siteIntentOption } = window?.Jetpack_LaunchpadSaveModal || {};
+		const { launchpadScreenOption, hasNeverPublishedPostOption, siteIntentOption } =
+			window?.Jetpack_LaunchpadSaveModal || {};
 		const isInsideSiteEditor = document.getElementById( 'site-editor' ) !== null;
 		const isInsidePostEditor = document.querySelector( '.block-editor' ) !== null;
+		const prevHasNeverPublishedPostOption = useRef( hasNeverPublishedPostOption );
 
 		const siteFragment = getSiteFragment();
 		const launchPadUrl = getRedirectUrl( `wpcom-launchpad-setup-${ siteIntentOption }`, {
@@ -52,13 +56,37 @@ export const settings = {
 			} );
 
 		useEffect( () => {
+			// We want to prevent the launchpad modal from rendering on top of the first
+			// post published modal that exists in the editing toolkit. The following
+			// conditional is a stopgap solution for the time being, and the end goal is
+			// to migrate the first post published modal logic into jetpack, abstract code from
+			// both modals and their rendering behavior, and remove this solution afterwards.
 			if (
+				prevIsPublishingPost === true &&
+				isPublishingPost === false &&
+				prevHasNeverPublishedPostOption.current &&
+				siteIntentOption === 'write' &&
+				isInsidePostEditor
+			) {
+				setIsModalOpen( false );
+				prevHasNeverPublishedPostOption.current = '';
+				return;
+			} else if (
 				( prevIsSavingSite === true && isSavingSite === false ) ||
 				( prevIsSavingPost === true && isSavingPost === false )
 			) {
 				setIsModalOpen( true );
 			}
-		}, [ isSavingSite, prevIsSavingSite, isSavingPost, prevIsSavingPost ] );
+		}, [
+			isSavingSite,
+			prevIsSavingSite,
+			isSavingPost,
+			prevIsSavingPost,
+			siteIntentOption,
+			isInsidePostEditor,
+			isPublishingPost,
+			prevIsPublishingPost,
+		] );
 
 		useEffect( () => {
 			// if the isCurrentPostPublished is ever false it means this current post hasn't been published yet so we set the initialPostPublish state
diff --git a/projects/plugins/jetpack/extensions/plugins/launchpad-save-modal/launchpad-save-modal.php b/projects/plugins/jetpack/extensions/plugins/launchpad-save-modal/launchpad-save-modal.php
index 16e00c7f5d9eb..18effeeb29044 100644
--- a/projects/plugins/jetpack/extensions/plugins/launchpad-save-modal/launchpad-save-modal.php
+++ b/projects/plugins/jetpack/extensions/plugins/launchpad-save-modal/launchpad-save-modal.php
@@ -22,8 +22,9 @@ function add_launchpad_options() {
 	}
 
 	$launchpad_options = array(
-		'launchpadScreenOption' => get_option( 'launchpad_screen' ),
-		'siteIntentOption'      => get_option( 'site_intent' ),
+		'launchpadScreenOption'       => get_option( 'launchpad_screen' ),
+		'siteIntentOption'            => get_option( 'site_intent' ),
+		'hasNeverPublishedPostOption' => get_option( 'has_never_published_post' ),
 	);
 	wp_add_inline_script(
 		'jetpack-blocks-editor',

From 317fb78670ec335866e36cb451bc4b4dd31b8181 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Wed, 22 Feb 2023 10:14:47 +0100
Subject: [PATCH 07/38] Sharing: add a Mastodon sharing button (#28694)

Co-authored-by: Brandon Kraft <public@brandonkraft.com>
Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>
---
 .../changelog/add-mastodon-sharing-button     |   4 +
 .../modules/sharedaddy/admin-sharing.css      |   3 +
 .../modules/sharedaddy/admin-sharing.js       |   7 +-
 .../services/class-jetpack-mastodon-modal.php | 195 ++++++++++++++++++
 .../modules/sharedaddy/sharing-service.php    |   1 +
 .../modules/sharedaddy/sharing-sources.php    | 154 +++++++++++++-
 .../jetpack/modules/sharedaddy/sharing.css    |  15 ++
 7 files changed, 375 insertions(+), 4 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/add-mastodon-sharing-button
 create mode 100644 projects/plugins/jetpack/modules/sharedaddy/services/class-jetpack-mastodon-modal.php

diff --git a/projects/plugins/jetpack/changelog/add-mastodon-sharing-button b/projects/plugins/jetpack/changelog/add-mastodon-sharing-button
new file mode 100644
index 0000000000000..02e16d39d5924
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-mastodon-sharing-button
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Sharing: add Mastodon sharing button.
diff --git a/projects/plugins/jetpack/modules/sharedaddy/admin-sharing.css b/projects/plugins/jetpack/modules/sharedaddy/admin-sharing.css
index 4ca7041d234c6..e4bf4044deda8 100644
--- a/projects/plugins/jetpack/modules/sharedaddy/admin-sharing.css
+++ b/projects/plugins/jetpack/modules/sharedaddy/admin-sharing.css
@@ -165,6 +165,9 @@ li.service.share-jetpack-whatsapp span:before {
 li.service.share-skype span:before {
 	content: '\f220';
 }
+li.service.share-mastodon span:before {
+	content: '\f10a';
+}
 
 /**
  * Preview section
diff --git a/projects/plugins/jetpack/modules/sharedaddy/admin-sharing.js b/projects/plugins/jetpack/modules/sharedaddy/admin-sharing.js
index 5eff11fe910bd..6f72dc3f4ab2e 100644
--- a/projects/plugins/jetpack/modules/sharedaddy/admin-sharing.js
+++ b/projects/plugins/jetpack/modules/sharedaddy/admin-sharing.js
@@ -96,12 +96,12 @@
 			var button_style = $( '#button_style' ).val();
 
 			// Toggle .sd-social-official class
-			var sharedaddy = $('.sharedaddy');
+			var sharedaddy = $( '.sharedaddy' );
 			var oficialClass = 'sd-social-official';
 			if ( 'official' === button_style ) {
-				sharedaddy.addClass(oficialClass);
+				sharedaddy.addClass( oficialClass );
 			} else {
-				sharedaddy.removeClass(oficialClass);
+				sharedaddy.removeClass( oficialClass );
 			}
 
 			// Clear the live preview
@@ -165,6 +165,7 @@
 						if (
 							! $( this ).hasClass( 'preview-press-this' ) &&
 							! $( this ).hasClass( 'preview-email' ) &&
+							! $( this ).hasClass( 'preview-mastodon' ) &&
 							! $( this ).hasClass( 'preview-print' ) &&
 							! $( this ).hasClass( 'preview-telegram' ) &&
 							! $( this ).hasClass( 'preview-jetpack-whatsapp' ) &&
diff --git a/projects/plugins/jetpack/modules/sharedaddy/services/class-jetpack-mastodon-modal.php b/projects/plugins/jetpack/modules/sharedaddy/services/class-jetpack-mastodon-modal.php
new file mode 100644
index 0000000000000..f0153de88bc90
--- /dev/null
+++ b/projects/plugins/jetpack/modules/sharedaddy/services/class-jetpack-mastodon-modal.php
@@ -0,0 +1,195 @@
+<?php
+/**
+ * Display a Mastodon modal, where folks can enter a Mastodon instance.
+ *
+ * @package automattic/jetpack
+ */
+
+/**
+ * Class Mastodon_Modal
+ */
+class Jetpack_Mastodon_Modal {
+	/**
+	 * Mastodon SVG icon.
+	 *
+	 * @var string
+	 */
+	private static $svg = '<svg width="261" height="66" viewBox="0 0 261 66" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M60.7539 14.4034C59.8143 7.41942 53.7273 1.91557 46.5117 0.849066C45.2943 0.668854 40.6819 0.0130005 29.9973 0.0130005H29.9175C19.2299 0.0130005 16.937 0.668854 15.7196 0.849066C8.70488 1.88602 2.29885 6.83152 0.744617 13.8982C-0.00294988 17.3784 -0.0827298 21.2367 0.0561464 24.7759C0.254119 29.8514 0.292531 34.918 0.753482 39.9728C1.07215 43.3305 1.62806 46.6614 2.41704 49.9406C3.89445 55.9969 9.87499 61.0369 15.7344 63.0931C22.0077 65.2374 28.7542 65.5934 35.2184 64.1212C35.9295 63.9558 36.6318 63.7638 37.3252 63.5451C38.8971 63.0459 40.738 62.4875 42.0913 61.5067C42.1099 61.4929 42.1251 61.4751 42.1358 61.4547C42.1466 61.4342 42.1526 61.4116 42.1534 61.3885V56.4903C42.153 56.4687 42.1479 56.4475 42.1383 56.4281C42.1287 56.4088 42.1149 56.3918 42.0979 56.3785C42.0809 56.3652 42.0611 56.3559 42.04 56.3512C42.019 56.3465 41.9971 56.3466 41.9761 56.3514C37.8345 57.3406 33.5905 57.8364 29.3324 57.8286C22.0045 57.8286 20.0336 54.3514 19.4693 52.9038C19.0156 51.6527 18.7275 50.3476 18.6124 49.0218C18.6112 48.9996 18.6153 48.9773 18.6243 48.9569C18.6333 48.9366 18.647 48.9186 18.6643 48.9045C18.6816 48.8904 18.7019 48.8805 18.7237 48.8758C18.7455 48.871 18.7681 48.8715 18.7897 48.8771C22.8622 49.8595 27.037 50.3553 31.2265 50.3542C32.234 50.3542 33.2387 50.3542 34.2463 50.3276C38.4598 50.2094 42.9009 49.9938 47.0465 49.1843C47.1499 49.1636 47.2534 49.1459 47.342 49.1193C53.881 47.8637 60.1038 43.9227 60.7362 33.9431C60.7598 33.5502 60.8189 29.8278 60.8189 29.4201C60.8218 28.0345 61.2651 19.5911 60.7539 14.4034Z" fill="url(#paint0_linear_89_11)"></path>
+<path d="M12.3442 18.3034C12.3442 16.2668 13.9777 14.6194 15.997 14.6194C18.0163 14.6194 19.6497 16.2668 19.6497 18.3034C19.6497 20.34 18.0163 21.9874 15.997 21.9874C13.9777 21.9874 12.3442 20.34 12.3442 18.3034Z" fill="currentColor"></path>
+<path d="M66.1484 21.4685V38.3839H59.4988V21.9744C59.4988 18.5109 58.0583 16.7597 55.1643 16.7597C51.9746 16.7597 50.3668 18.8482 50.3668 22.9603V31.9499H43.7687V22.9603C43.7687 18.8352 42.1738 16.7597 38.9712 16.7597C36.0901 16.7597 34.6367 18.5109 34.6367 21.9744V38.3839H28V21.4685C28 18.018 28.8746 15.268 30.6238 13.2314C32.4374 11.1948 34.8039 10.157 37.7365 10.157C41.132 10.157 43.7172 11.4802 45.415 14.1135L47.0742 16.9154L48.7334 14.1135C50.4311 11.4802 53.0035 10.157 56.4119 10.157C59.3444 10.157 61.711 11.1948 63.5246 13.2314C65.2738 15.268 66.1484 18.005 66.1484 21.4685ZM89.0297 29.8743C90.4059 28.4085 91.0619 26.5795 91.0619 24.3613C91.0619 22.1431 90.4059 20.3011 89.0297 18.9001C87.7049 17.4343 86.0329 16.7338 84.0007 16.7338C81.9685 16.7338 80.2965 17.4343 78.9717 18.9001C77.6469 20.3011 76.991 22.1431 76.991 24.3613C76.991 26.5795 77.6469 28.4215 78.9717 29.8743C80.2965 31.2753 81.9685 31.9888 84.0007 31.9888C86.0329 31.9888 87.7049 31.2883 89.0297 29.8743ZM91.0619 10.8316H97.6086V37.891H91.0619V34.6999C89.0811 37.3462 86.3416 38.6563 82.7788 38.6563C79.2161 38.6563 76.4765 37.3073 74.0456 34.5442C71.6533 31.7812 70.4443 28.3696 70.4443 24.3743C70.4443 20.3789 71.6661 17.0192 74.0456 14.2561C76.4893 11.4931 79.3833 10.0922 82.7788 10.0922C86.1744 10.0922 89.0811 11.3894 91.0619 14.0356V10.8445V10.8316ZM119.654 23.8683C121.583 25.3342 122.548 27.3837 122.496 29.9781C122.496 32.7411 121.532 34.9075 119.551 36.4122C117.57 37.878 115.178 38.6304 112.284 38.6304C107.049 38.6304 103.499 36.4641 101.621 32.1963L107.306 28.7847C108.065 31.1067 109.737 32.3001 112.284 32.3001C114.625 32.3001 115.782 31.5477 115.782 29.9781C115.782 28.8366 114.265 27.8118 111.165 27.0075C109.995 26.6833 109.03 26.359 108.271 26.0865C107.204 25.6585 106.29 25.1655 105.532 24.5688C103.654 23.103 102.689 21.1572 102.689 18.6666C102.689 16.0203 103.602 13.9059 105.429 12.3882C107.306 10.8186 109.596 10.0662 112.335 10.0662C116.709 10.0662 119.898 11.9601 121.982 15.7998L116.4 19.0428C115.59 17.2008 114.213 16.2798 112.335 16.2798C110.355 16.2798 109.39 17.0321 109.39 18.498C109.39 19.6395 110.908 20.6643 114.008 21.4685C116.4 22.0134 118.278 22.8176 119.641 23.8554L119.654 23.8683ZM140.477 17.538H134.741V28.7977C134.741 30.1468 135.255 30.964 136.22 31.3402C136.927 31.6126 138.355 31.6645 140.49 31.5607V37.891C136.079 38.4358 132.876 37.9948 130.998 36.5419C129.12 35.1409 128.207 32.5336 128.207 28.8106V17.538H123.795V10.8316H128.207V5.37038L134.754 3.25595V10.8316H140.49V17.538H140.477ZM161.352 29.7187C162.677 28.3177 163.333 26.5276 163.333 24.3613C163.333 22.195 162.677 20.4178 161.352 19.0039C160.027 17.6029 158.407 16.8894 156.426 16.8894C154.445 16.8894 152.825 17.5899 151.5 19.0039C150.227 20.4697 149.571 22.2469 149.571 24.3613C149.571 26.4757 150.227 28.2529 151.5 29.7187C152.825 31.1196 154.445 31.8331 156.426 31.8331C158.407 31.8331 160.027 31.1326 161.352 29.7187ZM146.883 34.5313C144.297 31.7682 143.024 28.4215 143.024 24.3613C143.024 20.3011 144.297 17.0062 146.883 14.2432C149.468 11.4802 152.67 10.0792 156.426 10.0792C160.182 10.0792 163.384 11.4802 165.97 14.2432C168.555 17.0062 169.88 20.4178 169.88 24.3613C169.88 28.3047 168.555 31.7682 165.97 34.5313C163.384 37.2943 160.233 38.6434 156.426 38.6434C152.619 38.6434 149.468 37.2943 146.883 34.5313ZM191.771 29.8743C193.095 28.4085 193.751 26.5795 193.751 24.3613C193.751 22.1431 193.095 20.3011 191.771 18.9001C190.446 17.4343 188.774 16.7338 186.742 16.7338C184.709 16.7338 183.037 17.4343 181.661 18.9001C180.336 20.3011 179.68 22.1431 179.68 24.3613C179.68 26.5795 180.336 28.4215 181.661 29.8743C183.037 31.2753 184.761 31.9888 186.742 31.9888C188.722 31.9888 190.446 31.2883 191.771 29.8743ZM193.751 0H200.298V37.891H193.751V34.6999C191.822 37.3462 189.082 38.6563 185.52 38.6563C181.957 38.6563 179.179 37.3073 176.735 34.5442C174.343 31.7812 173.134 28.3696 173.134 24.3743C173.134 20.3789 174.356 17.0192 176.735 14.2561C179.166 11.4931 182.111 10.0922 185.52 10.0922C188.928 10.0922 191.822 11.3894 193.751 14.0356V0.0129719V0ZM223.308 29.7057C224.633 28.3047 225.289 26.5146 225.289 24.3483C225.289 22.182 224.633 20.4048 223.308 18.9909C221.983 17.5899 220.363 16.8765 218.382 16.8765C216.401 16.8765 214.78 17.577 213.456 18.9909C212.182 20.4567 211.526 22.2339 211.526 24.3483C211.526 26.4627 212.182 28.2399 213.456 29.7057C214.78 31.1067 216.401 31.8201 218.382 31.8201C220.363 31.8201 221.983 31.1196 223.308 29.7057ZM208.838 34.5183C206.253 31.7553 204.98 28.4085 204.98 24.3483C204.98 20.2881 206.253 16.9932 208.838 14.2302C211.424 11.4672 214.626 10.0662 218.382 10.0662C222.137 10.0662 225.34 11.4672 227.925 14.2302C230.511 16.9932 231.835 20.4048 231.835 24.3483C231.835 28.2918 230.511 31.7553 227.925 34.5183C225.34 37.2813 222.189 38.6304 218.382 38.6304C214.575 38.6304 211.424 37.2813 208.838 34.5183ZM260.17 21.261V37.878H253.623V22.1301C253.623 20.34 253.173 18.9909 252.247 17.9661C251.385 17.0451 250.164 16.5651 248.594 16.5651C244.89 16.5651 243.012 18.7833 243.012 23.2716V37.878H236.466V10.8316H243.012V13.867C244.581 11.3245 247.077 10.0792 250.575 10.0792C253.366 10.0792 255.656 11.0521 257.431 13.0498C259.257 15.0474 260.17 17.7586 260.17 21.274" fill="currentColor"></path>
+<defs>
+<linearGradient id="paint0_linear_89_11" x1="30.5" y1="0.0130005" x2="30.5" y2="65.013" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6364FF"></stop>
+<stop offset="1" stop-color="#563ACC"></stop>
+</linearGradient>
+</defs>
+</svg>';
+
+	/**
+	 * Decide whether the modal should be displayed.
+	 * We want to show it when the user clicks on the Mastodon share button,
+	 * thus loading a page with ?share=mastodon&nb=1.
+	 *
+	 * @return bool
+	 */
+	public static function should_display_modal() {
+		if (
+			// phpcs:disable WordPress.Security.NonceVerification.Recommended -- Only used to display the modal.
+			isset( $_GET['share'] )
+			&& 'mastodon' === sanitize_text_field( wp_unslash( $_GET['share'] ) )
+			&& isset( $_GET['nb'] )
+			&& 1 === (int) $_GET['nb']
+			// phpcs:enable
+		) {
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Hook the modal render into WordPress.
+	 */
+	public static function modal() {
+		if ( ! self::should_display_modal() ) {
+			return;
+		}
+
+		// Render the modal.
+		self::render_modal();
+
+		die();
+	}
+
+	/**
+	 * Render the modal.
+	 */
+	public static function render_modal() { ?>
+<!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="robots" content="noindex,follow" />
+	<meta name="referrer" content="no-referrer">
+		<?php rel_canonical(); ?>
+	<title><?php esc_html_e( 'Share to Mastodon', 'jetpack' ); ?></title>
+	<style type="text/css">
+		.sd-mastodon-modal {
+			background-color: #282c37;
+			color: #ffffff;
+			display: flex;
+			flex-direction: column;
+			font-family: sans-serif;
+			margin-top: 1em;
+		}
+
+		.sd-mastodon-modal__inner {
+			margin: 0 auto;
+			width: 450px;
+		}
+
+		.sd-mastodon-modal__title,
+		.sd-mastodon-modal__logo {
+			display: flex;
+			font-size: 0;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.sd-mastodon-modal__logo {
+			margin-top: 50px;
+		}
+
+		.sd-mastodon-modal__logo svg {
+			height: 42px;
+		}
+
+		.sd-mastodon-modal__inner form {
+			margin: 2em 0;
+			max-width: 400px;
+			padding: 0 1em;
+		}
+
+		.sd-mastodon-modal__inner label {
+			font-size: 14px;
+			font-weight: 500;
+		}
+
+		.sd-mastodon-modal__inner input {
+			box-sizing: border-box;
+			font-size: 16px;
+			color: #fff;
+			display: block;
+			width: 100%;
+			outline: 0;
+			font-family: inherit;
+			resize: vertical;
+			background: #131419;
+			border: 1px solid #0a0b0e;
+			border-radius: 4px;
+			margin: 15px 10px 10px 0;
+			padding: 10px;
+		}
+
+		.sd-mastodon-modal__inner input:focus {
+			border-color: #8c8dff;
+			background: #17191f;
+		}
+
+		.sd-mastodon-modal__submit button {
+			display: block;
+			width: 100%;
+			border: 0;
+			border-radius: 4px;
+			background: #595aff;
+			color: #fff;
+			font-size: 18px;
+			line-height: inherit;
+			height: auto;
+			margin: 15px 10px 10px 0;
+			padding: 10px;
+			text-decoration: none;
+			text-transform: uppercase;
+			text-align: center;
+			box-sizing: border-box;
+			cursor: pointer;
+			font-weight: 500;
+			outline: 0;
+		}
+
+		.sd-mastodon-modal__submit button:hover {
+			background-color: #6364ff;
+		}
+	</style>
+</head>
+<body class="sd-mastodon-modal">
+	<div class="sd-mastodon-modal__inner">
+		<h2 class="sd-mastodon-modal__title"><?php esc_html_e( 'Share to Mastodon', 'jetpack' ); ?></h2>
+		<div class="sd-mastodon-modal__logo">
+			<?php echo self::$svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- SVG is safe. ?>
+		</div>
+		<form method="post">
+			<label for="jetpack-mastodon-instance" class="sd-mastodon-modal__label">
+				<?php esc_html_e( 'Enter the full URL of the Mastodon instance where you’d like to share this post.', 'jetpack' ); ?>
+			</label>
+			<input
+				required
+				aria-required="true"
+				type="url"
+				id="jetpack-mastodon-instance"
+				name="jetpack-mastodon-instance"
+				placeholder="<?php echo esc_url( 'https://mastodon.social' ); ?>"
+			/>
+			<div class="sd-mastodon-modal__submit">
+				<?php wp_nonce_field( 'jetpack_share_mastodon_instance', '_wpnonce', true, true ); ?>
+				<button id="mastodon-submit"><?php esc_html_e( 'Share', 'jetpack' ); ?></button>
+			</div>
+		</form>
+	</div>
+</body>
+</html>
+		<?php
+	}
+}
diff --git a/projects/plugins/jetpack/modules/sharedaddy/sharing-service.php b/projects/plugins/jetpack/modules/sharedaddy/sharing-service.php
index 8b749fcc2ac72..ac366de60ab7b 100644
--- a/projects/plugins/jetpack/modules/sharedaddy/sharing-service.php
+++ b/projects/plugins/jetpack/modules/sharedaddy/sharing-service.php
@@ -107,6 +107,7 @@ public function get_all_services( $include_custom = true ) {
 			'telegram'         => 'Share_Telegram',
 			'jetpack-whatsapp' => 'Jetpack_Share_WhatsApp',
 			'skype'            => 'Share_Skype',
+			'mastodon'         => 'Share_Mastodon',
 		);
 
 		if ( is_multisite() && is_plugin_active( 'press-this/press-this-plugin.php' ) ) {
diff --git a/projects/plugins/jetpack/modules/sharedaddy/sharing-sources.php b/projects/plugins/jetpack/modules/sharedaddy/sharing-sources.php
index c0887f053641f..0a26df02a9314 100644
--- a/projects/plugins/jetpack/modules/sharedaddy/sharing-sources.php
+++ b/projects/plugins/jetpack/modules/sharedaddy/sharing-sources.php
@@ -150,7 +150,47 @@ public function get_share_title( $post_id ) {
 		 */
 		$title = apply_filters( 'sharing_title', $post->post_title, $post_id, $this->id );
 
-		return html_entity_decode( wp_kses( $title, null ), ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML401 );
+		return html_entity_decode( wp_kses( $title, '' ), ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML401 );
+	}
+
+	/**
+	 * Get a comma-separated list of the post's tags to use for sharing.
+	 * Prepends a '#' to each tag.
+	 *
+	 * @param int $post_id Post ID.
+	 *
+	 * @return string
+	 */
+	public function get_share_tags( $post_id ) {
+		$tags = get_the_tags( $post_id );
+		if ( ! $tags ) {
+			return '';
+		}
+
+		$tags = array_map(
+			function ( $tag ) {
+				// Camel case the tag name and remove spaces as well as apostrophes.
+				$tag = preg_replace( '/\s+|\'/', '', ucwords( $tag->name ) );
+
+				// Return with a '#' prepended.
+				return '#' . $tag;
+			},
+			$tags
+		);
+
+		/**
+		 * Allow customizing how the list of tags is displayed.
+		 *
+		 * @module sharedaddy
+		 * @since $$next-version$$
+		 *
+		 * @param string $tags     Comma-separated list of tags.
+		 * @param int    $post_id  Post ID.
+		 * @param int    $this->id Sharing ID.
+		 */
+		$tag_list = (string) apply_filters( 'jetpack_sharing_tag_list', implode( ', ', $tags ), $post_id, $this->id );
+
+		return html_entity_decode( wp_kses( $tag_list, '' ), ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML401 );
 	}
 
 	/**
@@ -3041,3 +3081,115 @@ public function display_footer() {
 		endif;
 	}
 }
+
+/**
+ * Mastodon sharing service.
+ */
+class Share_Mastodon extends Sharing_Source {
+	/**
+	 * Service short name.
+	 *
+	 * @var string
+	 */
+	public $shortname = 'mastodon';
+
+	/**
+	 * Service icon font code.
+	 *
+	 * @var string
+	 */
+	public $icon = '\f10a';
+
+	/**
+	 * Service name.
+	 *
+	 * @return string
+	 */
+	public function get_name() {
+		return __( 'Mastodon', 'jetpack' );
+	}
+
+	/**
+	 * Get the markup of the sharing button.
+	 *
+	 * @param WP_Post $post Post object.
+	 *
+	 * @return string
+	 */
+	public function get_display( $post ) {
+		return $this->get_link(
+			$this->get_process_request_url( $post->ID ),
+			_x( 'Mastodon', 'share to', 'jetpack' ),
+			__( 'Click to share on Mastodon', 'jetpack' ),
+			'share=mastodon',
+			'sharing-mastodon-' . $post->ID
+		);
+	}
+
+	/**
+	 * Process sharing request. Add actions that need to happen when sharing here.
+	 *
+	 * @param WP_Post $post Post object.
+	 * @param array   $post_data Array of information about the post we're sharing.
+	 *
+	 * @return void
+	 */
+	public function process_request( $post, array $post_data ) {
+		if ( empty( $_POST['jetpack-mastodon-instance'] ) ) {
+			require_once WP_SHARING_PLUGIN_DIR . 'services/class-jetpack-mastodon-modal.php';
+			add_action( 'template_redirect', array( 'Jetpack_Mastodon_Modal', 'modal' ) );
+			return;
+		}
+
+		check_admin_referer( 'jetpack_share_mastodon_instance' );
+
+		$mastodon_instance = isset( $_POST['jetpack-mastodon-instance'] )
+			? trailingslashit( sanitize_text_field( wp_unslash( $_POST['jetpack-mastodon-instance'] ) ) )
+			: null;
+
+		$post_title = $this->get_share_title( $post->ID );
+		$post_link  = $this->get_share_url( $post->ID );
+		$post_tags  = $this->get_share_tags( $post->ID );
+
+		/**
+		 * Allow filtering the default message that gets posted to Mastodon.
+		 *
+		 * @module sharedaddy
+		 * @since $$next-version$$
+		 *
+		 * @param string  $share_url The default message that gets posted to Mastodon.
+		 * @param WP_Post $post      The post object.
+		 * @param array   $post_data Array of information about the post we're sharing.
+		 */
+		$shared_message = apply_filters(
+			'jetpack_sharing_mastodon_default_message',
+			$post_title . ' ' . $post_link . ' ' . $post_tags,
+			$post,
+			$post_data
+		);
+
+		$share_url = sprintf(
+			'%1$sshare?text=%2$s',
+			$mastodon_instance,
+			rawurlencode( $shared_message )
+		);
+
+			// Record stats
+		parent::process_request( $post, $post_data );
+
+		parent::redirect_request( $share_url );
+	}
+
+	/**
+	 * Add content specific to a service in the footer.
+	 */
+	public function display_footer() {
+		$this->js_dialog(
+			$this->shortname,
+			array(
+				'width'  => 460,
+				'height' => 400,
+			)
+		);
+	}
+}
diff --git a/projects/plugins/jetpack/modules/sharedaddy/sharing.css b/projects/plugins/jetpack/modules/sharedaddy/sharing.css
index cdf36698590fc..306811670b377 100644
--- a/projects/plugins/jetpack/modules/sharedaddy/sharing.css
+++ b/projects/plugins/jetpack/modules/sharedaddy/sharing.css
@@ -333,6 +333,16 @@ body .sd-content ul li.share-custom.no-icon a span {
 .sd-social-icon-text .sd-content li.share-skype a:before {
 	content: '\f220';
 }
+.sd-social-icon .sd-content ul li.share-mastodon a:before,
+.sd-social-text .sd-content ul li.share-mastodon a:before,
+.sd-content ul li.share-mastodon div.option.option-smart-off a:before,
+.sd-social-icon-text .sd-content li.share-mastodon a:before,
+.sd-social-official .sd-content li.share-mastodon a:before {
+	content: '\f10a';
+}
+.sd-social-official .sd-content li.share-mastodon a:before {
+	color: #563ACC;
+}
 .sd-social-icon .sd-content ul a.share-more:before,
 .sd-social-text .sd-content ul a.share-more:before,
 .sd-content ul li.advanced a.share-more:before,
@@ -655,6 +665,11 @@ body .sd-social-icon .sd-content li.share-custom a span {
 	color: #fff !important;
 }
 
+.sd-social-icon .sd-content ul li[class*='share-'].share-mastodon a.sd-button {
+	background: linear-gradient(to top, #563ACC 0%, #6364FF 100%);
+	color: #fff !important;
+}
+
 /**
  * Screen Reader Text for "Icon Only" option
  */

From fbe842dc0e57d78cfc63ca8ea6e06673ec90dafd Mon Sep 17 00:00:00 2001
From: Bogdan Nikolic <bogdan.nikolic87@gmail.com>
Date: Wed, 22 Feb 2023 11:03:58 +0100
Subject: [PATCH 08/38] Migration plugin: Fixed styles for mobile screens
 (#29081)

* Migration plugin: fix styling for mobile screens
---
 .../plugins/migration/changelog/fix-migration-styling     | 4 ++++
 .../src/js/components/migration/styles.module.scss        | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 projects/plugins/migration/changelog/fix-migration-styling

diff --git a/projects/plugins/migration/changelog/fix-migration-styling b/projects/plugins/migration/changelog/fix-migration-styling
new file mode 100644
index 0000000000000..ee7bbffae7612
--- /dev/null
+++ b/projects/plugins/migration/changelog/fix-migration-styling
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix styles for mobile screens
diff --git a/projects/plugins/migration/src/js/components/migration/styles.module.scss b/projects/plugins/migration/src/js/components/migration/styles.module.scss
index b4913d0d9db08..651138403c3e7 100644
--- a/projects/plugins/migration/src/js/components/migration/styles.module.scss
+++ b/projects/plugins/migration/src/js/components/migration/styles.module.scss
@@ -14,6 +14,10 @@
 
 	  	.jp-connection__connect-screen-layout__left {
 			padding: 64px;
+			
+			@media ( max-width: 450px ) {
+				padding: 24px
+			}
 		}
 
 	  	.jp-connection__connect-screen-layout__right {
@@ -59,6 +63,7 @@
 		.get-started-help {
 		  	font-size: 14px;
 			color: var( --jp-gray-50 );
+			margin-top: 12px !important;
 			margin-bottom: 0 !important;
 
 		  	.components-button {
@@ -79,6 +84,7 @@
 				padding: 20px;
 				min-width: 146px;
 				margin-right: 16px;
+				margin-bottom: 12px;
 				justify-content: center;
 				border-radius: 4px;
 
@@ -103,8 +109,8 @@
 			}
 
 		  	.components-notice {
+				margin-top: 20px;
 			  	margin-left: 0;
-			  	margin-top: 20px;
 			}
 		}
 	}

From 5a16af933fafda9dcc00cd084d7bf8603acb2b75 Mon Sep 17 00:00:00 2001
From: Artur Piszek <artur.piszek@automattic.com>
Date: Wed, 22 Feb 2023 11:35:41 +0100
Subject: [PATCH 09/38] Subscribe block: email field required in WPCOM (#28995)

* Make the email required for subscriptions block on WPCOM
---
 .../plugins/jetpack/changelog/paid-newsletters-required-field | 4 ++++
 .../jetpack/extensions/blocks/subscriptions/subscriptions.php | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/paid-newsletters-required-field

diff --git a/projects/plugins/jetpack/changelog/paid-newsletters-required-field b/projects/plugins/jetpack/changelog/paid-newsletters-required-field
new file mode 100644
index 0000000000000..53c214bf02cef
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/paid-newsletters-required-field
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+WPCOM Only: Make sure the email field in the subscribe block is required
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php
index 22cf962c4d93d..bba662cd18781 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php
@@ -496,6 +496,7 @@ class="screen-reader-text"
 					<?php
 					printf(
 						'<input
+							required="required"
 							type="email"
 							name="email"
 							%1$s

From 9f4f494e57d33130fa50244531f7fc3bfb303487 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nauris=20P=C5=AB=C4=B7is?= <hi@pyronaur.com>
Date: Wed, 22 Feb 2023 16:16:07 +0200
Subject: [PATCH 10/38] Jetpack Boost: Fix Undefined array key "post" (#29096)

* Fix undefined `post` warning

* Add changelog
---
 .../plugins/boost/app/lib/Environment_Change_Detector.php     | 2 +-
 .../plugins/boost/changelog/boost-fix-php-environment-warning | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 projects/plugins/boost/changelog/boost-fix-php-environment-warning

diff --git a/projects/plugins/boost/app/lib/Environment_Change_Detector.php b/projects/plugins/boost/app/lib/Environment_Change_Detector.php
index 8955b0e2fa639..fd8bd668fa55c 100644
--- a/projects/plugins/boost/app/lib/Environment_Change_Detector.php
+++ b/projects/plugins/boost/app/lib/Environment_Change_Detector.php
@@ -31,7 +31,7 @@ public function register_hooks() {
 
 	public function handle_post_change( $post_id, $post ) {
 		$post_types = get_post_types( array( 'name' => $post->post_type ), 'objects' );
-		if ( empty( $post_types ) || $post_types['post']->public !== true ) {
+		if ( empty( $post_types ) || ! isset( $post_types['post'] ) || $post_types['post']->public !== true ) {
 			return;
 		}
 
diff --git a/projects/plugins/boost/changelog/boost-fix-php-environment-warning b/projects/plugins/boost/changelog/boost-fix-php-environment-warning
new file mode 100644
index 0000000000000..78ef0d3552f9b
--- /dev/null
+++ b/projects/plugins/boost/changelog/boost-fix-php-environment-warning
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed Undefined array key "post" warning

From d46a69621c9e9eed45d5d531928c614573f58003 Mon Sep 17 00:00:00 2001
From: Brad Jorsch <anomiex@users.noreply.github.com>
Date: Wed, 22 Feb 2023 09:51:29 -0500
Subject: [PATCH 11/38] Update React peer deps to v18 (#28924)

When #28710 updated the React dependencies, our packages' peer
dependencies were overlooked. Update them too.
---
 .../js-packages/components/changelog/update-react-peer-deps | 4 ++++
 projects/js-packages/components/package.json                | 6 +++---
 .../js-packages/connection/changelog/update-react-peer-deps | 4 ++++
 projects/js-packages/connection/package.json                | 6 +++---
 projects/js-packages/idc/changelog/update-react-peer-deps   | 4 ++++
 projects/js-packages/idc/package.json                       | 6 +++---
 .../partner-coupon/changelog/update-react-peer-deps         | 4 ++++
 projects/js-packages/partner-coupon/package.json            | 6 +++---
 .../publicize-components/changelog/update-react-peer-deps   | 4 ++++
 projects/js-packages/publicize-components/package.json      | 2 +-
 10 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/update-react-peer-deps
 create mode 100644 projects/js-packages/connection/changelog/update-react-peer-deps
 create mode 100644 projects/js-packages/idc/changelog/update-react-peer-deps
 create mode 100644 projects/js-packages/partner-coupon/changelog/update-react-peer-deps
 create mode 100644 projects/js-packages/publicize-components/changelog/update-react-peer-deps

diff --git a/projects/js-packages/components/changelog/update-react-peer-deps b/projects/js-packages/components/changelog/update-react-peer-deps
new file mode 100644
index 0000000000000..dd7eb39fb4827
--- /dev/null
+++ b/projects/js-packages/components/changelog/update-react-peer-deps
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Update React peer dependencies to match updated dev dependencies.
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
index 17e4a6bcfba8f..6a34c43530e0a 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.27.7",
+	"version": "0.27.8-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -44,8 +44,8 @@
 		"webpack-cli": "4.9.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"type": "module",
 	"browserslist": [
diff --git a/projects/js-packages/connection/changelog/update-react-peer-deps b/projects/js-packages/connection/changelog/update-react-peer-deps
new file mode 100644
index 0000000000000..dd7eb39fb4827
--- /dev/null
+++ b/projects/js-packages/connection/changelog/update-react-peer-deps
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Update React peer dependencies to match updated dev dependencies.
diff --git a/projects/js-packages/connection/package.json b/projects/js-packages/connection/package.json
index 4f0bad9811a98..5660af5565436 100644
--- a/projects/js-packages/connection/package.json
+++ b/projects/js-packages/connection/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.25.1",
+	"version": "0.25.2-alpha",
 	"description": "Jetpack Connection Component",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -34,8 +34,8 @@
 		"react-test-renderer": "18.2.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"type": "module",
 	"exports": {
diff --git a/projects/js-packages/idc/changelog/update-react-peer-deps b/projects/js-packages/idc/changelog/update-react-peer-deps
new file mode 100644
index 0000000000000..dd7eb39fb4827
--- /dev/null
+++ b/projects/js-packages/idc/changelog/update-react-peer-deps
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Update React peer dependencies to match updated dev dependencies.
diff --git a/projects/js-packages/idc/package.json b/projects/js-packages/idc/package.json
index 56983eccd8f8b..42a6d2168f72e 100644
--- a/projects/js-packages/idc/package.json
+++ b/projects/js-packages/idc/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-idc",
-	"version": "0.10.34",
+	"version": "0.10.35-alpha",
 	"description": "Jetpack Connection Component",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -26,8 +26,8 @@
 		"react-test-renderer": "18.2.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"type": "module",
 	"exports": {
diff --git a/projects/js-packages/partner-coupon/changelog/update-react-peer-deps b/projects/js-packages/partner-coupon/changelog/update-react-peer-deps
new file mode 100644
index 0000000000000..dd7eb39fb4827
--- /dev/null
+++ b/projects/js-packages/partner-coupon/changelog/update-react-peer-deps
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Update React peer dependencies to match updated dev dependencies.
diff --git a/projects/js-packages/partner-coupon/package.json b/projects/js-packages/partner-coupon/package.json
index 7712557022321..e344a46661a4f 100644
--- a/projects/js-packages/partner-coupon/package.json
+++ b/projects/js-packages/partner-coupon/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-partner-coupon",
-	"version": "0.2.40",
+	"version": "0.2.41-alpha",
 	"description": "This package aims to add components to make it easier to redeem partner coupons",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/partner-coupon/#readme",
 	"bugs": {
@@ -36,8 +36,8 @@
 		"react-test-renderer": "18.2.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.2",
-		"react-dom": "17.0.2"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"dependencies": {
 		"@automattic/jetpack-components": "workspace:*",
diff --git a/projects/js-packages/publicize-components/changelog/update-react-peer-deps b/projects/js-packages/publicize-components/changelog/update-react-peer-deps
new file mode 100644
index 0000000000000..dd7eb39fb4827
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/update-react-peer-deps
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Update React peer dependencies to match updated dev dependencies.
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index e9ee8d9b9d811..d5274c6c4e302 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -68,6 +68,6 @@
 		".": "./index.js"
 	},
 	"peerDependencies": {
-		"react-dom": "17.0.2"
+		"react-dom": "^18.0.0"
 	}
 }

From 21d67f7b1e1892af7d5ad36f1abb2587b9e1ac71 Mon Sep 17 00:00:00 2001
From: Samiff <samiff@users.noreply.github.com>
Date: Wed, 22 Feb 2023 09:02:17 -0700
Subject: [PATCH 12/38] jetpack-mu-wpcom: updated checks for coming-soon
 (#28932)

* jetpack-mu-wpcom: updated checks for coming-soon

* Fixup project versions

* Try major version bump

* Fixup project versions

* More fixup project versions

* changelog
---
 .../update-jetpack-mu-wpcom-coming-soon-checks |  4 ++++
 .../packages/jetpack-mu-wpcom/package.json     |  2 +-
 .../src/class-jetpack-mu-wpcom.php             | 18 +++++++++++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/update-jetpack-mu-wpcom-coming-soon-checks

diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-jetpack-mu-wpcom-coming-soon-checks b/projects/packages/jetpack-mu-wpcom/changelog/update-jetpack-mu-wpcom-coming-soon-checks
new file mode 100644
index 0000000000000..0c12e8dc70caa
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/update-jetpack-mu-wpcom-coming-soon-checks
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated checks for loading the coming soon feature.
diff --git a/projects/packages/jetpack-mu-wpcom/package.json b/projects/packages/jetpack-mu-wpcom/package.json
index 80fc4d2c393b0..447a26265fc71 100644
--- a/projects/packages/jetpack-mu-wpcom/package.json
+++ b/projects/packages/jetpack-mu-wpcom/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-mu-wpcom",
-	"version": "0.2.2",
+	"version": "0.2.3-alpha",
 	"description": "Enhances your site with features powered by WordPress.com",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/jetpack-mu-wpcom/#readme",
 	"bugs": {
diff --git a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
index 6f1aa08e6f9f9..11814a3bdc0ee 100644
--- a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
+++ b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
@@ -14,7 +14,7 @@
  */
 class Jetpack_Mu_Wpcom {
 
-	const PACKAGE_VERSION = '0.2.2';
+	const PACKAGE_VERSION = '0.2.3-alpha';
 	const PKG_DIR         = __DIR__ . '/../';
 
 	/**
@@ -29,10 +29,9 @@ public static function init() {
 
 		// Shared code for src/features
 		require_once self::PKG_DIR . 'src/common/index.php'; // phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.NotAbsolutePath
-		// Todo: once coming-soon is removed from ETK, we can remove the has_action check.
-		if ( has_action( 'plugins_loaded', 'A8C\FSE\load_coming_soon' ) === false ) {
-			add_action( 'plugins_loaded', array( __CLASS__, 'load_coming_soon' ) );
-		}
+
+		// Coming Soon feature.
+		add_action( 'plugins_loaded', array( __CLASS__, 'load_coming_soon' ) );
 
 		/**
 		 * Runs right after the Jetpack_Mu_Wpcom package is initialized.
@@ -46,6 +45,15 @@ public static function init() {
 	 * Load the Coming Soon feature.
 	 */
 	public static function load_coming_soon() {
+		/**
+		 * On WoA sites, users may be using non-symlinked older versions of the FSE plugin.
+		 * If they are, check the active version to avoid redeclaration errors.
+		 */
+		$invalid_fse_version_active = is_plugin_active( 'full-site-editing/full-site-editing-plugin.php' ) && version_compare( get_plugin_data( WP_PLUGIN_DIR . '/full-site-editing/full-site-editing-plugin.php' )['Version'], '3.56084', '<' );
+		if ( $invalid_fse_version_active ) {
+			return;
+		}
+
 		if (
 			( defined( 'WPCOM_PUBLIC_COMING_SOON' ) && WPCOM_PUBLIC_COMING_SOON ) ||
 			apply_filters( 'a8c_enable_public_coming_soon', false )

From d4271af48d816669f4a97dbc92f397a021938bcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Wed, 22 Feb 2023 13:31:03 -0300
Subject: [PATCH 13/38] Jetpack: change how to register VideoPress video block
 (#29084)

* [not verified] tidy how register VideoPress video block

* [not verified] changelog

* [not verified] Update projects/plugins/jetpack/extensions/extended-blocks/videopress-video/videopress-video.php

Co-authored-by: Luiz Kowalski <lhkowalski@gmail.com>

* [not verified] Update projects/plugins/jetpack/extensions/extended-blocks/videopress-video/videopress-video.php

Co-authored-by: Luiz Kowalski <lhkowalski@gmail.com>

* align equals

---------

Co-authored-by: Luiz Kowalski <lhkowalski@gmail.com>
---
 .../changelog/update-vieopress-register-v6    |  4 +++
 .../videopress-video/videopress-video.php     | 31 +++++++++----------
 2 files changed, 18 insertions(+), 17 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/update-vieopress-register-v6

diff --git a/projects/plugins/jetpack/changelog/update-vieopress-register-v6 b/projects/plugins/jetpack/changelog/update-vieopress-register-v6
new file mode 100644
index 0000000000000..fa1ae3d0c225a
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-vieopress-register-v6
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Jetpack: tidy registering VideoPress video block
diff --git a/projects/plugins/jetpack/extensions/extended-blocks/videopress-video/videopress-video.php b/projects/plugins/jetpack/extensions/extended-blocks/videopress-video/videopress-video.php
index c63222f3e9e38..0c609d1e75e87 100644
--- a/projects/plugins/jetpack/extensions/extended-blocks/videopress-video/videopress-video.php
+++ b/projects/plugins/jetpack/extensions/extended-blocks/videopress-video/videopress-video.php
@@ -9,29 +9,26 @@
 
 use Automattic\Jetpack\VideoPress\Initializer as VideoPress_Pkg_Initializer;
 
+// Set the videopress/video block availability, depending on the site plan.
 add_action(
-	'init',
+	'jetpack_register_gutenberg_extensions',
 	function () {
-		$is_video_extension_available    = in_array( 'videopress/video', \Jetpack_Gutenberg::get_available_extensions(), true );
-		$is_chapters_extension_available = in_array( 'videopress/video-chapters', \Jetpack_Gutenberg::get_available_extensions(), true );
-
-		$is_some_extension_available = $is_video_extension_available || $is_chapters_extension_available;
-		$is_proxied                  = function_exists( 'wpcom_is_proxied_request' ) ? wpcom_is_proxied_request() : false;
-
-		if ( ! $is_some_extension_available && ! $is_proxied ) {
-			return;
-		}
-
-		if ( method_exists( 'Automattic\Jetpack\VideoPress\Initializer', 'register_videopress_video_block' ) ) {
-			VideoPress_Pkg_Initializer::register_videopress_video_block();
-		}
+		\Jetpack_Gutenberg::set_availability_for_plan( 'videopress/video' );
 	}
 );
 
-// Set the videopress/video block availability, depending on the site plan.
+// Register the videopress/video block.
 add_action(
-	'jetpack_register_gutenberg_extensions',
+	'init',
 	function () {
-		\Jetpack_Gutenberg::set_availability_for_plan( 'videopress/video' );
+		$availability                = \Jetpack_Gutenberg::get_availability();
+		$is_videopress_video_enabled = isset( $availability['videopress/video'] ) && $availability['videopress/video']['available'];
+
+		if (
+			$is_videopress_video_enabled &&
+			method_exists( 'Automattic\Jetpack\VideoPress\Initializer', 'register_videopress_video_block' )
+		) {
+			VideoPress_Pkg_Initializer::register_videopress_video_block();
+		}
 	}
 );

From c2058086171de7b9c5d8a60f53a6a216ac3db8cf Mon Sep 17 00:00:00 2001
From: Calypso Bot <sysops+ghmatticbot@automattic.com>
Date: Wed, 22 Feb 2023 18:17:18 +0100
Subject: [PATCH 14/38] Update Instant Search Dependency Updates (#28681)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 pnpm-lock.yaml                                | 26 +++++++++----------
 ...renovate-instant-search-dependency-updates |  4 +++
 projects/packages/search/package.json         |  6 ++---
 .../packages/search/src/class-package.php     |  2 +-
 ...renovate-instant-search-dependency-updates |  4 +++
 projects/packages/wordads/package.json        |  6 ++---
 .../packages/wordads/src/class-package.php    |  2 +-
 7 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 projects/packages/search/changelog/renovate-instant-search-dependency-updates
 create mode 100644 projects/packages/wordads/changelog/renovate-instant-search-dependency-updates

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24ea7d7c48ebd..8c109cd3a8651 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1781,8 +1781,8 @@ importers:
         specifier: 4.0.0
         version: 4.0.0
       preact:
-        specifier: 10.5.15
-        version: 10.5.15
+        specifier: 10.12.1
+        version: 10.12.1
       prop-types:
         specifier: 15.7.2
         version: 15.7.2
@@ -1845,8 +1845,8 @@ importers:
         specifier: 8.19.1
         version: 8.19.1
       '@testing-library/preact':
-        specifier: 3.2.2
-        version: 3.2.2(@testing-library/dom@8.19.1)(preact@10.5.15)
+        specifier: 3.2.3
+        version: 3.2.3(@testing-library/dom@8.19.1)(preact@10.12.1)
       '@testing-library/react':
         specifier: 13.4.0
         version: 13.4.0(@testing-library/dom@8.19.1)(react-dom@18.2.0)(react@18.2.0)
@@ -2138,8 +2138,8 @@ importers:
         specifier: 4.0.0
         version: 4.0.0
       preact:
-        specifier: 10.5.15
-        version: 10.5.15
+        specifier: 10.12.1
+        version: 10.12.1
       prop-types:
         specifier: 15.7.2
         version: 15.7.2
@@ -2202,8 +2202,8 @@ importers:
         specifier: 8.19.1
         version: 8.19.1
       '@testing-library/preact':
-        specifier: 3.2.2
-        version: 3.2.2(@testing-library/dom@8.19.1)(preact@10.5.15)
+        specifier: 3.2.3
+        version: 3.2.3(@testing-library/dom@8.19.1)(preact@10.12.1)
       '@testing-library/react':
         specifier: 13.4.0
         version: 13.4.0(@testing-library/dom@8.19.1)(react-dom@18.2.0)(react@18.2.0)
@@ -9326,15 +9326,15 @@ packages:
       redent: 3.0.0
     dev: true
 
-  /@testing-library/preact@3.2.2(@testing-library/dom@8.19.1)(preact@10.5.15):
-    resolution: {integrity: sha512-mMPEp/9TOOqf3QqDHY02ieGFfRbi8fAxZvRifn+vOzrdNcCR1zchwPA6BvqXG3wAweRan4QJioYgEc1cePeC3g==}
+  /@testing-library/preact@3.2.3(@testing-library/dom@8.19.1)(preact@10.12.1):
+    resolution: {integrity: sha512-y6Kklp1XK3f1X2fWCbujmJyzkf+1BgLYXNgAx21j9+D4CoqMTz5qC4SQufb1L6q/jxLGACzrQ90ewVOTBvHOfg==}
     engines: {node: '>= 12'}
     peerDependencies:
       '@testing-library/dom': ^8.11.1
       preact: '>=10 || ^10.0.0-alpha.0 || ^10.0.0-beta.0'
     dependencies:
       '@testing-library/dom': 8.19.1
-      preact: 10.5.15
+      preact: 10.12.1
     dev: true
 
   /@testing-library/react@13.4.0(@testing-library/dom@8.19.1)(react-dom@18.2.0)(react@18.2.0):
@@ -19637,8 +19637,8 @@ packages:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
     dev: false
 
-  /preact@10.5.15:
-    resolution: {integrity: sha512-5chK29n6QcJc3m1lVrKQSQ+V7K1Gb8HeQY6FViQ5AxCAEGu3DaHffWNDkC9+miZgsLvbvU9rxbV1qinGHMHzqA==}
+  /preact@10.12.1:
+    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
 
   /prelude-ls@1.1.2:
     resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
diff --git a/projects/packages/search/changelog/renovate-instant-search-dependency-updates b/projects/packages/search/changelog/renovate-instant-search-dependency-updates
new file mode 100644
index 0000000000000..c47cb18e82997
--- /dev/null
+++ b/projects/packages/search/changelog/renovate-instant-search-dependency-updates
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/search/package.json b/projects/packages/search/package.json
index 98f7b60c03f50..35adb2b89caef 100644
--- a/projects/packages/search/package.json
+++ b/projects/packages/search/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "jetpack-search",
-	"version": "0.33.0",
+	"version": "0.33.1-alpha",
 	"description": "Package for Jetpack Search products",
 	"main": "main.js",
 	"directories": {
@@ -55,7 +55,7 @@
 		"fast-json-stable-stringify": "2.1.0",
 		"lodash": "4.17.21",
 		"photon": "4.0.0",
-		"preact": "10.5.15",
+		"preact": "10.12.1",
 		"prop-types": "15.7.2",
 		"q-flat": "1.0.7",
 		"qss": "2.0.3",
@@ -78,7 +78,7 @@
 		"@babel/runtime": "7.20.13",
 		"@size-limit/preset-app": "6.0.4",
 		"@testing-library/dom": "8.19.1",
-		"@testing-library/preact": "3.2.2",
+		"@testing-library/preact": "3.2.3",
 		"@testing-library/react": "13.4.0",
 		"@wordpress/babel-plugin-import-jsx-pragma": "4.9.0",
 		"@wordpress/browserslist-config": "5.9.0",
diff --git a/projects/packages/search/src/class-package.php b/projects/packages/search/src/class-package.php
index 6ea37d1660275..04db0a1d5bcc2 100644
--- a/projects/packages/search/src/class-package.php
+++ b/projects/packages/search/src/class-package.php
@@ -11,7 +11,7 @@
  * Search package general information
  */
 class Package {
-	const VERSION = '0.33.0';
+	const VERSION = '0.33.1-alpha';
 	const SLUG    = 'search';
 
 	/**
diff --git a/projects/packages/wordads/changelog/renovate-instant-search-dependency-updates b/projects/packages/wordads/changelog/renovate-instant-search-dependency-updates
new file mode 100644
index 0000000000000..c47cb18e82997
--- /dev/null
+++ b/projects/packages/wordads/changelog/renovate-instant-search-dependency-updates
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/wordads/package.json b/projects/packages/wordads/package.json
index c78ad41a7bc21..d5cb6a61bf9e0 100644
--- a/projects/packages/wordads/package.json
+++ b/projects/packages/wordads/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-wordads",
-	"version": "0.2.32",
+	"version": "0.2.33-alpha",
 	"description": "Earn income by allowing Jetpack to display high quality ads.",
 	"main": "main.js",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/wordads/#readme",
@@ -46,7 +46,7 @@
 		"fast-json-stable-stringify": "2.1.0",
 		"lodash": "4.17.21",
 		"photon": "4.0.0",
-		"preact": "10.5.15",
+		"preact": "10.12.1",
 		"prop-types": "15.7.2",
 		"q-flat": "1.0.7",
 		"qss": "2.0.3",
@@ -69,7 +69,7 @@
 		"@babel/runtime": "7.20.13",
 		"@size-limit/preset-app": "6.0.4",
 		"@testing-library/dom": "8.19.1",
-		"@testing-library/preact": "3.2.2",
+		"@testing-library/preact": "3.2.3",
 		"@testing-library/react": "13.4.0",
 		"@wordpress/babel-plugin-import-jsx-pragma": "4.9.0",
 		"@wordpress/browserslist-config": "5.9.0",
diff --git a/projects/packages/wordads/src/class-package.php b/projects/packages/wordads/src/class-package.php
index 3542dd1b8787c..6101b214e4906 100644
--- a/projects/packages/wordads/src/class-package.php
+++ b/projects/packages/wordads/src/class-package.php
@@ -11,7 +11,7 @@
  * WordAds package general information
  */
 class Package {
-	const VERSION = '0.2.32';
+	const VERSION = '0.2.33-alpha';
 	const SLUG    = 'wordads';
 
 	/**

From 449136528d78ff7eaaff743c66e51005f461e349 Mon Sep 17 00:00:00 2001
From: Clemen <javacodia@gmail.com>
Date: Wed, 22 Feb 2023 17:47:03 +0000
Subject: [PATCH 15/38] CRM: PHP notice on woo order draft status (#29099)

* Add checkout-draft Woo order status to statuses map

* Add checkout-draft Woo order status to statuses map
---
 ...x-crm-php-notice-on-woo-order-draft-status |  4 +++
 .../woo-sync/includes/class-woo-sync.php      | 30 ++++++++++---------
 2 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 projects/plugins/crm/changelog/fix-crm-php-notice-on-woo-order-draft-status

diff --git a/projects/plugins/crm/changelog/fix-crm-php-notice-on-woo-order-draft-status b/projects/plugins/crm/changelog/fix-crm-php-notice-on-woo-order-draft-status
new file mode 100644
index 0000000000000..b1b8b6ad1f4ca
--- /dev/null
+++ b/projects/plugins/crm/changelog/fix-crm-php-notice-on-woo-order-draft-status
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+PHP notice when a WooCommerce order is in a Draft status
diff --git a/projects/plugins/crm/modules/woo-sync/includes/class-woo-sync.php b/projects/plugins/crm/modules/woo-sync/includes/class-woo-sync.php
index 1b8881aa57018..49a0c491b756c 100644
--- a/projects/plugins/crm/modules/woo-sync/includes/class-woo-sync.php
+++ b/projects/plugins/crm/modules/woo-sync/includes/class-woo-sync.php
@@ -228,13 +228,14 @@ public function get_settings() {
 	 */
 	public function get_woo_order_statuses() {
 		$woo_order_statuses = array(
-			'wcpending'    => __( 'Pending', 'zero-bs-crm' ),
-			'wcprocessing' => __( 'Processing', 'zero-bs-crm' ),
-			'wconhold'     => __( 'On hold', 'zero-bs-crm' ),
-			'wccompleted'  => __( 'Completed', 'zero-bs-crm' ),
-			'wccancelled'  => __( 'Cancelled', 'zero-bs-crm' ),
-			'wcrefunded'   => __( 'Refunded', 'zero-bs-crm' ),
-			'wcfailed'     => __( 'Failed', 'zero-bs-crm' ),
+			'wcpending'       => __( 'Pending', 'zero-bs-crm' ),
+			'wcprocessing'    => __( 'Processing', 'zero-bs-crm' ),
+			'wconhold'        => __( 'On hold', 'zero-bs-crm' ),
+			'wccompleted'     => __( 'Completed', 'zero-bs-crm' ),
+			'wccancelled'     => __( 'Cancelled', 'zero-bs-crm' ),
+			'wcrefunded'      => __( 'Refunded', 'zero-bs-crm' ),
+			'wcfailed'        => __( 'Failed', 'zero-bs-crm' ),
+			'wccheckoutdraft' => __( 'Draft', 'zero-bs-crm' ),
 		);
 		return apply_filters( 'zbs-woo-additional-status', $woo_order_statuses );
 	}
@@ -1531,13 +1532,14 @@ public function woo_order_status_mapping( $crm_type ) {
 		$setting_prefix = $this->get_woo_order_mapping_types()[ $crm_type ]['prefix'];
 
 		return array(
-			'completed'  => $setting_prefix . 'wccompleted',
-			'on-hold'    => $setting_prefix . 'wconhold',
-			'cancelled'  => $setting_prefix . 'wccancelled',
-			'processing' => $setting_prefix . 'wcprocessing',
-			'refunded'   => $setting_prefix . 'wcrefunded',
-			'failed'     => $setting_prefix . 'wcfailed',
-			'pending'    => $setting_prefix . 'wcpending',
+			'completed'      => $setting_prefix . 'wccompleted',
+			'on-hold'        => $setting_prefix . 'wconhold',
+			'cancelled'      => $setting_prefix . 'wccancelled',
+			'processing'     => $setting_prefix . 'wcprocessing',
+			'refunded'       => $setting_prefix . 'wcrefunded',
+			'failed'         => $setting_prefix . 'wcfailed',
+			'pending'        => $setting_prefix . 'wcpending',
+			'checkout-draft' => $setting_prefix . 'wccheckoutdraft',
 		);
 	}
 

From 0851103464b5b43886a7a5654a34a6bb321c3b74 Mon Sep 17 00:00:00 2001
From: Osk <oskosk@users.noreply.github.com>
Date: Wed, 22 Feb 2023 16:09:47 -0300
Subject: [PATCH 16/38] Related Posts: Add block suport for fontFamily controls
 (#29097)

---
 .../changelog/add-related-posts-block-font-family-support     | 4 ++++
 .../plugins/jetpack/extensions/blocks/related-posts/index.js  | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/add-related-posts-block-font-family-support

diff --git a/projects/plugins/jetpack/changelog/add-related-posts-block-font-family-support b/projects/plugins/jetpack/changelog/add-related-posts-block-font-family-support
new file mode 100644
index 0000000000000..4bdb870c4c6de
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-related-posts-block-font-family-support
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Add block support for font family in Related Posts block
diff --git a/projects/plugins/jetpack/extensions/blocks/related-posts/index.js b/projects/plugins/jetpack/extensions/blocks/related-posts/index.js
index c590e47117abe..e691eec5d50c4 100644
--- a/projects/plugins/jetpack/extensions/blocks/related-posts/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/related-posts/index.js
@@ -66,6 +66,7 @@ export const settings = {
 			padding: true,
 		},
 		typography: {
+			__experimentalFontFamily: true,
 			fontSize: true,
 			lineHeight: true,
 		},

From 68604d3e4012f92d3ccdb8245f9c851ca692727c Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Wed, 22 Feb 2023 11:23:43 -0800
Subject: [PATCH 17/38] Protect: Add existing plan/license key CTA (#27745)

* Initialize project branch

* Protect: Add WAF package (#27530)

* Protect: Clean up components (#27256)

* Protect: Add routing and blank Firewall page (#27245)

* Protect: Add Tabbed Navigation (#27259)

* Protect: Add "new" badge for users who have never viewed the Firewall tab (#27265)

* Protect: Add useWafData hook (#27307)

* Add: Protect WAF header (#27279)

* Add hook for interfacing with WAF data

* [not verified] Add firewall-header component folder structure

* [not verified] Apply header component code and styling

* [not verified] Remove unneeded comments

* [not verified] Update hasRequiredPlan check to useProtectData

* [not verified] Fix typo

* Add FirewallHeader component stories and improve portability

* Add useWafData hook placeholder for moduleIsEnabled check

* [not verified] Remove isModuleEnabled property in favor of currently available WAF data

* [not verified] Remove console logging

* [not verified] Add upgrade functionality to button

* [not verified] Add Popover component for upgrade info

* Fix styling issues

* Create ConnectedFirewallHeader component and move all logic out of FirewallPage

* Improve code efficiency

* Update FirewallHeader status check, and checkout flow redirect URL

* changelog

* [not verified] Remove changelog entry

* Change FirewallUrl to firewallUrl

Co-authored-by: Nate Weller <nate.weller@automattic.com>

* Protect: Add WAF footer (#27280)

* Add hook for interfacing with WAF data

* [not verified] Add firewall-header component folder structure

* [not verified] Apply header component code and styling

* [not verified] Remove unneeded comments

* [not verified] Update hasRequiredPlan check to useProtectData

* [not verified] Fix typo

* Add FirewallHeader component stories and improve portability

* Add useWafData hook placeholder for moduleIsEnabled check

* [not verified] Remove isModuleEnabled property in favor of currently available WAF data

* [not verified] Remove console logging

* [not verified] Add upgrade functionality to button

* [not verified] Add Popover component for upgrade info

* Introduce and apply FirewallFooter component

* Add central AdminSection component for better visualization

* Improve spacing

* [not verified] Apply initial run at StandaloneModeModal component

* [not verified] Update Footer component to ScanFooter

* [not verified] Improve StandaloneModeModal structure and styling

* [not verified] Add FirewallFooter stories

* [not verified] Update FirewallFooter to use SeventyFiveLayout

* [not verified] Update styling comments

* Fix styling issues

* Create ConnectedFirewallHeader component and move all logic out of FirewallPage

* Improve code efficiency

* Update FirewallHeader status check, and checkout flow redirect URL

* changelog

* [not verified] Remove changelog entry

* Change FirewallUrl to firewallUrl

* Fix styling issues

Co-authored-by: Nate Weller <nate.weller@automattic.com>

* Fix composer.json

* Changelog

* Protect: Add upgrade prompt while WAF enabled with no rules access (#27584)

* Add upgrade prompt when WAF enabled but no rules access

* Create separate internal component for upgrade prompt

* Add story for on with no plan

* WAF: Remove has_rules_access in favour of external checks (#27479)

* [not verified] Update WAF package to use portable Current_Plan over Jetpack_Plan for upgrade detection

* Add jetpack-plans dependency direct to the WAF package

* Add and use hasScan (over hasRulesAccess) check in Jetpack settings for the WAF module

* Remove hasRulesAccess property from WAF module component

* Remove has_rules_access method in favour of external plan checks

* Protect: Add Basic WAF Controls (#27291)

* Update Protect to version 1.2.0-alpha

* Protect: WAF share data toggle (#27577)

* [not verified] Add jetpack_waf_share_data option value to initial state, and use for checked value

* [not verified] Remove comments

* [not verified] Remove prior solution in favor of WAF endpoints solution and apply toggleShareData functionality to FirewallFooter checkbox

* [not verified] Improve share data toggle functionality

* [not verified] Improve code organization

* [not verified] Add isEnabled check for share data section display

* Remove wafShareData from initial state

Co-authored-by: Nate Weller <nate.weller@automattic.com>

* Changelogs

* Remove outdated TODO comment

* Protect: Add notices to the Firewall screen (#27621)

* Fix invalid HTML - pre cannot be a child of p

* Fix notice duration timeout

* Remove manual WAF initialization

* Register REST routes on WAF init

* Update WAF after settings have changed

* Update tracks events in Jetpack Protect (#27659)

* Initialize project branch

* Initialize project branch

* Add existing plan link to pricing page and fix registration redirect to check for plan when rendering the UI

* Initialize project branch

* Remove changelog entries

* Use addQueryArgs and getQueryArgs to check plan and redirect after successful user connection

* Update redirect handling after user connection to managed with PHP

* changelog

* Initial commit.

* Check for licenses and redirect users to the license activation page.

* Add changelogs and version bumps.

* Add changelog files.

* Adding filter to backup class

* changelog

* Fix constant naming

* Add Jetpack Complete plan ID's.

* Add the filter comment.

* Revert prior changes and update as per new standards

* Update filter callback format

* Revert changes to getProtectFree registration flow

* Add plan and status refresh to getProtectFree reg flow and update getStarted button to have a unique loading state

* Require jetpack-connection package

* Revert direct require of jetpack-connection package

* Add checkout flow to get started button to handle license check

* Provide plugins with a plugin slug to make sure we only verify licenses for the products we need.

* Fix license check based on the plugin slug.

* If an appropriate unattached license is found, check if the plugin already has a license activated on the site before redirecting them.

* Move the license check code from connection to licensing package.

* Update changelog files.

* Bump package version.

* Replace parse_url() with wp_parse_url().

* Update license check callback to include a plan check

* Update UI handling for the loading of various buttons

* Remove siteProductAvailabilityHandler arg in the existing checkout flow in favour of plan check in the filter callback

* Fix project versions

* Add missing product IDs, remove plan check from filter callback in favour of reattaching siteProductAvailabilityHandler to the checkout flow

---------

Co-authored-by: Nate Weller <nate.weller@automattic.com>
Co-authored-by: Sergey Mitroshin <sergeymitr@gmail.com>
Co-authored-by: bindlegirl <1242807+bindlegirl@users.noreply.github.com>
---
 .../changelog/add-protect-existing-plan-cta   |  4 ++
 projects/plugins/protect/composer.json        |  2 +-
 projects/plugins/protect/jetpack-protect.php  |  4 +-
 .../protect/src/class-jetpack-protect.php     | 49 +++++++++++++++++++
 .../src/js/components/admin-page/index.jsx    |  2 +-
 .../js/components/interstitial-page/index.jsx | 40 ++++++++++++---
 .../interstitial-page/styles.module.scss      | 12 +++++
 .../src/js/components/pricing-table/index.jsx | 38 ++++++++------
 8 files changed, 126 insertions(+), 25 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/add-protect-existing-plan-cta
 create mode 100644 projects/plugins/protect/src/js/components/interstitial-page/styles.module.scss

diff --git a/projects/plugins/protect/changelog/add-protect-existing-plan-cta b/projects/plugins/protect/changelog/add-protect-existing-plan-cta
new file mode 100644
index 0000000000000..db0eea854ebe3
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-existing-plan-cta
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Interstitial page link for getting started with an existing plan or license key
diff --git a/projects/plugins/protect/composer.json b/projects/plugins/protect/composer.json
index 7f9cea4fb4fca..e83949694eb2f 100644
--- a/projects/plugins/protect/composer.json
+++ b/projects/plugins/protect/composer.json
@@ -79,6 +79,6 @@
 			"automattic/jetpack-autoloader": true,
 			"automattic/jetpack-composer-plugin": true
 		},
-		"autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_protectⓥ1_3_1_alpha"
+		"autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_protectⓥ1_4_0_alpha"
 	}
 }
diff --git a/projects/plugins/protect/jetpack-protect.php b/projects/plugins/protect/jetpack-protect.php
index beeab97c9af4f..0354dedacc649 100644
--- a/projects/plugins/protect/jetpack-protect.php
+++ b/projects/plugins/protect/jetpack-protect.php
@@ -3,7 +3,7 @@
  * Plugin Name: Jetpack Protect
  * Plugin URI: https://wordpress.org/plugins/jetpack-protect
  * Description: Security tools that keep your site safe and sound, from posts to plugins.
- * Version: 1.3.1-alpha
+ * Version: 1.4.0-alpha
  * Author: Automattic - Jetpack Security team
  * Author URI: https://jetpack.com/protect/
  * License: GPLv2 or later
@@ -32,7 +32,7 @@
 	exit;
 }
 
-define( 'JETPACK_PROTECT_VERSION', '1.3.1-alpha' );
+define( 'JETPACK_PROTECT_VERSION', '1.4.0-alpha' );
 define( 'JETPACK_PROTECT_DIR', plugin_dir_path( __FILE__ ) );
 define( 'JETPACK_PROTECT_ROOT_FILE', __FILE__ );
 define( 'JETPACK_PROTECT_ROOT_FILE_RELATIVE_PATH', plugin_basename( __FILE__ ) );
diff --git a/projects/plugins/protect/src/class-jetpack-protect.php b/projects/plugins/protect/src/class-jetpack-protect.php
index 051d008681bdc..a7a3a44e154af 100644
--- a/projects/plugins/protect/src/class-jetpack-protect.php
+++ b/projects/plugins/protect/src/class-jetpack-protect.php
@@ -33,6 +33,27 @@
  */
 class Jetpack_Protect {
 
+	/**
+	 * Licenses product ID.
+	 *
+	 * @var string
+	 */
+	const JETPACK_SCAN_PRODUCT_IDS          = array(
+		2010, // JETPACK_SECURITY_DAILY.
+		2011, // JETPACK_SECURITY_DAILY_MOTNHLY.
+		2012, // JETPACK_SECURITY_REALTIME.
+		2013, // JETPACK_SECURITY_REALTIME_MONTHLY.
+		2014, // JETPACK_COMPLETE.
+		2015, // JETPACK_COMPLETE_MONTHLY.
+		2016, // JETPACK_SECURITY_TIER_1_YEARLY.
+		2017, // JETPACK_SECURITY_TIER_1_MONTHLY.
+		2019, // JETPACK_SECURITY_TIER_2_YEARLY.
+		2020, // JETPACK_SECURITY_TIER_2_MONTHLY.
+		2106, // JETPACK_SCAN.
+		2107, // JETPACK_SCAN_MONTHLY.
+		2108, // JETPACK_SCAN_REALTIME.
+		2109, // JETPACK_SCAN_REALTIME_MONTHLY.
+	);
 	const JETPACK_WAF_MODULE_SLUG           = 'waf';
 	const JETPACK_PROTECT_ACTIVATION_OPTION = JETPACK_PROTECT_SLUG . '_activated';
 
@@ -92,6 +113,8 @@ function () {
 			1
 		);
 
+		add_filter( 'jetpack_connection_user_has_license', array( $this, 'jetpack_check_user_licenses' ), 10, 3 );
+
 		add_filter( 'jetpack_get_available_standalone_modules', array( $this, 'protect_filter_available_modules' ), 10, 1 );
 	}
 
@@ -305,6 +328,32 @@ public function protect_filter_available_modules( $modules ) {
 		return array_merge( array( self::JETPACK_WAF_MODULE_SLUG ), $modules );
 	}
 
+	/**
+	 * Check for user licenses.
+	 *
+	 * @param  boolean $has_license Check if user has a license.
+	 * @param  object  $licenses List of licenses.
+	 * @param string  $plugin_slug The plugin that initiated the flow.
+	 *
+	 * @return boolean
+	 */
+	public static function jetpack_check_user_licenses( $has_license, $licenses, $plugin_slug ) {
+		if ( $plugin_slug !== JETPACK_PROTECT_SLUG || $has_license ) {
+			return $has_license;
+		}
+
+		$license_found = false;
+
+		foreach ( $licenses as $license ) {
+			if ( in_array( $license->product_id, self::JETPACK_SCAN_PRODUCT_IDS, true ) ) {
+				$license_found = true;
+				break;
+			}
+		}
+
+		return $license_found;
+	}
+
 	/**
 	 * Get WAF "Seen" Status
 	 *
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index f71696d817285..b551c122f716d 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -46,7 +46,7 @@ const AdminPage = ( { children } ) => {
 	 * - Checkout workflow has started
 	 */
 	if ( ! isRegistered || hasCheckoutStarted ) {
-		return <InterstitialPage onScanAdd={ run } scanJustAdded={ hasCheckoutStarted } />;
+		return <InterstitialPage onScanAdd={ run } />;
 	}
 
 	return (
diff --git a/projects/plugins/protect/src/js/components/interstitial-page/index.jsx b/projects/plugins/protect/src/js/components/interstitial-page/index.jsx
index 3e803ce28c651..143ac653e5307 100644
--- a/projects/plugins/protect/src/js/components/interstitial-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/interstitial-page/index.jsx
@@ -3,33 +3,61 @@ import {
 	AdminSectionHero,
 	Col,
 	Container,
+	Text,
+	Button,
 } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import Logo from '../logo';
 import ConnectedPricingTable from '../pricing-table';
+import styles from './styles.module.scss';
 
 /**
- * Intersitial Page
+ * Interstitial Page
  *
  * @param {object} props                 - Component props
  * @param {Function} props.onScanAdd     - Callback when adding paid protect product successfully
- * @param {Function} props.scanJustAdded - Callback when adding paid protect product was recently added
  * @returns {React.Component}              Interstitial react component.
  */
-const InterstitialPage = ( { onScanAdd, scanJustAdded } ) => {
+const InterstitialPage = ( { onScanAdd } ) => {
+	const [ getStartedButtonIsLoading, setGetStartedButtonIsLoading ] = useState( false );
+
+	const getStarted = useCallback( () => {
+		setGetStartedButtonIsLoading( true );
+		onScanAdd();
+	}, [ onScanAdd ] );
+
 	// Track view for Protect WAF page.
 	useAnalyticsTracks( {
 		pageViewEventName: 'protect_interstitial',
 	} );
 
 	return (
-		<JetpackAdminPage moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) } header={ <Logo /> }>
+		<JetpackAdminPage
+			moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) }
+			header={
+				<div className={ styles[ 'protect-header' ] }>
+					<Logo />
+					<Text>
+						{ __( 'Already have an existing plan or license key? ', 'jetpack-protect' ) }
+						<Button
+							className={ styles[ 'get-started-button' ] }
+							variant={ 'link' }
+							weight={ 'regular' }
+							onClick={ getStarted }
+							isLoading={ getStartedButtonIsLoading }
+						>
+							{ __( 'Click here to get started', 'jetpack-protect' ) }
+						</Button>
+					</Text>
+				</div>
+			}
+		>
 			<AdminSectionHero>
 				<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
 					<Col sm={ 4 } md={ 8 } lg={ 12 }>
-						<ConnectedPricingTable onScanAdd={ onScanAdd } scanJustAdded={ scanJustAdded } />
+						<ConnectedPricingTable onScanAdd={ onScanAdd } />
 					</Col>
 				</Container>
 			</AdminSectionHero>
diff --git a/projects/plugins/protect/src/js/components/interstitial-page/styles.module.scss b/projects/plugins/protect/src/js/components/interstitial-page/styles.module.scss
new file mode 100644
index 0000000000000..c8afc9eeabe03
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/interstitial-page/styles.module.scss
@@ -0,0 +1,12 @@
+.protect-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+    flex-wrap: wrap;
+}
+
+.get-started-button {
+	&:focus:not(:disabled) {
+		box-shadow: none;
+	}
+}
diff --git a/projects/plugins/protect/src/js/components/pricing-table/index.jsx b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
index 0ffc9b5a4ac5c..31c93e7cd677c 100644
--- a/projects/plugins/protect/src/js/components/pricing-table/index.jsx
+++ b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
@@ -10,26 +10,30 @@ import {
 	PricingTableItem,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import React, { useCallback, useState } from 'react';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
+import { STORE_ID } from '../../state/store';
 
 /**
  * Product Detail component.
  *
  * @param {object} props                 - Component props
  * @param {Function} props.onScanAdd     - Callback when adding paid protect product successfully
- * @param {Function} props.scanJustAdded - Callback when adding paid protect product was recently added
  * @returns {object}                ConnectedPricingTable react component.
  */
-const ConnectedPricingTable = ( { onScanAdd, scanJustAdded } ) => {
+const ConnectedPricingTable = ( { onScanAdd } ) => {
 	const { handleRegisterSite, registrationError } = useConnection( {
 		skipUserConnection: true,
 	} );
 
-	const [ protectFreeIsRegistering, setProtectFreeIsRegistering ] = useState( false );
+	const { refreshPlan, refreshStatus } = useDispatch( STORE_ID );
+
+	const [ getProtectFreeButtonIsLoading, setGetProtectFreeButtonIsLoading ] = useState( false );
+	const [ getScanButtonIsLoading, setGetScanButtonIsLoading ] = useState( false );
 
 	// Access paid protect product data
 	const { jetpackScan } = useProtectData();
@@ -45,18 +49,22 @@ const ConnectedPricingTable = ( { onScanAdd, scanJustAdded } ) => {
 
 	// Track free and paid click events
 	const { recordEvent, recordEventHandler } = useAnalyticsTracks();
-	const getScan = recordEventHandler(
-		'jetpack_protect_pricing_table_get_scan_link_click',
-		onScanAdd
-	);
+	const getScan = recordEventHandler( 'jetpack_protect_pricing_table_get_scan_link_click', () => {
+		setGetScanButtonIsLoading( true );
+		onScanAdd();
+	} );
 
 	const getProtectFree = useCallback( () => {
 		recordEvent( 'jetpack_protect_connected_product_activated' );
-		setProtectFreeIsRegistering( true );
+		setGetProtectFreeButtonIsLoading( true );
 		handleRegisterSite()
-			.then( () => setProtectFreeIsRegistering( false ) )
-			.then( refreshWaf );
-	}, [ handleRegisterSite, recordEvent, refreshWaf ] );
+			.then( () => setGetProtectFreeButtonIsLoading( false ) )
+			.then( () => {
+				refreshPlan();
+				refreshWaf();
+				refreshStatus( true );
+			} );
+	}, [ handleRegisterSite, recordEvent, refreshWaf, refreshPlan, refreshStatus ] );
 
 	const args = {
 		title: __( 'Stay one step ahead of threats', 'jetpack-protect' ),
@@ -97,8 +105,8 @@ const ConnectedPricingTable = ( { onScanAdd, scanJustAdded } ) => {
 						<Button
 							fullWidth
 							onClick={ getScan }
-							isLoading={ scanJustAdded }
-							disabled={ protectFreeIsRegistering || scanJustAdded }
+							isLoading={ getScanButtonIsLoading }
+							disabled={ getProtectFreeButtonIsLoading || getScanButtonIsLoading }
 						>
 							{ __( 'Get Jetpack Protect', 'jetpack-protect' ) }
 						</Button>
@@ -128,8 +136,8 @@ const ConnectedPricingTable = ( { onScanAdd, scanJustAdded } ) => {
 							fullWidth
 							variant="secondary"
 							onClick={ getProtectFree }
-							isLoading={ protectFreeIsRegistering }
-							disabled={ protectFreeIsRegistering || scanJustAdded }
+							isLoading={ getProtectFreeButtonIsLoading }
+							disabled={ getProtectFreeButtonIsLoading || getScanButtonIsLoading }
 							error={
 								registrationError
 									? __( 'An error occurred. Please try again.', 'jetpack-protect' )

From 79e814f11ec5a19dd801f511c03a2848ffccc22d Mon Sep 17 00:00:00 2001
From: Fernando Fernandes <fernandofernand3s@gmail.com>
Date: Wed, 22 Feb 2023 17:11:53 -0300
Subject: [PATCH 18/38] Jetpack Social: add mastodon restrictions (#29034)

* Add Mastodon restrictions and a global default

The default restrictions is being used whenever there's no restriction set for such service in `restrictions.js`. As it was the case when testing this when `mastodon` was available in `enabledConnections`.

Added some tests for such scenario as well.

* Add changelog
* Update package version
---
 ...e-jetpack-social-add-mastodon-restrictions |  4 ++
 .../src/hooks/use-media-restrictions/index.js | 33 ++++++-----
 .../use-media-restrictions/restrictions.js    | 33 +++++++++++
 .../use-media-restrictions/test/index.test.js | 55 ++++++++++++++++++-
 4 files changed, 109 insertions(+), 16 deletions(-)
 create mode 100644 projects/js-packages/publicize-components/changelog/update-jetpack-social-add-mastodon-restrictions

diff --git a/projects/js-packages/publicize-components/changelog/update-jetpack-social-add-mastodon-restrictions b/projects/js-packages/publicize-components/changelog/update-jetpack-social-add-mastodon-restrictions
new file mode 100644
index 0000000000000..aba8c33b09058
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/update-jetpack-social-add-mastodon-restrictions
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Jetpack Social: Add Mastodon and default media upload restrictions
diff --git a/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/index.js b/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/index.js
index d6aee66af9f09..6d8feffd43e4d 100644
--- a/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/index.js
+++ b/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/index.js
@@ -1,14 +1,10 @@
 import { useCallback, useMemo } from 'react';
-import { RESTRICTIONS } from './restrictions';
+import { DEFAULT_RESTRICTIONS, RESTRICTIONS, GLOBAL_MAX_SIZE } from './restrictions';
 
 export const FILE_TYPE_ERROR = 'FILE_TYPE_ERROR';
 export const FILE_SIZE_ERROR = 'FILE_SIZE_ERROR';
 export const VIDEO_LENGTH_TOO_LONG_ERROR = 'VIDEO_LENGTH_TOO_LONG_ERROR';
 export const VIDEO_LENGTH_TOO_SHORT_ERROR = 'VIDEO_LENGTH_TOO_SHORT_ERROR';
-
-// Global max size: 100 GB;
-const GLOBAL_MAX_SIZE = 100000;
-
 /**
  * Checks whether a media is a video.
  *
@@ -31,13 +27,12 @@ const reduceVideoLimits = ( prev, current ) => ( {
 
 const getVideoLimits = enabledConnections =>
 	enabledConnections
-		.map( connection => RESTRICTIONS[ connection.service_name ].video )
-		.reduce( reduceVideoLimits, {
-			minSize: 0,
-			maxSize: GLOBAL_MAX_SIZE,
-			maxLength: GLOBAL_MAX_SIZE,
-			minLength: 0,
-		} );
+		.map( connection =>
+			RESTRICTIONS[ connection.service_name ]
+				? RESTRICTIONS[ connection.service_name ].video
+				: DEFAULT_RESTRICTIONS.video
+		)
+		.reduce( reduceVideoLimits );
 
 /**
  * Returns the currently allowed media types
@@ -46,12 +41,16 @@ const getVideoLimits = enabledConnections =>
  * @returns {Array} Array of allowed types
  */
 export const getAllowedMediaTypes = enabledConnections => {
-	const typeArrays = enabledConnections.map(
-		connection => RESTRICTIONS[ connection.service_name ].allowedMediaTypes
+	const typeArrays = enabledConnections.map( connection =>
+		RESTRICTIONS[ connection.service_name ]
+			? RESTRICTIONS[ connection.service_name ].allowedMediaTypes
+			: DEFAULT_RESTRICTIONS.allowedMediaTypes
 	);
+
 	if ( typeArrays.length === 0 ) {
 		return [];
 	}
+
 	return typeArrays.reduce( ( a, b ) => a.filter( c => b.includes( c ) ) ); // Intersection
 };
 
@@ -63,7 +62,11 @@ export const getAllowedMediaTypes = enabledConnections => {
  */
 export default function useMediaRestrictions( enabledConnections ) {
 	const maxImageSize = Math.min(
-		...enabledConnections.map( connection => RESTRICTIONS[ connection.service_name ].image.maxSize )
+		...enabledConnections.map( connection =>
+			RESTRICTIONS[ connection.service_name ]
+				? RESTRICTIONS[ connection.service_name ].image.maxSize
+				: DEFAULT_RESTRICTIONS.image.maxSize
+		)
 	);
 
 	const [ videoLimits, allowedMediaTypes ] = useMemo(
diff --git a/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/restrictions.js b/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/restrictions.js
index be75d28a96b9c..1949bdff3db1f 100644
--- a/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/restrictions.js
+++ b/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/restrictions.js
@@ -46,6 +46,30 @@ const facebookVideoTypes = [
 	'video/vob',
 	'video/wmv',
 ];
+const mastodonImageTypes = allowedImageTypes.concat( [
+	'image/gif',
+	'image/heic',
+	'image/heif',
+	'image/webp',
+	'image/avif',
+] );
+const mastodonVideoTypes = [ 'video/webm', 'video/quicktime', 'video/ogg' ];
+
+// Global max size: 100 GB;
+export const GLOBAL_MAX_SIZE = 100000;
+
+export const DEFAULT_RESTRICTIONS = {
+	allowedMediaTypes: allowedImageTypes.concat( [ MP4, VIDEOPRESS, MOV ] ),
+	image: {
+		maxSize: 4,
+	},
+	video: {
+		minLength: 0,
+		minSize: 0,
+		maxSize: GLOBAL_MAX_SIZE,
+		maxLength: GLOBAL_MAX_SIZE,
+	},
+};
 
 export const RESTRICTIONS = {
 	twitter: {
@@ -90,4 +114,13 @@ export const RESTRICTIONS = {
 			minLength: 3,
 		},
 	},
+	mastodon: {
+		allowedMediaTypes: mastodonImageTypes.concat( [ ...mastodonVideoTypes, MP4, VIDEOPRESS ] ),
+		image: {
+			maxSize: 10,
+		},
+		video: {
+			maxSize: 40,
+		},
+	},
 };
diff --git a/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/test/index.test.js b/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/test/index.test.js
index e021ee4a63876..c4e293c0af760 100644
--- a/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/test/index.test.js
+++ b/projects/js-packages/publicize-components/src/hooks/use-media-restrictions/test/index.test.js
@@ -20,8 +20,13 @@ const DUMMY_CONNECTIONS = [
 	{
 		service_name: 'linkedin',
 	},
+	{
+		service_name: 'mastodon',
+	},
 ];
 
+const UNKNOWN_CONNECTION = [ { service_name: 'unknown' } ];
+
 const INVALID_TYPES = [ 'imagejpg', 'image/tgif', 'video/mp5', '', null ];
 const INVALID_LENGTH_VIDEOS = [
 	{ mime: 'video/mp4', fileSize: 1000000, length: 2 }, // Too short video
@@ -60,6 +65,54 @@ describe( 'useMediaRestrictions hook', () => {
 		expect( linkedinMaxImageSize ).toBe( 20 );
 	} );
 
+	test( 'Returns default video limits for unknown service', () => {
+		const { result } = renderHook( connections => useMediaRestrictions( connections ), {
+			initialProps: UNKNOWN_CONNECTION,
+		} );
+
+		const defaultVideoLimits = result.current.videoLimits;
+
+		expect( defaultVideoLimits ).toStrictEqual( {
+			minLength: 0,
+			minSize: 0,
+			maxSize: 100000,
+			maxLength: 100000,
+		} );
+	} );
+
+	test( 'Returns correct video limits when a service and an unknown service are defined', () => {
+		const { result } = renderHook( connections => useMediaRestrictions( connections ), {
+			initialProps: UNKNOWN_CONNECTION.concat( [ { service_name: 'linkedin' } ] ),
+		} );
+
+		const defaultVideoLimits = result.current.videoLimits;
+
+		expect( defaultVideoLimits ).toStrictEqual( {
+			minSize: 0.075,
+			maxSize: 200,
+			maxLength: 600,
+			minLength: 3,
+		} );
+	} );
+
+	test( 'Returns default maxImageSize for unknown service', () => {
+		const { result } = renderHook( connections => useMediaRestrictions( connections ), {
+			initialProps: UNKNOWN_CONNECTION,
+		} );
+
+		const defaultMaxImageSize = result.current.maxImageSize;
+		expect( defaultMaxImageSize ).toBe( 4 );
+	} );
+
+	test( 'Returns correct maxImageSize when a service and an unknown service are defined', () => {
+		const { result } = renderHook( connections => useMediaRestrictions( connections ), {
+			initialProps: UNKNOWN_CONNECTION.concat( [ { service_name: 'linkedin' } ] ),
+		} );
+
+		const defaultMaxImageSize = result.current.maxImageSize;
+		expect( defaultMaxImageSize ).toBe( 4 );
+	} );
+
 	test( 'Video limits are calculated correctly', () => {
 		const { result, rerender } = renderHook( connections => useMediaRestrictions( connections ), {
 			initialProps: DUMMY_CONNECTIONS,
@@ -72,7 +125,7 @@ describe( 'useMediaRestrictions hook', () => {
 
 		expect( defaultVideoLimits ).toStrictEqual( {
 			maxLength: 140,
-			maxSize: 200,
+			maxSize: 40,
 			minLength: 3,
 			minSize: 0.075,
 		} );

From 391038a67765eacffd5c1747e3b59962e19ee709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Wed, 22 Feb 2023 18:28:56 -0300
Subject: [PATCH 19/38] VideoPress: add player-bridge. Update player loading
 state (#29057)

* [not verified] do not load current bridge

* [not verified] Player bridge: listening events

* [not verified] build player-bridge

* [not verified] expose player bridge URL

* [not verified] listen player loading state. Update local state

* [not verified] changelog

* [not verified] fix versions

* fix changelog typo

---------

Co-authored-by: Douglas Henri <dhasilva@users.noreply.github.com>
---
 .../update-videopress-add-player-bridge       |  4 ++
 projects/packages/videopress/package.json     |  2 +-
 .../src/class-block-editor-extensions.php     |  1 +
 .../videopress/src/class-package-version.php  |  2 +-
 .../components/videopress-player/index.js     | 32 +++++-----
 .../src/client/block-editor/global.d.ts       |  1 +
 .../src/client/lib/player-bridge/Readme.md    |  3 +
 .../src/client/lib/player-bridge/index.ts     | 60 +++++++++++++++++++
 .../packages/videopress/webpack.config.js     |  2 +
 9 files changed, 90 insertions(+), 17 deletions(-)
 create mode 100644 projects/packages/videopress/changelog/update-videopress-add-player-bridge
 create mode 100644 projects/packages/videopress/src/client/lib/player-bridge/Readme.md
 create mode 100644 projects/packages/videopress/src/client/lib/player-bridge/index.ts

diff --git a/projects/packages/videopress/changelog/update-videopress-add-player-bridge b/projects/packages/videopress/changelog/update-videopress-add-player-bridge
new file mode 100644
index 0000000000000..31c23ed8706a7
--- /dev/null
+++ b/projects/packages/videopress/changelog/update-videopress-add-player-bridge
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+VideoPress: add player-bridge. Update player loading state
diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json
index 580838b696c48..ffcfc7de2a2e3 100644
--- a/projects/packages/videopress/package.json
+++ b/projects/packages/videopress/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-videopress",
-	"version": "0.10.12",
+	"version": "0.10.13-alpha",
 	"description": "VideoPress package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/videopress/#readme",
 	"bugs": {
diff --git a/projects/packages/videopress/src/class-block-editor-extensions.php b/projects/packages/videopress/src/class-block-editor-extensions.php
index 3d66a5cc9c041..4f1adb671199a 100644
--- a/projects/packages/videopress/src/class-block-editor-extensions.php
+++ b/projects/packages/videopress/src/class-block-editor-extensions.php
@@ -160,6 +160,7 @@ public static function enqueue_extensions() {
 			'isVideoPressModuleActive'    => Status::is_jetpack_plugin_and_videopress_module_active(),
 			'isStandaloneActive'          => Status::is_standalone_plugin_active(),
 			'imagesURLBase'               => plugin_dir_url( __DIR__ ) . 'build/images/',
+			'playerBridgeUrl'             => plugins_url( '../build/lib/player-bridge.js', __FILE__ ),
 		);
 
 		// Expose initital state of site connection
diff --git a/projects/packages/videopress/src/class-package-version.php b/projects/packages/videopress/src/class-package-version.php
index 7d2ee31135bac..9c2b068283081 100644
--- a/projects/packages/videopress/src/class-package-version.php
+++ b/projects/packages/videopress/src/class-package-version.php
@@ -11,7 +11,7 @@
  * The Package_Version class.
  */
 class Package_Version {
-	const PACKAGE_VERSION = '0.10.12';
+	const PACKAGE_VERSION = '0.10.13-alpha';
 
 	const PACKAGE_SLUG = 'videopress';
 
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js
index f0f9f7e0a1119..35674411e3e37 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js
@@ -6,10 +6,6 @@ import { ResizableBox, SandBox } from '@wordpress/components';
 import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
-/**
- * Internal dependencies
- */
-import vpBlockBridge from '../../scripts/vp-block-bridge';
 
 // Global scripts array to be run in the Sandbox context.
 const globalScripts = [];
@@ -34,12 +30,13 @@ if ( window.videopressAjax ) {
 	);
 }
 
+if ( window?.videoPressEditorState?.playerBridgeUrl ) {
+	globalScripts.push( window.videoPressEditorState.playerBridgeUrl );
+}
+
 // Define a debug instance for block bridge.
 window.debugBridgeInstance = debugFactory( 'jetpack:vp-block:bridge' );
 
-// Load VideoPressBlock bridge script.
-globalScripts.push( vpBlockBridge );
-
 /**
  * VideoPlayer react component
  *
@@ -140,24 +137,29 @@ export default function VideoPressPlayer( {
 
 	/*
 	 * Callback state handler for the video player
-	 * tied to the `onVideoPressLoadingState` event,
+	 * tied to the `message` event,
 	 * provided by the videopress player through the bridge.
 	 */
-	const onVideoLoadingStateHandler = useCallback( ( { detail } ) => {
-		setIsVideoPlayerLoaded( detail?.state === 'loaded' );
+	const onVideoLoadingStateHandler = useCallback( ev => {
+		const eventName = ev?.data?.event;
+		if ( ! eventName || eventName !== 'videopress_loading_state' ) {
+			return;
+		}
+
+		const playerLoadingState = ev?.data?.state;
+		setIsVideoPlayerLoaded( playerLoadingState === 'loaded' );
 	}, [] );
 
-	// Listen to the `onVideoPressLoadingState` event.
+	// Listen to the `message` event.
 	useEffect( () => {
 		if ( ! window ) {
 			return;
 		}
 
-		window.addEventListener( 'onVideoPressLoadingState', onVideoLoadingStateHandler );
+		window.addEventListener( 'message', onVideoLoadingStateHandler );
 
-		return () =>
-			window?.removeEventListener( 'onVideoPressLoadingState', onVideoLoadingStateHandler );
-	}, [ onVideoLoadingStateHandler, window, html ] );
+		return () => window?.removeEventListener( 'message', onVideoLoadingStateHandler );
+	}, [ onVideoLoadingStateHandler ] );
 
 	useEffect( () => {
 		if ( isRequestingEmbedPreview ) {
diff --git a/projects/packages/videopress/src/client/block-editor/global.d.ts b/projects/packages/videopress/src/client/block-editor/global.d.ts
index bb50c96c52f82..fa419008983c2 100644
--- a/projects/packages/videopress/src/client/block-editor/global.d.ts
+++ b/projects/packages/videopress/src/client/block-editor/global.d.ts
@@ -12,6 +12,7 @@ declare global {
 			isStandaloneActive: '' | '1';
 			jetpackVideoPressSettingUrl: string;
 			imagesURLBase: string;
+			playerBridgeUrl: string;
 		};
 
 		JP_CONNECTION_INITIAL_STATE: {
diff --git a/projects/packages/videopress/src/client/lib/player-bridge/Readme.md b/projects/packages/videopress/src/client/lib/player-bridge/Readme.md
new file mode 100644
index 0000000000000..8ab661f4dfd93
--- /dev/null
+++ b/projects/packages/videopress/src/client/lib/player-bridge/Readme.md
@@ -0,0 +1,3 @@
+# Player Bridge
+
+Bridge to communicate player with the block editor.
\ No newline at end of file
diff --git a/projects/packages/videopress/src/client/lib/player-bridge/index.ts b/projects/packages/videopress/src/client/lib/player-bridge/index.ts
new file mode 100644
index 0000000000000..f3e173b3cb021
--- /dev/null
+++ b/projects/packages/videopress/src/client/lib/player-bridge/index.ts
@@ -0,0 +1,60 @@
+/**
+ * Types
+ */
+import type { VideoGUID } from '../../block-editor/blocks/video/types';
+
+type Origin = 'https://videopress.com' | 'https://video.wordpress.com';
+
+const VIDEOPRESS_ALLOWED_LISTENING_EVENTS = [
+	'videopress_playing',
+	'videopress_pause',
+	'videopress_seeking',
+	'videopress_resize',
+	'videopress_volumechange',
+	'videopress_ended',
+	'videopress_timeupdate',
+	'videopress_durationchange',
+	'videopress_progress',
+	'videopress_loading_state',
+	'videopress_toggle_fullscreen',
+] as const;
+
+type PlayerBrigeEventProps = {
+	event: typeof VIDEOPRESS_ALLOWED_LISTENING_EVENTS[ number ];
+	id: VideoGUID;
+	origin: Origin;
+};
+
+/**
+ * Function handler to dialog between
+ * the client (player) and the app (editor)
+ *
+ * @param {object} event - The event object
+ */
+export async function playerBridgeHandler(
+	event: MessageEvent< PlayerBrigeEventProps >
+): Promise< void > {
+	const { data = { event: null } } = event || {};
+	const { event: eventName } = data;
+
+	// Propagate only allowed events.
+	if ( ! VIDEOPRESS_ALLOWED_LISTENING_EVENTS.includes( eventName ) ) {
+		return;
+	}
+
+	// Propagate only allowed origins.
+	const allowed_origins: Array< Origin > = [
+		'https://videopress.com',
+		'https://video.wordpress.com',
+	];
+
+	if ( -1 === allowed_origins.indexOf( event.origin as Origin ) ) {
+		return;
+	}
+
+	window.top.postMessage( event.data, '*' );
+}
+
+( function () {
+	window.addEventListener( 'message', playerBridgeHandler );
+} )();
diff --git a/projects/packages/videopress/webpack.config.js b/projects/packages/videopress/webpack.config.js
index 1919f4b3cfebd..683bce8bf5c3d 100644
--- a/projects/packages/videopress/webpack.config.js
+++ b/projects/packages/videopress/webpack.config.js
@@ -10,6 +10,8 @@ module.exports = [
 			'block-editor/blocks/video/view': './src/client/block-editor/blocks/video/view.ts',
 
 			'lib/token-bridge': './src/client/lib/token-bridge/index.ts',
+			'lib/player-bridge': './src/client/lib/player-bridge/index.ts',
+
 			'lib/videopress-token-bridge': './src/client/lib/videopress-token-bridge.js',
 
 			// VideoPress dashboard page

From 5584a646be2d9e9f17d6231178e8e871b757716a Mon Sep 17 00:00:00 2001
From: gogdzl <37049295+gogdzl@users.noreply.github.com>
Date: Wed, 22 Feb 2023 20:13:04 -0300
Subject: [PATCH 20/38] CRM: Client Portal's menu has a dark gray background in
 the Twenty Seventeen theme (#29052)

* Fix wrong background in twenty seventeen theme

* changelog
---
 .../crm/changelog/crm-client-portal-grey-menu-in-2017-theme   | 4 ++++
 projects/plugins/crm/sass/_ZeroBSCRM.ThemeCompat.scss         | 1 -
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 projects/plugins/crm/changelog/crm-client-portal-grey-menu-in-2017-theme

diff --git a/projects/plugins/crm/changelog/crm-client-portal-grey-menu-in-2017-theme b/projects/plugins/crm/changelog/crm-client-portal-grey-menu-in-2017-theme
new file mode 100644
index 0000000000000..b3284aed8622a
--- /dev/null
+++ b/projects/plugins/crm/changelog/crm-client-portal-grey-menu-in-2017-theme
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+In Client Portal, the background for the menu in the Twenty Seventeen theme is no longer dark gray
diff --git a/projects/plugins/crm/sass/_ZeroBSCRM.ThemeCompat.scss b/projects/plugins/crm/sass/_ZeroBSCRM.ThemeCompat.scss
index 0e432bf8fee02..bee79622fe916 100644
--- a/projects/plugins/crm/sass/_ZeroBSCRM.ThemeCompat.scss
+++ b/projects/plugins/crm/sass/_ZeroBSCRM.ThemeCompat.scss
@@ -31,7 +31,6 @@
   }
 
   #zbs-nav-tabs {
-    background: #22272d !important;
     li a i.fa {
       margin-right: 0.6em;
     }

From ca8ee68a4b724adbc018e2f2969fa1dac514f770 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Kallehauge?=
 <3846700+kallehauge@users.noreply.github.com>
Date: Thu, 23 Feb 2023 00:43:06 +0100
Subject: [PATCH 21/38] CRM: Remove assumption that conditional avatar input
 exists (#29086)

* CRM: Add defensive code for edit contact profile picture fields

We have to do this because executing the logic on null values causes a breaking error that causes the next code not to function.

* changelog
---
 .../fix-crm-assume-conditional-avatar-input-exist    |  4 ++++
 projects/plugins/crm/js/ZeroBSCRM.admin.editview.js  | 12 +++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 projects/plugins/crm/changelog/fix-crm-assume-conditional-avatar-input-exist

diff --git a/projects/plugins/crm/changelog/fix-crm-assume-conditional-avatar-input-exist b/projects/plugins/crm/changelog/fix-crm-assume-conditional-avatar-input-exist
new file mode 100644
index 0000000000000..2ada8c91473dc
--- /dev/null
+++ b/projects/plugins/crm/changelog/fix-crm-assume-conditional-avatar-input-exist
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Contact Edit: prevent JS error when custom avatars are not enabled
diff --git a/projects/plugins/crm/js/ZeroBSCRM.admin.editview.js b/projects/plugins/crm/js/ZeroBSCRM.admin.editview.js
index 7f4a2682467f7..735bc4a263976 100644
--- a/projects/plugins/crm/js/ZeroBSCRM.admin.editview.js
+++ b/projects/plugins/crm/js/ZeroBSCRM.admin.editview.js
@@ -167,10 +167,16 @@ function zeroBSCRMJS_hideNotificationsAfter() {
  */
 function zeroBSCRMJS_editContactInit() {
 	var picture_file_input = document.getElementById( 'zbsc_profile-picture-file' );
-	picture_file_input.addEventListener( 'change', jpcrm_customer_profile_picture_on_change );
+
+	if ( picture_file_input ) {
+		picture_file_input.addEventListener( 'change', jpcrm_customer_profile_picture_on_change );
+	}
 
 	var picture_file_remove_btn = document.getElementById( 'zbsc_remove-profile-picture-button' );
-	picture_file_remove_btn.addEventListener( 'click', jpcrm_customer_remove_profile_picture );
+
+	if ( picture_file_remove_btn ) {
+		picture_file_remove_btn.addEventListener( 'click', jpcrm_customer_remove_profile_picture );
+	}
 
 	jQuery( '.send-sms-none' ).on( 'click', function ( e ) {
 		swal(
@@ -493,7 +499,7 @@ function zeroBSCRMJS_events_bindCompanyLinkIf() {
 
 
 if ( typeof module !== 'undefined' ) {
-    module.exports = { zbscrmjs_events_setContact, zbscrmjs_events_setCompany, zbscrmjs_events_changeContact, 
+    module.exports = { zbscrmjs_events_setContact, zbscrmjs_events_setCompany, zbscrmjs_events_changeContact,
 		zbscrmjs_events_changeCompany, zeroBSCRMJS_initEditView, zeroBSCRMJS_preLeaveEditView, zeroBSCRMJS_editViewLang,
 		zeroBSCRMJS_drawEditView, zeroBSCRMJS_editViewBinds, zeroBSCRMJS_hideNotificationsAfter,
 		zeroBSCRMJS_editContactInit, jpcrm_customer_profile_picture_on_change, jpcrm_customer_remove_profile_picture,

From 6ce2504ce505ef1ff1a4e8cfd848af906bb4910c Mon Sep 17 00:00:00 2001
From: Vishnu Gopal <533+vishnugopal@users.noreply.github.com>
Date: Thu, 23 Feb 2023 10:05:46 +0530
Subject: [PATCH 22/38] Fix viewer lists for List User API (#29068)

---
 .../jetpack/changelog/fix-users-include-viewer    |  4 ++++
 .../class.wpcom-json-api-list-users-endpoint.php  | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/fix-users-include-viewer

diff --git a/projects/plugins/jetpack/changelog/fix-users-include-viewer b/projects/plugins/jetpack/changelog/fix-users-include-viewer
new file mode 100644
index 0000000000000..ae1ba2e721374
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-users-include-viewer
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Fix a bug in list user endpoint when include_viewers is true
diff --git a/projects/plugins/jetpack/json-endpoints/class.wpcom-json-api-list-users-endpoint.php b/projects/plugins/jetpack/json-endpoints/class.wpcom-json-api-list-users-endpoint.php
index d0eadbd256607..b091e17d1ea2d 100644
--- a/projects/plugins/jetpack/json-endpoints/class.wpcom-json-api-list-users-endpoint.php
+++ b/projects/plugins/jetpack/json-endpoints/class.wpcom-json-api-list-users-endpoint.php
@@ -33,7 +33,7 @@
 				'post_count'   => 'Order by number of posts published.',
 			),
 			'authors_only'    => '(bool) Set to true to fetch authors only',
-			'include_viewers' => '(bool) Set to true to include viewers for Simple sites',
+			'include_viewers' => '(bool) Set to true to include viewers for Simple sites. When you pass in this parameter, order, order_by and search_columns are ignored. Currently, `search` is limited to the first page of results.',
 			'type'            => "(string) Specify the post type to query authors for. Only works when combined with the `authors_only` flag. Defaults to 'post'. Post types besides post and page need to be whitelisted using the <code>rest_api_allowed_post_types</code> filter.",
 			'search'          => '(string) Find matching users.',
 			'search_columns'  => "(array) Specify which columns to check for matching users. Can be any of 'ID', 'user_login', 'user_email', 'user_url', 'user_nicename', and 'display_name'. Only works when combined with `search` parameter.",
@@ -192,8 +192,17 @@ function ( $viewer ) use ( $args ) {
 		foreach ( array_keys( $this->response_format ) as $key ) {
 			switch ( $key ) {
 				case 'found':
-					$user_count     = (int) $user_query->get_total();
-					$viewer_count   = $include_viewers ? count( $viewers ) : 0;
+					$user_count = (int) $user_query->get_total();
+
+					$viewer_count = 0;
+					if ( $include_viewers ) {
+						if ( empty( $args['search'] ) ) {
+							$viewer_count = (int) get_count_private_blog_users( $blog_id );
+						} else {
+							$viewer_count = count( $viewers );
+						}
+					}
+
 					$return[ $key ] = $user_count + $viewer_count;
 					break;
 				case 'users':

From 551ffab90f19f39d82b1cdc217a2a603ae102118 Mon Sep 17 00:00:00 2001
From: Kevin L <40267301+a8ck3n@users.noreply.github.com>
Date: Thu, 23 Feb 2023 15:58:31 +0800
Subject: [PATCH 23/38] Odyssey Stats: Add new upgrade nudge to old stats page
 (#28828)

---
 .../changelog/odyssey-stats-new-upgrade-nudge |   4 +
 projects/plugins/jetpack/modules/stats.php    | 274 +++++++++++++++++-
 2 files changed, 275 insertions(+), 3 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/odyssey-stats-new-upgrade-nudge

diff --git a/projects/plugins/jetpack/changelog/odyssey-stats-new-upgrade-nudge b/projects/plugins/jetpack/changelog/odyssey-stats-new-upgrade-nudge
new file mode 100644
index 0000000000000..f8f698ec0c935
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/odyssey-stats-new-upgrade-nudge
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add an upgrade nudge for Odyssey Stats
diff --git a/projects/plugins/jetpack/modules/stats.php b/projects/plugins/jetpack/modules/stats.php
index 0178b402d3083..8b84ffc357589 100644
--- a/projects/plugins/jetpack/modules/stats.php
+++ b/projects/plugins/jetpack/modules/stats.php
@@ -22,7 +22,9 @@
 use Automattic\Jetpack\Stats\Options as Stats_Options;
 use Automattic\Jetpack\Stats\Tracking_Pixel as Stats_Tracking_Pixel;
 use Automattic\Jetpack\Stats\XMLRPC_Provider as Stats_XMLRPC;
-use Automattic\Jetpack\Stats_Admin\Dashboard as StatsDashboard;
+use Automattic\Jetpack\Stats_Admin\Dashboard as Stats_Dashboard;
+use Automattic\Jetpack\Stats_Admin\Main as Stats_Main;
+use Automattic\Jetpack\Stats_Admin\Notices as Stats_Notices;
 use Automattic\Jetpack\Status\Host;
 use Automattic\Jetpack\Tracking;
 
@@ -32,6 +34,12 @@
 
 define( 'STATS_DASHBOARD_SERVER', 'dashboard.wordpress.com' );
 
+/**
+ * Stats content marker.
+ * Used to test for content vs script when parsing server-generated HTML.
+ */
+const STATS_CONTENT_MARKER = '<div class="gotonewdash">';
+
 add_action( 'jetpack_modules_loaded', 'stats_load' );
 
 /**
@@ -284,6 +292,13 @@ function stats_admin_menu() {
 		}
 	}
 
+	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+	if ( ! ( new Host() )->is_woa_site() && isset( $_GET['enable_new_stats'] ) && '1' === $_GET['enable_new_stats'] ) {
+		// Passing true enables Odyssey Stats.
+		// We're ignorning the return value for now.
+		Stats_Main::update_new_stats_status( true );
+	}
+
 	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
 	if ( ( new Host() )->is_woa_site() || ! Stats_Options::get_option( 'enable_odyssey_stats' ) || isset( $_GET['noheader'] ) ) {
 		// Show old Jetpack Stats interface for:
@@ -294,7 +309,7 @@ function stats_admin_menu() {
 		add_action( "load-$hook", 'stats_reports_load' );
 	} else {
 		// Enable the new Odyssey Stats experience.
-		$stats_dashboard = new StatsDashboard();
+		$stats_dashboard = new Stats_Dashboard();
 		$hook            = add_submenu_page( 'jetpack', __( 'Stats', 'jetpack' ), __( 'Stats', 'jetpack' ), 'view_stats', 'stats', array( $stats_dashboard, 'render' ) );
 		add_action( "load-$hook", array( $stats_dashboard, 'admin_init' ) );
 	}
@@ -339,9 +354,43 @@ function stats_reports_load() {
 	} elseif ( ! isset( $_GET['noheader'] ) && empty( $_GET['nojs'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 		// Normal page load.  Load page content via JS.
 		add_action( 'admin_print_footer_scripts', 'stats_js_load_page_via_ajax' );
+		add_action( 'admin_print_footer_scripts', 'stats_script_dismiss_nudge_handler' );
 	}
 }
 
+/**
+ * JavaScript to dismiss the Odyssey nudge.
+ *
+ * @access public
+ * @return void
+ */
+function stats_script_dismiss_nudge_handler() {
+	?>
+	<script type="text/javascript">
+	function stats_odyssey_dismiss_nudge() {
+		// Hide the nudge UI, effectively dismissing it.
+		var element = document.getElementById( "stats-odyssey-nudge-main" );
+		element.classList.toggle( "is-hidden" );
+		// Send an AJAX request.
+		// Note we can provide a 'postponed_for' parameter to set the delay.
+		// Without a parameter it defaults to 30 days which is what we want here.
+		let nonce = <?php echo wp_json_encode( wp_create_nonce( 'wp_rest' ) ); ?>;
+		let url = <?php echo wp_json_encode( rest_url( '/jetpack/v4/stats-app/stats/notices' ) ); ?>;
+		let data = {
+			id: 'opt_in_new_stats',
+			status: 'postponed',
+		};
+		jQuery.ajax({
+			type: "POST",
+			url: url,
+			data: data,
+			headers: { "x-wp-nonce": nonce },
+		});
+	}
+	</script>
+	<?php
+}
+
 /**
  * Stats Reports CSS.
  *
@@ -428,6 +477,9 @@ function jetpack_admin_ui_stats_report_page_wrapper() {
  * @param bool $main_chart_only (default: false) Main Chart Only.
  */
 function stats_reports_page( $main_chart_only = false ) {
+	// TODO: Replace or remove "View stats on WordPress.com right now" link.
+	// Probably makes more sense to advertise Odyssey here.
+	// TODO: Remove DIV with debug tools. (currently hidden for easier testing)
 
 	if ( isset( $_GET['dashboard'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 		return stats_dashboard_widget_content();
@@ -575,7 +627,15 @@ function stats_reports_page( $main_chart_only = false ) {
 		$body = stats_convert_chart_urls( $body );
 		$body = stats_convert_image_urls( $body );
 		$body = stats_convert_admin_urls( $body );
-		echo $body; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+
+		// The response can contain either the content to display OR
+		// the scripts for the chart UI. The following calls inspect the
+		// response, insert the Odyssey nudge as needed, and make sure
+		// everything is output correctly.
+		stats_print_header_section( $body );
+		stats_print_odyssey_nudge( $body );
+		stats_print_content_section( $body );
+		stats_print_chart_scripts( $body );
 	}
 
 	if ( isset( $_GET['page'] ) && 'stats' === $_GET['page'] && ! isset( $_GET['chart'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
@@ -588,6 +648,214 @@ function stats_reports_page( $main_chart_only = false ) {
 	}
 }
 
+/**
+ * Legacy Stats: Print Header Section
+ *
+ * @access public
+ * @param mixed $html HTML.
+ * @return void
+ */
+function stats_print_header_section( $html ) {
+	$header = stats_parse_header_section( $html );
+	if ( $header !== '' ) {
+		echo $header; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+	}
+}
+
+/**
+ * Legacy Stats: Print Content Section
+ *
+ * @access public
+ * @param mixed $html HTML.
+ * @return void
+ */
+function stats_print_content_section( $html ) {
+	$content = stats_parse_content_section( $html );
+	if ( $content !== '' ) {
+		echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+	}
+}
+
+/**
+ * Legacy Stats: Print Chart Scripts
+ *
+ * @access public
+ * @param mixed $html HTML.
+ * @return void
+ */
+function stats_print_chart_scripts( $html ) {
+	if ( is_chart_scripts( $html ) ) {
+		echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+	}
+}
+
+/**
+ * Legacy Stats: Test for presence of chart scripts
+ *
+ * @access public
+ * @param mixed $html Input HTML that may or may not include the chart scripts.
+ * @return bool
+ */
+function is_chart_scripts( $html ) {
+	$pos = strpos( $html, STATS_CONTENT_MARKER );
+	return $pos === false;
+}
+
+/**
+ * Legacy Stats: Parse Header Section
+ *
+ * Returns the section of the content up to and including the date header.
+ *
+ * @access public
+ * @param mixed $html HTML.
+ * @return string
+ */
+function stats_parse_header_section( $html ) {
+	$head = strstr( $html, STATS_CONTENT_MARKER, true );
+	// Enforce a string result instead of string|false.
+	if ( $head === false ) {
+		return '';
+	}
+	return $head;
+}
+
+/**
+ * Legacy Stats: Print Content Section
+ *
+ * Returns the section of the content excluding the date header.
+ *
+ * @access public
+ * @param mixed $html HTML.
+ * @return string
+ */
+function stats_parse_content_section( $html ) {
+	// TODO: Skip past gotonewdash DIV.
+	// Doesn't make sense to push users to Calypso once Odyssey is ready.
+	$body = strstr( $html, STATS_CONTENT_MARKER );
+	// Enforce a string result instead of string|false.
+	if ( $body === false ) {
+		return '';
+	}
+	return $body;
+}
+
+/**
+ * Legacy Stats: Determine if we need to show the Odyssey upgrade nudge.
+ *
+ * @access public
+ * @return boolean
+ */
+function stats_should_show_odyssey_nudge() {
+	$stats_notices = ( new Stats_Notices() )->get_notices_to_show();
+	return isset( $stats_notices[ Stats_Notices::OPT_IN_NEW_STATS_NOTICE_ID ] )
+		&& $stats_notices[ Stats_Notices::OPT_IN_NEW_STATS_NOTICE_ID ];
+}
+
+/**
+ * Legacy Stats: Print the Odyssey upgrade nudge.
+ *
+ * @access public
+ * @param mixed $html HTML.
+ * @return void
+ */
+function stats_print_odyssey_nudge( $html ) {
+	if ( ! stats_should_show_odyssey_nudge() ) {
+		return;
+	}
+	$pos = strpos( $html, STATS_CONTENT_MARKER );
+	if ( $pos === false ) {
+		return;
+	}
+	$learn_url    = Redirect::get_url( 'jetpack-stats-learn-more' );
+	$redirect_url = admin_url( 'admin.php?page=stats&enable_new_stats=1' );
+	?>
+	<style>
+		.stats-odyssey-nudge {
+			display: flex;
+			align-items: flex-start;
+			font-size: var( --font-body );
+
+			border: 1px solid var( --jp-gray-5 );
+			border-radius: 4px;
+			border-color: var( --jp-black );
+			border-left-width: 6px;
+			padding: 24px 31px 27px 18px;
+
+			margin-top: 24px;
+		}
+		.stats-odyssey-nudge--content {
+			flex-grow: 1;
+		}
+		.stats-odyssey-nudge--title {
+			font-weight: 600;
+			margin-bottom: 8px;
+		}
+		.stats-odyssey-nudge--close-button {
+			position: absolute;
+			top: 1rem;
+			right: 1rem;
+			background-color: transparent;
+			border: none;
+			cursor: pointer;
+		}
+		.stats-odyssey-nudge--action-bar {
+			display: flex;
+			align-items: center;
+			margin-top: 20px;
+		}
+		.stats-odyssey-nudge--primary-button {
+			margin-right: 18px;
+			padding-left: 20px;
+			padding-right: 20px;
+			font-size: 16px;
+			border-color: black;
+			background-color: black;
+		}
+		.stats-odyssey-nudge--primary-button:hover {
+			border-color: #3c434a;
+			background-color: #3c434a;
+		}
+		.is-primary-link {
+			color: white;
+			text-decoration: none;
+		}
+		.is-primary-link:active {
+			color: white;
+		}
+		.is-primary-link:focus {
+			color: white;
+			box-shadow: none;
+			outline: none;
+		}
+		.is-primary-link:hover {
+			color: white;
+		}
+		.is-secondary-link {
+			color: black;
+		}
+		.is-secondary-link:hover {
+			color: black;
+		}
+		.is-hidden {
+			display: none;
+		}
+	</style>
+	<div id="stats-odyssey-nudge-main" class="stats-odyssey-nudge dops-card">
+		<div class="stats-odyssey-nudge--content">
+			<div class="stats-odyssey-nudge--title"><?php esc_html_e( 'Explore the new Jetpack Stats', 'jetpack' ); ?></div>
+			<?php esc_html_e( "We've added new stats and insights in a more modern and mobile friendly experience to help you grow your site.", 'jetpack' ); ?>
+			<div class="stats-odyssey-nudge--action-bar">
+				<button class="dops-button stats-odyssey-nudge--primary-button">
+					<a class="is-primary-link" href="<?php echo esc_url( $redirect_url ); ?>"><?php esc_html_e( 'Switch to new Stats', 'jetpack' ); ?></a>
+				</button>
+				<a class="is-secondary-link" href="<?php echo esc_url( $learn_url ); ?>" rel="noopener noreferrer" target="_blank"><?php esc_html_e( 'Learn about Stats', 'jetpack' ); ?> <svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><path d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"></path></svg></a>
+			</div>
+		</div>
+		<button class="stats-odyssey-nudge--close-button" onclick="stats_odyssey_dismiss_nudge()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
+	</div>
+	<?php
+}
+
 /**
  * Stats Convert Admin Urls.
  *

From 75dc0e09840f7961568bdc4dce1376070d09ff87 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 23 Feb 2023 09:56:54 +0100
Subject: [PATCH 24/38] Sharing: fix display of icon-only display option
 (#29090)

---
 projects/plugins/jetpack/changelog/fix-sharing-icon-margin | 4 ++++
 projects/plugins/jetpack/modules/sharedaddy/sharing.css    | 6 ++++++
 2 files changed, 10 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/fix-sharing-icon-margin

diff --git a/projects/plugins/jetpack/changelog/fix-sharing-icon-margin b/projects/plugins/jetpack/changelog/fix-sharing-icon-margin
new file mode 100644
index 0000000000000..d5e866bdf6652
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-sharing-icon-margin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Sharing: fix display issues when choosing the Icon-only option.
diff --git a/projects/plugins/jetpack/modules/sharedaddy/sharing.css b/projects/plugins/jetpack/modules/sharedaddy/sharing.css
index 306811670b377..3cbbab100aebc 100644
--- a/projects/plugins/jetpack/modules/sharedaddy/sharing.css
+++ b/projects/plugins/jetpack/modules/sharedaddy/sharing.css
@@ -128,6 +128,12 @@ body.highlander-dark h3.sd-title:before {
 	margin-left: 6px;
 }
 
+/* Icon Only */
+.sd-social-icon .sd-content ul li a.sd-button>span {
+	margin-left: 0;
+}
+
+/* Text Only */
 .sd-social-text .sd-content ul li a.sd-button span {
 	margin-left: 3px;
 }

From da40feddf6cf85ab445389a51f2408e2f42c4d0d Mon Sep 17 00:00:00 2001
From: Piotr Stankowski <6437642+trakos@users.noreply.github.com>
Date: Thu, 23 Feb 2023 11:15:54 +0100
Subject: [PATCH 25/38] Jetpack Search: fix CSS for wc products (#29110)

This change fixes CSS classes for WooCommerce product results.
---
 projects/packages/search/changelog/fix-search-products-css    | 4 ++++
 .../src/instant-search/components/search-result-product.jsx   | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 projects/packages/search/changelog/fix-search-products-css

diff --git a/projects/packages/search/changelog/fix-search-products-css b/projects/packages/search/changelog/fix-search-products-css
new file mode 100644
index 0000000000000..5271a3c7ab636
--- /dev/null
+++ b/projects/packages/search/changelog/fix-search-products-css
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix CSS for products in search results
diff --git a/projects/packages/search/src/instant-search/components/search-result-product.jsx b/projects/packages/search/src/instant-search/components/search-result-product.jsx
index 6a9281f4e4502..2eab2f2fe604c 100644
--- a/projects/packages/search/src/instant-search/components/search-result-product.jsx
+++ b/projects/packages/search/src/instant-search/components/search-result-product.jsx
@@ -56,7 +56,7 @@ class SearchResultProduct extends Component {
 					getCategories()
 						.map( cat => 'jetpack-instant-search__search-result-category--' + cleanForSlug( cat ) )
 						.join( ' ' ),
-				].join( '' ) }
+				].join( ' ' ) }
 			>
 				<a
 					className="jetpack-instant-search__search-result-product-img-link"

From 84906ae7e7a5c464b3eb797b3cab9946b4063839 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Thu, 23 Feb 2023 09:02:39 -0300
Subject: [PATCH 26/38] VideoPress: removed deprecated wp-block-bridge lib
 (#29107)

* remove deprecated vp-block-bridge script

* changelog
---
 ...deopress-remove-deprecated-vp-block-bridge |   4 +
 .../video/scripts/vp-block-bridge/Readme.md   | 137 ------------------
 .../video/scripts/vp-block-bridge/index.js    | 136 -----------------
 3 files changed, 4 insertions(+), 273 deletions(-)
 create mode 100644 projects/packages/videopress/changelog/update-videopress-remove-deprecated-vp-block-bridge
 delete mode 100644 projects/packages/videopress/src/client/block-editor/blocks/video/scripts/vp-block-bridge/Readme.md
 delete mode 100644 projects/packages/videopress/src/client/block-editor/blocks/video/scripts/vp-block-bridge/index.js

diff --git a/projects/packages/videopress/changelog/update-videopress-remove-deprecated-vp-block-bridge b/projects/packages/videopress/changelog/update-videopress-remove-deprecated-vp-block-bridge
new file mode 100644
index 0000000000000..a89cea490f4db
--- /dev/null
+++ b/projects/packages/videopress/changelog/update-videopress-remove-deprecated-vp-block-bridge
@@ -0,0 +1,4 @@
+Significance: patch
+Type: removed
+
+VideoPress: removed deprecated wp-block-bridge lib
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/scripts/vp-block-bridge/Readme.md b/projects/packages/videopress/src/client/block-editor/blocks/video/scripts/vp-block-bridge/Readme.md
deleted file mode 100644
index bd80ea01c3f07..0000000000000
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/scripts/vp-block-bridge/Readme.md
+++ /dev/null
@@ -1,137 +0,0 @@
-# VideoPress Block bridge
-
-This library essentially provides a way to connect events and methods defined by the Video Press player API from/to the VideoPress block.
-
-## Background
-
-### How the player is rendered
-
-From the PoV of the edit component of the VPBlock, the first step to implement the player is getting the raw HTML code provided by the VideoPress server via the `getEmbedPreview()` embed core-data selector.
-It's HTML code that basically defines an iFrame element with relevant attributes about the video.
-
-```jsx
-const preview = useSelect(
-	select => select( coreStore ).getEmbedPreview( videoPressUrl ),
-	[ videoPressUrl ]
-);
-
-const { html } = preview;
-```
-
-Once the code gets, it's rendered via creating a Sandbox instance where the code to process is defined via the `html` property mentioned above:
-
-```jsx
-<Sandbox html={ html } />
-```
-
-The most relevant thing to raise up here is the fact the video player is rendered into two nested iFrames levels. The <Sandbox /> component does one, and the other is provided by the VideoPress player API.
-
-### Connect the block with the player
-
-The VideoPress player API triggers events to its `window` object and its `window parent` object when they are different to communicate the video with the consumer, in our case, the VideoPress block.
-
-However, it doesn't connect with the `top` object reference meaning that if the player is nested via iFrames in more than two levels, it won't be possible to connect with the player from the higher level.
-
-Funnily, it happens in the our scenario of the block editor: It renders the raw HTML provided by VideoPress (which is an iFrame) via the Sandbox (which uses an iFrame too), producing the structure of the following elements:
-
-```html
-<div class="wp-block wp-block-jetpack-videopress">
-	<iframe class="components-sandbox">
-		#document
-			// ...
-			<iframe src"<videopress-embed-url>">
-				#document
-					//...
-					<video src="<video-source>" />
-			</iframe>
-	</iframe>
-</div>
-```
-
-### The Bridge
-
-This bridge script listens and re-emits the events, communicating the VideoPress player with the VideoPress Block. It's sent to the child iFrame through the `scripts` property of the Sandbox component, which takes over to run it in that context.
-
-```jsx
-import { SandBox } from '@wordpress/components';
-import vpBlockBridge from './scripts/vp-block-bridge';
-
-<Sandbox html={ videoPlayerHtml } scritps=[ vpBlockBridge ] />
-```
-
-## Bridge API
-
-```jsx
-import vpBlockBridge from './scripts/vp-block-bridge';
-
-function VPBlockEdit() {
-	useEffect( () => {
-		window.addEventListener( 'onVideoPressPlaying', event => {
-			console.log( 'video is playing...' );
-		} );
-	}, [] );
-
-	return (
-		<Sandbox html={ embedHtml } scritps={ [ vpBlockBridge ] } />
-	);
-}
-```
-
-### Events
-
-The bridge triggers the following custom events:
-
-#### onVideoPressPlaying
-
-#### onVideoPressPause
-
-#### onVideoPressSeeking
-
-#### onVideoPressResize
-
-#### onVideoPressVolumeChange
-
-#### onVideoPressEnded
-
-#### onVideoPressTimeUpdate
-
-#### onVideoPressDurationChange
-
-#### onVideoPressProgress
-
-#### onVideoPressLoadingState
-
-### Actions
-
-#### vpBlockActionPlay
-
-#### vpBlockActionPause
-
-#### vpBlockActionPause
-
-### Actions
-
-```es6
-// Pause the video after ten seconds.
-setTimeout( () => {
-	iFrameDom?.contentWindow?.postMessage( {
-		event: 'vpBlockActionPause',
-	} );
-}, 10000 );
-```
-
-#### vpBlockActionPlay
-
-#### vpBlockActionPause
-
-#### vpBlockActionSetCurrentTim
-
-## Debug
-
-To debug the bridge actions you'd like to create a debug instance stored in the `debugBridgeInstance` window property:
-
-```es6
-import debugFactory from 'debug';
-
-window.debugBridgeInstance = debugFactory( 'jetpack:vp-block:bridge' );
-```
\ No newline at end of file
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/scripts/vp-block-bridge/index.js b/projects/packages/videopress/src/client/block-editor/blocks/video/scripts/vp-block-bridge/index.js
deleted file mode 100644
index 1911503557d77..0000000000000
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/scripts/vp-block-bridge/index.js
+++ /dev/null
@@ -1,136 +0,0 @@
-const rawScript = `
-	if ( ! window?.debug ) {
-		window.debug = window.parent?.debugBridgeInstance ?? ( () => {} );
-	}
-
-	function initWPBlockBridge() {
-		debug( '🌉 🛠 building the bridge' );
-
-		const videoPressIFrame = document.querySelector('iframe');
-		if ( ! videoPressIFrame?.contentWindow ) {
-			return;
-		}
-
-		const videoPressWindow = videoPressIFrame.contentWindow;
-
-		// Allowed events emitted by the videopress API.
-		const videoPressEventsMap = {
-			'videopress_playing': {
-				name: 'onVideoPressPlaying',
-				type: 'event',
-			},
-			'videopress_pause': {
-				name: 'onVideoPressPause',
-				type: 'event',
-			},
-			'videopress_seeking': {
-				name: 'onVideoPressSeeking',
-				type: 'event',
-			},
-			'videopress_resize': {
-				name: 'onVideoPressResize',
-				type: 'event',
-			},
-			'videopress_volumechange': {
-				name: 'onVideoPressVolumeChange',
-				type: 'event',
-			},
-			'videopress_ended': {
-				name: 'onVideoPressEnded',
-				type: 'event',
-			},
-			'videopress_timeupdate': {
-				name: 'onVideoPressTimeUpdate',
-				type: 'event',
-			},
-			'videopress_durationchange': {
-				name: 'onVideoPressDurationChange',
-				type: 'event',
-			},
-			'videopress_progress': {
-				name: 'onVideoPressProgress',
-				type: 'event',
-			},
-			'videopress_loading_state': {
-				name: 'onVideoPressLoadingState',
-				type: 'event',
-			},
-			videopress_toggle_fullscreen: {
-				name: 'onVideoPressToggleFullscreen',
-				type: 'event',
-			},
-			'vpBlockActionPlay': {
-				name: 'vpBlockActionPlay',
-				type: 'action',
-				videoPressAction: 'videopress_action_play',
-			},
-			'vpBlockActionPause': {
-				name: 'vpBlockActionPause',
-				type: 'action',
-				videoPressAction: 'videopress_action_pause',
-			},
-			'vpBlockActionSetCurrentTime': {
-				name: 'vpBlockActionPause',
-				type: 'action',
-				videoPressAction: 'videopress_action_set_currenttime',
-			},
-		};
-
-		const allowedVideoPressEvents = Object.keys( videoPressEventsMap );
-
-		window.addEventListener( 'message', ( ev ) => {
-			const { data } = ev;
-			const eventName = data.event;
-			if ( ! allowedVideoPressEvents.includes( eventName ) ) {
-				return;
-			}
-			
-			// Rename event with the 'onVideoPress' prefix.
-			const vpEvent = videoPressEventsMap[ eventName ];
-			const { name: vpEventName, type: vpEventType, videoPressAction } = vpEvent;
-
-			// Dispatch event to top when it's an event
-			if ( vpEventType === 'event' ) {
-				// It preferrs to use the guid instead of the id.
-				const guid = data.id;
-				const originalEventName = data.event;
-	
-				// clean event data object
-				delete data.event;
-				delete data.id;
-	
-				// Emite custom event with the event data.
-				const videoPressBlockEvent = new CustomEvent( vpEventName, {
-					detail: {
-						...data,
-						originalEventName,
-						guid,
-					},
-				} );
-
-				debug( '🌉 %o [%s] ➜ %o', originalEventName, guid, vpEventName );
-
-				// Dispatch custom event in iFrame window...
-				window.dispatchEvent( videoPressBlockEvent );
-
-				// ...and also dipatch to the parent window,
-				// in case it exists.
-				if ( window?.parent && window.parent !== window ) {
-					window.parent.dispatchEvent( videoPressBlockEvent );
-				}
-			}
-
-			if ( vpEventType === 'action' ) {
-				// Overwrite event from -> to
-				data.event = videoPressAction;
-
-				debug( '🌉 recieve %o -> dispatching %o [%o]', eventName, videoPressAction, data );
-				videoPressWindow.postMessage( data, '*' );
-			}
-		} );
-	}
-
-	initWPBlockBridge();
-`;
-
-export default URL.createObjectURL( new Blob( [ rawScript ], { type: 'text/javascript' } ) );

From 10ebff288bc7324dfc0789b4a253acf9b340cf0d Mon Sep 17 00:00:00 2001
From: Daniel Post <daniel.post@automattic.com>
Date: Thu, 23 Feb 2023 14:35:20 +0100
Subject: [PATCH 27/38] Jetpack Social: Add sidebar panel for Social Image
 Generator (#28737)

* Add empty panel

* changelog

* [not verified] Add Custom Text and image picker barebone

* Add hook to retrieve and update image generator meta

* changelog

* Add media picker

* Fixup versions

* Clean up meta handling

* Simplify function

* Fixup versions

* Use SIG feature flag

* Add to Jetpack sidebar

---------

Co-authored-by: Gergely Juhasz <gergely.juhasz@automattic.com>
---
 ...tpack-social-image-generator-sidebar-panel |  4 +
 .../js-packages/publicize-components/index.js |  1 +
 .../social-image-generator/panel/index.js     | 98 +++++++++++++++++++
 .../use-image-generator-config/README.md      | 20 ++++
 .../hooks/use-image-generator-config/index.js | 63 ++++++++++++
 .../src/store/selectors.js                    |  9 ++
 ...tpack-social-image-generator-sidebar-panel |  4 +
 .../publicize/src/class-publicize-base.php    | 20 +++-
 .../post-fields-publicize-connections.php     |  1 +
 ...tpack-social-image-generator-sidebar-panel |  4 +
 ...ack-social-image-generator-sidebar-panel#2 |  5 +
 ...ack-social-image-generator-sidebar-panel#3 |  5 +
 .../extensions/plugins/publicize/index.js     | 15 +++
 ...tpack-social-image-generator-sidebar-panel |  4 +
 ...ack-social-image-generator-sidebar-panel#2 |  5 +
 ...ack-social-image-generator-sidebar-panel#3 |  5 +
 projects/plugins/social/src/js/editor.js      | 19 +++-
 17 files changed, 280 insertions(+), 2 deletions(-)
 create mode 100644 projects/js-packages/publicize-components/changelog/add-jetpack-social-image-generator-sidebar-panel
 create mode 100644 projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js
 create mode 100644 projects/js-packages/publicize-components/src/hooks/use-image-generator-config/README.md
 create mode 100644 projects/js-packages/publicize-components/src/hooks/use-image-generator-config/index.js
 create mode 100644 projects/packages/publicize/changelog/add-jetpack-social-image-generator-sidebar-panel
 create mode 100644 projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel
 create mode 100644 projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel#2
 create mode 100644 projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel#3
 create mode 100644 projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel
 create mode 100644 projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel#2
 create mode 100644 projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel#3

diff --git a/projects/js-packages/publicize-components/changelog/add-jetpack-social-image-generator-sidebar-panel b/projects/js-packages/publicize-components/changelog/add-jetpack-social-image-generator-sidebar-panel
new file mode 100644
index 0000000000000..0681a320849a2
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/add-jetpack-social-image-generator-sidebar-panel
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add Social Image Generator editor panel to post sidebar
diff --git a/projects/js-packages/publicize-components/index.js b/projects/js-packages/publicize-components/index.js
index df6cf145c6cb1..e31eda456c960 100644
--- a/projects/js-packages/publicize-components/index.js
+++ b/projects/js-packages/publicize-components/index.js
@@ -10,6 +10,7 @@ export { default as TwitterThreadListener } from './src/components/twitter';
 export { default as TwitterOptions } from './src/components/twitter/options';
 export { default as SocialPreviewsModal } from './src/components/social-previews/modal';
 export { default as SocialPreviewsPanel } from './src/components/social-previews/panel';
+export { default as SocialImageGeneratorPanel } from './src/components/social-image-generator/panel';
 export { default as PublicizePanel } from './src/components/panel';
 export { default as ReviewPrompt } from './src/components/review-prompt';
 
diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js
new file mode 100644
index 0000000000000..8a96094efc816
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js
@@ -0,0 +1,98 @@
+import { PanelBody, ToggleControl, TextControl, SelectControl } from '@wordpress/components';
+import { useCallback, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import useImageGeneratorConfig from '../../../hooks/use-image-generator-config';
+import useMediaDetails from '../../../hooks/use-media-details';
+import MediaPicker from '../../media-picker';
+
+const ALLOWED_MEDIA_TYPES = [ 'image/jpeg', 'image/png' ];
+const ADD_MEDIA_LABEL = __( 'Choose Image', 'jetpack' );
+
+const SocialImageGeneratorPanel = ( { prePublish = false } ) => {
+	const PanelWrapper = prePublish ? Fragment : PanelBody;
+	const wrapperProps = prePublish ? {} : { title: __( 'Social Image Generator', 'jetpack' ) };
+	const {
+		isEnabled,
+		setIsEnabled,
+		customText,
+		setCustomText,
+		imageType,
+		setImageType,
+		imageId,
+		setImageId,
+	} = useImageGeneratorConfig();
+
+	const [ mediaDetails ] = useMediaDetails( imageId );
+
+	const onCustomImageChange = useCallback(
+		media => {
+			setImageId( media?.id );
+		},
+		[ setImageId ]
+	);
+
+	const ImageOptions = () => {
+		return (
+			<>
+				<SelectControl
+					label={ __( 'Image Type', 'jetpack' ) }
+					value={ imageType || 'featured' }
+					options={ [
+						{
+							label: __( 'Featured Image', 'jetpack' ),
+							value: 'featured',
+						},
+						{ label: __( 'Custom Image', 'jetpack' ), value: 'custom' },
+						{ label: __( 'Default Image', 'jetpack' ), value: 'default' },
+						{ label: __( 'No Image', 'jetpack' ), value: 'none' },
+					] }
+					onChange={ setImageType }
+					help={
+						imageType === 'default'
+							? __( 'You can change the default image by clicking the Edit link below.', 'jetpack' )
+							: null
+					}
+				/>
+
+				{ imageType === 'custom' && (
+					<MediaPicker
+						buttonLabel={ ADD_MEDIA_LABEL }
+						subTitle={ __( 'Add a custom image', 'jetpack' ) }
+						mediaId={ imageId }
+						mediaDetails={ mediaDetails }
+						onChange={ onCustomImageChange }
+						allowedMediaTypes={ ALLOWED_MEDIA_TYPES }
+					/>
+				) }
+			</>
+		);
+	};
+
+	return (
+		<PanelWrapper { ...wrapperProps }>
+			<ToggleControl
+				label={ __( 'Enable Social Image', 'jetpack' ) }
+				help={ ! isEnabled ? __( 'Social Image is disabled for this post.', 'jetpack' ) : '' }
+				checked={ isEnabled }
+				onChange={ setIsEnabled }
+			/>
+			{ isEnabled && (
+				<>
+					<TextControl
+						value={ customText || '' }
+						onChange={ setCustomText }
+						label={ __( 'Custom Text', 'jetpack' ) }
+						help={ __(
+							'By default the post title is used for the image. You can use this field to set your own text.',
+							'jetpack'
+						) }
+					/>
+					<hr />
+					<ImageOptions />
+				</>
+			) }
+		</PanelWrapper>
+	);
+};
+
+export default SocialImageGeneratorPanel;
diff --git a/projects/js-packages/publicize-components/src/hooks/use-image-generator-config/README.md b/projects/js-packages/publicize-components/src/hooks/use-image-generator-config/README.md
new file mode 100644
index 0000000000000..09a16e467990b
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/hooks/use-image-generator-config/README.md
@@ -0,0 +1,20 @@
+# useImageGeneratorConfig() hook
+
+React hooks to deal with image generator config. It allows you to get options related to the image generator, as well as updating them.
+
+```es6
+import { TextControl } from '@wordpress/components';
+import useImageGeneratorConfig from './hooks/use-image-generator-config';
+
+function ImageGeneratorConfig() {
+	const { customText, setCustomText } = useImageGeneratorConfig();
+
+	return (
+		<TextControl
+			value={ customText }
+			onChange={ setCustomText }
+			label={ __( 'Custom Text', 'jetpack' ) }
+		/>
+	);
+}
+```
diff --git a/projects/js-packages/publicize-components/src/hooks/use-image-generator-config/index.js b/projects/js-packages/publicize-components/src/hooks/use-image-generator-config/index.js
new file mode 100644
index 0000000000000..97475424ec83f
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/hooks/use-image-generator-config/index.js
@@ -0,0 +1,63 @@
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useCallback } from '@wordpress/element';
+
+const PUBLICIZE_STORE_ID = 'jetpack/publicize';
+
+const getCurrentSettings = ( sigSettings, isPostPublished ) => ( {
+	isEnabled: sigSettings?.enabled ?? ! isPostPublished,
+	customText: sigSettings?.custom_text ?? null,
+	imageType: sigSettings?.image_type ?? null,
+	imageId: sigSettings?.image_id ?? null,
+} );
+
+/**
+ * @typedef {object} ImageGeneratorConfigHook
+ * @property {Array} postSettings - Array of post settings (custom text, image type etc).
+ * @property {boolean} isEnabled - True if the image generator is enabled for this post.
+ * @property {string} customText - Custom text for the generated image.
+ * @property {string} imageType - Optional. Type of the image in the generated image.
+ * @property {number} imageId - Optional. ID of the image in the generated image.
+ * @property {Function} setIsEnabled - Callback to enable or disable the image generator for a post.
+ * @property {Function} setCustomText - Callback to change the custom text.
+ * @property {Function} setImageType - Callback to change the image type.
+ * @property {Function} setImageId - Callback to change the image ID.
+ */
+
+/**
+ * Hook to handle storing and retrieving image generator config.
+ *
+ * @returns {ImageGeneratorConfigHook} - An object with the attached media hook properties set.
+ */
+export default function useImageGeneratorConfig() {
+	const { editPost } = useDispatch( editorStore );
+
+	const { postSettings, currentOptions } = useSelect( select => ( {
+		postSettings: select( PUBLICIZE_STORE_ID ).getImageGeneratorPostSettings(),
+		currentOptions: select( PUBLICIZE_STORE_ID ).getJetpackSocialOptions(),
+	} ) );
+
+	const { isPostPublished } = useSelect( select => ( {
+		isPostPublished: select( editorStore ).isCurrentPostPublished(),
+	} ) );
+
+	const updateSettings = useCallback(
+		( key, value ) => {
+			const settings = { ...postSettings, [ key ]: value };
+			editPost( {
+				meta: {
+					jetpack_social_options: { ...currentOptions, image_generator_settings: settings },
+				},
+			} );
+		},
+		[ currentOptions, editPost, postSettings ]
+	);
+
+	return {
+		...getCurrentSettings( currentOptions?.image_generator_settings, isPostPublished ),
+		setIsEnabled: value => updateSettings( 'enabled', value ),
+		setCustomText: value => updateSettings( 'custom_text', value ),
+		setImageType: value => updateSettings( 'image_type', value ),
+		setImageId: value => updateSettings( 'image_id', value ),
+	};
+}
diff --git a/projects/js-packages/publicize-components/src/store/selectors.js b/projects/js-packages/publicize-components/src/store/selectors.js
index 2b8fa90cbd2e9..6eece448e10a3 100644
--- a/projects/js-packages/publicize-components/src/store/selectors.js
+++ b/projects/js-packages/publicize-components/src/store/selectors.js
@@ -570,3 +570,12 @@ export function getJetpackSocialPostAlreadyShared() {
 export function getAttachedMedia() {
 	return get( getJetpackSocialOptions(), [ 'attached_media' ], [] );
 }
+
+/**
+ * Get a list of all image generator settings for a post.
+ *
+ * @returns {Array} An array of image generator settings.
+ */
+export function getImageGeneratorPostSettings() {
+	return getJetpackSocialOptions()?.image_generator_settings ?? [];
+}
diff --git a/projects/packages/publicize/changelog/add-jetpack-social-image-generator-sidebar-panel b/projects/packages/publicize/changelog/add-jetpack-social-image-generator-sidebar-panel
new file mode 100644
index 0000000000000..753c26bb20192
--- /dev/null
+++ b/projects/packages/publicize/changelog/add-jetpack-social-image-generator-sidebar-panel
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add options panel for Social Image Generator to Jetpack Social sidebar.
diff --git a/projects/packages/publicize/src/class-publicize-base.php b/projects/packages/publicize/src/class-publicize-base.php
index c92b32b37e320..028b2cdec57c9 100644
--- a/projects/packages/publicize/src/class-publicize-base.php
+++ b/projects/packages/publicize/src/class-publicize-base.php
@@ -1066,7 +1066,7 @@ public function register_post_meta() {
 				'schema' => array(
 					'type'       => 'object',
 					'properties' => array(
-						'attached_media' => array(
+						'attached_media'           => array(
 							'type'  => 'array',
 							'items' => array(
 								'type'       => 'object',
@@ -1080,6 +1080,24 @@ public function register_post_meta() {
 								),
 							),
 						),
+						'image_generator_settings' => array(
+							'type'       => 'object',
+							'properties' => array(
+								'enabled'     => array(
+									'type' => 'boolean',
+								),
+								'custom_text' => array(
+									'type' => 'string',
+								),
+								'image_type'  => array(
+									'type' => 'string',
+								),
+								'image_id'    => array(
+									'type'    => 'number',
+									'default' => 0,
+								),
+							),
+						),
 					),
 				),
 			),
diff --git a/projects/plugins/jetpack/_inc/lib/core-api/wpcom-fields/post-fields-publicize-connections.php b/projects/plugins/jetpack/_inc/lib/core-api/wpcom-fields/post-fields-publicize-connections.php
index ea8639232bd58..558c35237a697 100644
--- a/projects/plugins/jetpack/_inc/lib/core-api/wpcom-fields/post-fields-publicize-connections.php
+++ b/projects/plugins/jetpack/_inc/lib/core-api/wpcom-fields/post-fields-publicize-connections.php
@@ -25,6 +25,7 @@
  *     jetpack_publicize_message: (string) The message to use instead of the post's title when sharing.
  *     jetpack_social_options: {
  *       attached_media: (array) List of media that will be attached to the social media post.
+ *       image_generator_settings: (array) List of settings related to the generated image.
  *     }
  *   ...
  * }
diff --git a/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel b/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel
new file mode 100644
index 0000000000000..7e2926d36a9b9
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add options panel for Social Image Generator to Jetpack Social sidebar.
diff --git a/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel#2 b/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel#2
new file mode 100644
index 0000000000000..a1c1831fa1ef7
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel#2
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel#3 b/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel#3
new file mode 100644
index 0000000000000..a1c1831fa1ef7
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-jetpack-social-image-generator-sidebar-panel#3
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/index.js b/projects/plugins/jetpack/extensions/plugins/publicize/index.js
index 2afeca5339759..1da8e98d3309a 100644
--- a/projects/plugins/jetpack/extensions/plugins/publicize/index.js
+++ b/projects/plugins/jetpack/extensions/plugins/publicize/index.js
@@ -13,6 +13,8 @@ import {
 	TwitterThreadListener,
 	PublicizePanel,
 	useSocialMediaConnections,
+	usePublicizeConfig,
+	SocialImageGeneratorPanel,
 } from '@automattic/jetpack-publicize-components';
 import { PluginPrePublishPanel } from '@wordpress/edit-post';
 import { PostTypeSupportCheck } from '@wordpress/editor';
@@ -26,6 +28,8 @@ export const name = 'publicize';
 
 const PublicizeSettings = () => {
 	const { hasEnabledConnections } = useSocialMediaConnections();
+	const { isSocialImageGeneratorEnabled } = usePublicizeConfig();
+
 	return (
 		<PostTypeSupportCheck supportKeys="publicize">
 			<TwitterThreadListener />
@@ -34,6 +38,7 @@ const PublicizeSettings = () => {
 				<PublicizePanel enableTweetStorm={ true }>
 					<UpsellNotice />
 				</PublicizePanel>
+				{ isSocialImageGeneratorEnabled && <SocialImageGeneratorPanel /> }
 			</JetpackPluginSidebar>
 
 			<PluginPrePublishPanel
@@ -50,6 +55,16 @@ const PublicizeSettings = () => {
 					<UpsellNotice />
 				</PublicizePanel>
 			</PluginPrePublishPanel>
+
+			{ isSocialImageGeneratorEnabled && (
+				<PluginPrePublishPanel
+					initialOpen
+					title={ __( 'Social Image Generator', 'jetpack' ) }
+					icon={ <JetpackLogo showText={ false } height={ 16 } logoColor="#1E1E1E" /> }
+				>
+					<SocialImageGeneratorPanel prePublish={ true } />
+				</PluginPrePublishPanel>
+			) }
 		</PostTypeSupportCheck>
 	);
 };
diff --git a/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel b/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel
new file mode 100644
index 0000000000000..0681a320849a2
--- /dev/null
+++ b/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add Social Image Generator editor panel to post sidebar
diff --git a/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel#2 b/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel#2
new file mode 100644
index 0000000000000..9aa70e3ec1f75
--- /dev/null
+++ b/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel#2
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel#3 b/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel#3
new file mode 100644
index 0000000000000..9aa70e3ec1f75
--- /dev/null
+++ b/projects/plugins/social/changelog/add-jetpack-social-image-generator-sidebar-panel#3
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/social/src/js/editor.js b/projects/plugins/social/src/js/editor.js
index a28cf298f6288..d2b9570f494ed 100644
--- a/projects/plugins/social/src/js/editor.js
+++ b/projects/plugins/social/src/js/editor.js
@@ -2,6 +2,7 @@ import { JetpackLogo, SocialIcon, getRedirectUrl } from '@automattic/jetpack-com
 import {
 	SocialPreviewsModal,
 	SocialPreviewsPanel,
+	SocialImageGeneratorPanel,
 	usePublicizeConfig,
 	useSocialMediaConnections,
 	PublicizePanel,
@@ -55,7 +56,12 @@ const JetpackSocialSidebar = () => {
 	const closeModal = useCallback( () => setIsModalOpened( false ), [] );
 
 	const { hasConnections, hasEnabledConnections } = useSocialMediaConnections();
-	const { isPublicizeEnabled, hidePublicizeFeature, isPostAlreadyShared } = usePublicizeConfig();
+	const {
+		isPublicizeEnabled,
+		hidePublicizeFeature,
+		isPostAlreadyShared,
+		isSocialImageGeneratorEnabled,
+	} = usePublicizeConfig();
 	const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] );
 	// Determine if the review request should show right before the post publishes
 	// The publicize-enabled meta and related connections are disabled after publishing
@@ -105,6 +111,7 @@ const JetpackSocialSidebar = () => {
 				<PublicizePanel>
 					<PanelDescription />
 				</PublicizePanel>
+				{ isSocialImageGeneratorEnabled && <SocialImageGeneratorPanel /> }
 				<PanelBody title={ __( 'Social Previews', 'jetpack-social' ) }>
 					<SocialPreviewsPanel openModal={ openModal } />
 				</PanelBody>
@@ -120,6 +127,16 @@ const JetpackSocialSidebar = () => {
 				</PublicizePanel>
 			</PluginPrePublishPanel>
 
+			{ isSocialImageGeneratorEnabled && (
+				<PluginPrePublishPanel
+					initialOpen
+					title={ __( 'Social Image Generator', 'jetpack-social' ) }
+					icon={ <JetpackLogo showText={ false } height={ 16 } logoColor="#1E1E1E" /> }
+				>
+					<SocialImageGeneratorPanel prePublish={ true } />
+				</PluginPrePublishPanel>
+			) }
+
 			<PluginPrePublishPanel
 				initialOpen
 				title={ __( 'Social Previews', 'jetpack-social' ) }

From 5a10b457fd3959abcbb0e0ae51d6527523956fba Mon Sep 17 00:00:00 2001
From: jcheringer <jcheringer@users.noreply.github.com>
Date: Thu, 23 Feb 2023 10:55:18 -0300
Subject: [PATCH 28/38] Forms: Allow fields style sync (#28988)

* Allow Form fields style synchronization

* Adjust Mutiple/Single choice fields to handle styles correctly

* changelog

* Add help text to the Style Sync toggle

* Improve MC/SC fields border & background styles

* Update files in the Forms packages

* changelog

* Adjust Sync toggle help message

* Fix typo

* Bump versions

---------

Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>
---
 .../changelog/update-form-sync-field-style    |  4 +
 projects/packages/forms/composer.json         |  2 +-
 projects/packages/forms/package.json          |  2 +-
 .../src/blocks/contact-form/child-blocks.js   | 10 ++-
 .../components/jetpack-field-checkbox.js      | 29 ++++++-
 .../components/jetpack-field-consent.js       | 44 +++++++++-
 .../components/jetpack-field-controls.js      | 48 +++++------
 .../components/jetpack-field-dropdown.js      | 25 ++++--
 .../components/jetpack-field-multiple.js      | 48 ++++++++---
 .../components/jetpack-field-textarea.js      | 21 ++++-
 .../contact-form/components/jetpack-field.js  | 22 ++++-
 .../contact-form/components/jetpack-option.js |  2 +-
 .../forms/src/blocks/contact-form/editor.scss | 24 +++++-
 .../util/with-shared-field-attributes.js      | 84 +++++++++++++++++++
 .../forms/src/class-jetpack-forms.php         |  2 +-
 .../contact-form/class-contact-form-field.php | 28 +++++--
 .../forms/src/contact-form/css/grunion.css    | 10 +++
 .../forms/src/contact-form/js/form-styles.js  |  8 +-
 .../changelog/update-form-sync-field-style    |  4 +
 .../changelog/update-form-sync-field-style#2  |  5 ++
 projects/plugins/jetpack/composer.lock        |  4 +-
 .../blocks/contact-form/child-blocks.js       | 10 ++-
 .../components/jetpack-field-checkbox.js      | 29 ++++++-
 .../components/jetpack-field-consent.js       | 44 +++++++++-
 .../components/jetpack-field-controls.js      | 48 +++++------
 .../components/jetpack-field-dropdown.js      | 25 ++++--
 .../components/jetpack-field-multiple.js      | 48 ++++++++---
 .../components/jetpack-field-textarea.js      | 21 ++++-
 .../contact-form/components/jetpack-field.js  | 22 ++++-
 .../contact-form/components/jetpack-option.js |  2 +-
 .../blocks/contact-form/editor.scss           | 15 +++-
 .../util/with-shared-field-attributes.js      | 84 +++++++++++++++++++
 .../modules/contact-form/css/grunion.css      | 10 +++
 .../contact-form/grunion-contact-form.php     | 34 ++++----
 .../modules/contact-form/js/form-styles.js    | 10 +--
 35 files changed, 665 insertions(+), 163 deletions(-)
 create mode 100644 projects/packages/forms/changelog/update-form-sync-field-style
 create mode 100644 projects/packages/forms/src/blocks/contact-form/util/with-shared-field-attributes.js
 create mode 100644 projects/plugins/jetpack/changelog/update-form-sync-field-style
 create mode 100644 projects/plugins/jetpack/changelog/update-form-sync-field-style#2
 create mode 100644 projects/plugins/jetpack/extensions/blocks/contact-form/util/with-shared-field-attributes.js

diff --git a/projects/packages/forms/changelog/update-form-sync-field-style b/projects/packages/forms/changelog/update-form-sync-field-style
new file mode 100644
index 0000000000000..46ee0af7e4b86
--- /dev/null
+++ b/projects/packages/forms/changelog/update-form-sync-field-style
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Allow Form fields style synchronization
diff --git a/projects/packages/forms/composer.json b/projects/packages/forms/composer.json
index f68d875166241..22df7e8ad3a99 100644
--- a/projects/packages/forms/composer.json
+++ b/projects/packages/forms/composer.json
@@ -58,7 +58,7 @@
 			"link-template": "https://github.com/automattic/jetpack-forms/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "0.5.x-dev"
+			"dev-trunk": "0.6.x-dev"
 		},
 		"textdomain": "jetpack-forms",
 		"version-constants": {
diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json
index c3c45350e5347..74e1ab846b480 100644
--- a/projects/packages/forms/package.json
+++ b/projects/packages/forms/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-forms",
-	"version": "0.5.1",
+	"version": "0.6.0-alpha",
 	"description": "Jetpack Forms",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/forms/#readme",
 	"bugs": {
diff --git a/projects/packages/forms/src/blocks/contact-form/child-blocks.js b/projects/packages/forms/src/blocks/contact-form/child-blocks.js
index 6848837f81cad..1be87000ea308 100644
--- a/projects/packages/forms/src/blocks/contact-form/child-blocks.js
+++ b/projects/packages/forms/src/blocks/contact-form/child-blocks.js
@@ -5,7 +5,7 @@ import { __, _x } from '@wordpress/i18n';
 import JetpackField from './components/jetpack-field';
 import JetpackFieldCheckbox from './components/jetpack-field-checkbox';
 import JetpackFieldConsent from './components/jetpack-field-consent';
-import { JetpackDropdownEdit } from './components/jetpack-field-dropdown';
+import JetpackDropdown from './components/jetpack-field-dropdown';
 import JetpackFieldMultiple from './components/jetpack-field-multiple';
 import JetpackFieldTextarea from './components/jetpack-field-textarea';
 import { getIconColor } from './util/block-icons';
@@ -82,6 +82,10 @@ const FieldDefaults = {
 		borderColor: {
 			type: 'string',
 		},
+		shareFieldAttributes: {
+			type: 'boolean',
+			default: true,
+		},
 	},
 	transforms: {
 		to: [
@@ -227,6 +231,7 @@ const EditCheckbox = props => {
 
 	return (
 		<JetpackFieldCheckbox
+			clientId={ props.clientId }
 			label={ props.attributes.label } // label intentionally left blank
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
@@ -246,6 +251,7 @@ const EditConsent = ( { attributes, clientId, isSelected, name, setAttributes }
 	const { id, width, consentType, implicitConsentMessage, explicitConsentMessage } = attributes;
 	return (
 		<JetpackFieldConsent
+			clientId={ clientId }
 			id={ id }
 			isSelected={ isSelected }
 			width={ width }
@@ -584,7 +590,7 @@ export const childBlocks = [
 					d="M5 4.5H19C19.2761 4.5 19.5 4.72386 19.5 5V19C19.5 19.2761 19.2761 19.5 19 19.5H5C4.72386 19.5 4.5 19.2761 4.5 19V5C4.5 4.72386 4.72386 4.5 5 4.5ZM19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM8.93582 10.1396L8.06396 11.3602L11.9999 14.1716L15.9358 11.3602L15.064 10.1396L11.9999 12.3283L8.93582 10.1396Z"
 				/>
 			),
-			edit: JetpackDropdownEdit,
+			edit: JetpackDropdown,
 			attributes: {
 				...FieldDefaults.attributes,
 				toggleLabel: {
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js
index 847437aaee3d8..94bbcf9415ed3 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js
@@ -5,8 +5,9 @@ import {
 	PanelColorSettings,
 } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
-import { withInstanceId } from '@wordpress/compose';
+import { compose, withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldCss from './jetpack-field-css';
 import JetpackFieldLabel from './jetpack-field-label';
 import JetpackFieldWidth from './jetpack-field-width';
@@ -69,8 +70,14 @@ function JetpackFieldCheckbox( props ) {
 						help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) }
 					/>
 					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
-				</PanelBody>
 
+					<ToggleControl
+						label={ __( 'Sync fields style', 'jetpack-forms' ) }
+						checked={ attributes.shareFieldAttributes }
+						onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
+						help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) }
+					/>
+				</PanelBody>
 				<PanelColorSettings
 					title={ __( 'Color', 'jetpack-forms' ) }
 					initialOpen={ false }
@@ -81,7 +88,7 @@ function JetpackFieldCheckbox( props ) {
 							label: __( 'Label Text', 'jetpack-forms' ),
 						},
 					] }
-				></PanelColorSettings>
+				/>
 				<PanelBody
 					title={ __( 'Label Styles', 'jetpack-forms' ) }
 					initialOpen={ attributes.labelFontSize }
@@ -104,4 +111,18 @@ function JetpackFieldCheckbox( props ) {
 	);
 }
 
-export default withInstanceId( JetpackFieldCheckbox );
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] ),
+	withInstanceId
+)( JetpackFieldCheckbox );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js
index cd5de2130ab0a..36ac20b1b1668 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js
@@ -1,7 +1,12 @@
-import { InspectorAdvancedControls, InspectorControls } from '@wordpress/block-editor';
-import { BaseControl, PanelBody, SelectControl } from '@wordpress/components';
-import { withInstanceId } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	InspectorControls,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
+import { BaseControl, PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
+import { compose, withInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldCss from './jetpack-field-css';
 import JetpackFieldLabel from './jetpack-field-label';
 import JetpackFieldWidth from './jetpack-field-width';
@@ -48,7 +53,24 @@ const JetpackFieldConsent = ( {
 				</PanelBody>
 				<PanelBody title={ __( 'Field Settings', 'jetpack-forms' ) }>
 					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
+					<ToggleControl
+						label={ __( 'Sync fields style', 'jetpack-forms' ) }
+						checked={ attributes.shareFieldAttributes }
+						onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
+						help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) }
+					/>
 				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color', 'jetpack-forms' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: attributes.labelColor,
+							onChange: value => setAttributes( { labelColor: value } ),
+							label: __( 'Label Text', 'jetpack-forms' ),
+						},
+					] }
+				/>
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<JetpackFieldCss setAttributes={ setAttributes } id={ id } />
@@ -72,4 +94,18 @@ const JetpackFieldConsent = ( {
 	);
 };
 
-export default withInstanceId( JetpackFieldConsent );
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] ),
+	withInstanceId
+)( JetpackFieldConsent );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js
index 0318899422620..3f9227d2418f4 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js
@@ -30,7 +30,6 @@ const JetpackFieldControls = ( {
 	required,
 	setAttributes,
 	width,
-	type,
 } ) => {
 	const setNumberAttribute = ( key, parse = parseInt ) => value => {
 		const parsedValue = parse( value, 10 );
@@ -40,8 +39,6 @@ const JetpackFieldControls = ( {
 		} );
 	};
 
-	const hasBorderControls = type !== 'radio' && type !== 'checkbox';
-
 	const colorSettings = [
 		{
 			value: attributes.labelColor,
@@ -107,11 +104,18 @@ const JetpackFieldControls = ( {
 							'jetpack-forms'
 						) }
 					/>
+
+					<ToggleControl
+						label={ __( 'Sync fields style', 'jetpack-forms' ) }
+						checked={ attributes.shareFieldAttributes }
+						onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
+						help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) }
+					/>
 				</PanelBody>
 				<PanelColorSettings
 					title={ __( 'Color', 'jetpack-forms' ) }
 					initialOpen={ false }
-					colorSettings={ ! hasBorderControls ? colorSettings.slice( 0, 2 ) : colorSettings }
+					colorSettings={ colorSettings }
 				/>
 				<PanelBody title={ __( 'Input Field Styles', 'jetpack-forms' ) } initialOpen={ false }>
 					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
@@ -133,26 +137,22 @@ const JetpackFieldControls = ( {
 							size="__unstable-large"
 						/>
 					</BaseControl>
-					{ hasBorderControls && (
-						<>
-							<RangeControl
-								label={ __( 'Border Width', 'jetpack-forms' ) }
-								value={ attributes.borderWidth }
-								initialPosition={ 1 }
-								onChange={ setNumberAttribute( 'borderWidth' ) }
-								min={ 0 }
-								max={ 100 }
-							/>
-							<RangeControl
-								label={ __( 'Border Radius', 'jetpack-forms' ) }
-								value={ attributes.borderRadius }
-								initialPosition={ 0 }
-								onChange={ setNumberAttribute( 'borderRadius' ) }
-								min={ 0 }
-								max={ 100 }
-							/>
-						</>
-					) }
+					<RangeControl
+						label={ __( 'Border Width', 'jetpack-forms' ) }
+						value={ attributes.borderWidth }
+						initialPosition={ 1 }
+						onChange={ setNumberAttribute( 'borderWidth' ) }
+						min={ 0 }
+						max={ 100 }
+					/>
+					<RangeControl
+						label={ __( 'Border Radius', 'jetpack-forms' ) }
+						value={ attributes.borderRadius }
+						initialPosition={ 0 }
+						onChange={ setNumberAttribute( 'borderRadius' ) }
+						min={ 0 }
+						max={ 100 }
+					/>
 				</PanelBody>
 				<PanelBody title={ __( 'Label Styles', 'jetpack-forms' ) } initialOpen={ false }>
 					<BaseControl>
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js
index a002a455553b6..0c6fae44d3e39 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js
@@ -1,21 +1,17 @@
 import { RichText } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { isEmpty, isNil, noop, split, trim } from 'lodash';
 import { setFocus } from '../util/focus';
 import { useFormStyle, useFormWrapper } from '../util/form';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
-export const JetpackDropdownEdit = ( {
-	attributes,
-	clientId,
-	isSelected,
-	name,
-	setAttributes,
-} ) => {
+const JetpackDropdown = ( { attributes, clientId, isSelected, name, setAttributes } ) => {
 	const { id, label, options, required, requiredText, toggleLabel, width } = attributes;
 	const optionsWrapper = useRef();
 	const formStyle = useFormStyle( clientId );
@@ -160,3 +156,18 @@ export const JetpackDropdownEdit = ( {
 		</div>
 	);
 };
+
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] )
+)( JetpackDropdown );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js
index 820321eb7ec83..8356b52e38cbb 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js
@@ -1,9 +1,10 @@
 import { Button } from '@wordpress/components';
-import { withInstanceId } from '@wordpress/compose';
+import { compose, withInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { useFormStyle } from '../util/form';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import JetpackOption from './jetpack-option';
@@ -67,6 +68,11 @@ function JetpackFieldMultiple( props ) {
 	};
 
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
+	const optionStyle = {
+		color: fieldStyle.color,
+		fontSize: fieldStyle.fontSize,
+		lineHeight: fieldStyle.lineHeight,
+	};
 
 	return (
 		<>
@@ -99,20 +105,22 @@ function JetpackFieldMultiple( props ) {
 							onAddOption={ addNewOption }
 							isInFocus={ index === inFocus && isSelected }
 							isSelected={ isSelected }
-							style={ type !== 'select' ? fieldStyle : {} }
+							style={ type !== 'select' ? optionStyle : {} }
 						/>
 					) ) }
+					{ isSelected && (
+						<li>
+							<Button
+								className="jetpack-field-multiple__add-option"
+								icon="insert"
+								label={ __( 'Insert option', 'jetpack-forms' ) }
+								onClick={ addNewOption }
+							>
+								{ __( 'Add option', 'jetpack-forms' ) }
+							</Button>
+						</li>
+					) }
 				</ol>
-				{ isSelected && (
-					<Button
-						className="jetpack-field-multiple__add-option"
-						icon="insert"
-						label={ __( 'Insert option', 'jetpack-forms' ) }
-						onClick={ addNewOption }
-					>
-						{ __( 'Add option', 'jetpack-forms' ) }
-					</Button>
-				) }
 			</div>
 
 			<JetpackFieldControls
@@ -127,4 +135,18 @@ function JetpackFieldMultiple( props ) {
 	);
 }
 
-export default withInstanceId( JetpackFieldMultiple );
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] ),
+	withInstanceId
+)( JetpackFieldMultiple );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js
index 23c72377b961d..6a0c9cfc34bdd 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js
@@ -1,12 +1,14 @@
+import { compose } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 import classnames from 'classnames';
 import { isEmpty, isNil } from 'lodash';
 import { useFormStyle } from '../util/form';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
-export default function JetpackFieldTextarea( props ) {
+const JetpackFieldTextarea = props => {
 	const {
 		attributes,
 		clientId,
@@ -64,4 +66,19 @@ export default function JetpackFieldTextarea( props ) {
 			/>
 		</>
 	);
-}
+};
+
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] )
+)( JetpackFieldTextarea );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js
index 2f3c68b28f5c7..73d44c555bfee 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js
@@ -1,13 +1,14 @@
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import classnames from 'classnames';
 import { isEmpty } from 'lodash';
 import { useFormStyle } from '../util/form';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
-export default function JetpackField( props ) {
+const JetpackField = props => {
 	const {
 		attributes,
 		clientId,
@@ -59,7 +60,22 @@ export default function JetpackField( props ) {
 			/>
 		</>
 	);
-}
+};
+
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] )
+)( JetpackField );
 
 const withCustomClassName = createHigherOrderComponent( BlockListBlock => {
 	return props => {
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-option.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-option.js
index 75db80b5b5ab9..7585de46b16c6 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-option.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-option.js
@@ -50,7 +50,7 @@ class JetpackOption extends Component {
 		return (
 			<li className="jetpack-option">
 				{ type && type !== 'select' && (
-					<input className="jetpack-option__type" style={ style } type={ type } readOnly />
+					<input className="jetpack-option__type" type={ type } readOnly />
 				) }
 				<input
 					type="text"
diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
index 912e62a173cc0..345e68c70901b 100644
--- a/projects/packages/forms/src/blocks/contact-form/editor.scss
+++ b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -295,8 +295,6 @@
 		border: 1px solid #8c8f94;
 		border-radius: 0;
 		padding: 16px;
-		padding-left: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
-		padding-right: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
 		margin: 0;
 	}
 
@@ -355,6 +353,13 @@
 	}
 }
 
+:where(:not(.contact-form)) > .jetpack-field {
+	.jetpack-field__input, .jetpack-field__textarea {
+		padding-left: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
+		padding-right: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
+	}
+}
+
 .jetpack-field-label__width {
 	.components-button-group {
 		display: block;
@@ -412,8 +417,6 @@
 	}
 
 	&:focus {
-		background: #fff;
-		border-color: #e3e5e8;
 		box-shadow: none;
 	}
 }
@@ -589,6 +592,19 @@
 		}
 	}
 
+	&:not(.is-style-outlined):not(.is-style-animated) {
+		.jetpack-field.jetpack-field-multiple {
+			.jetpack-field-multiple__list {
+				background-color: var(--jetpack--contact-form--input-background);
+				border-radius: var(--jetpack--contact-form--border-radius);
+				border-color: var(--jetpack--contact-form--border-color);
+				border-style: var(--jetpack--contact-form--border-style);
+				border-width: var(--jetpack--contact-form--border-size);
+				padding: var(--jetpack--contact-form--input-padding, 16px);
+			}
+		}
+	}
+
 	&.is-style-outlined {
 		.block-editor-block-list__block:not([contenteditable]):focus:after {
 			top: -10px;
diff --git a/projects/packages/forms/src/blocks/contact-form/util/with-shared-field-attributes.js b/projects/packages/forms/src/blocks/contact-form/util/with-shared-field-attributes.js
new file mode 100644
index 0000000000000..2ac2dfb09dd25
--- /dev/null
+++ b/projects/packages/forms/src/blocks/contact-form/util/with-shared-field-attributes.js
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect } from '@wordpress/element';
+import { isEmpty, filter, first, map, pick, isNil } from 'lodash';
+
+export const useSharedFieldAttributes = ( {
+	attributes,
+	clientId,
+	setAttributes,
+	sharedAttributes,
+} ) => {
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+
+	const siblings = useSelect(
+		select => {
+			const blockEditor = select( 'core/block-editor' );
+
+			const parentId = first(
+				blockEditor.getBlockParentsByBlockName( clientId, 'jetpack/contact-form' )
+			);
+
+			return filter(
+				blockEditor.getBlocks( parentId ),
+				block => block.name.indexOf( 'jetpack/field' ) > -1 && block.attributes.shareFieldAttributes
+			);
+		},
+		[ clientId ]
+	);
+
+	useEffect( () => {
+		if ( ! isEmpty( siblings ) && attributes.shareFieldAttributes ) {
+			const newSharedAttributes = pick( first( siblings ).attributes, sharedAttributes );
+			updateBlockAttributes( [ clientId ], newSharedAttributes );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	return useCallback(
+		newAttributes => {
+			let blocksToUpdate;
+			let newSharedAttributes;
+
+			if ( attributes.shareFieldAttributes && isNil( newAttributes.shareFieldAttributes ) ) {
+				blocksToUpdate = map( siblings, block => block.clientId );
+				newSharedAttributes = pick( newAttributes, sharedAttributes );
+			} else if ( newAttributes.shareFieldAttributes && ! isEmpty( siblings ) ) {
+				blocksToUpdate = [ clientId ];
+				newSharedAttributes = pick( first( siblings ).attributes, sharedAttributes );
+			}
+
+			if ( ! isEmpty( blocksToUpdate ) && ! isEmpty( newSharedAttributes ) ) {
+				updateBlockAttributes( blocksToUpdate, newSharedAttributes );
+			}
+
+			setAttributes( newAttributes );
+		},
+		[ attributes, clientId, setAttributes, sharedAttributes, siblings, updateBlockAttributes ]
+	);
+};
+
+export const withSharedFieldAttributes = sharedAttributes => WrappedComponent => ( {
+	attributes,
+	clientId,
+	setAttributes,
+	...props
+} ) => {
+	const syncAttributes = useSharedFieldAttributes( {
+		attributes,
+		clientId,
+		setAttributes,
+		sharedAttributes,
+	} );
+
+	return (
+		<WrappedComponent
+			attributes={ attributes }
+			clientId={ clientId }
+			setAttributes={ syncAttributes }
+			{ ...props }
+		/>
+	);
+};
diff --git a/projects/packages/forms/src/class-jetpack-forms.php b/projects/packages/forms/src/class-jetpack-forms.php
index 126a900cab182..2b337ad35f9be 100644
--- a/projects/packages/forms/src/class-jetpack-forms.php
+++ b/projects/packages/forms/src/class-jetpack-forms.php
@@ -14,7 +14,7 @@
  */
 class Jetpack_Forms {
 
-	const PACKAGE_VERSION = '0.5.1';
+	const PACKAGE_VERSION = '0.6.0-alpha';
 
 	/**
 	 * Load the contact form module.
diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 3f609b9facc7c..55117bc8100a3 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -58,6 +58,13 @@ class Contact_Form_Field extends Contact_Form_Shortcode {
 	 */
 	public $field_styles = '';
 
+	/**
+	 * Styles to be applied to the field option
+	 *
+	 * @var string
+	 */
+	public $option_styles = '';
+
 	/**
 	 * Styles to be applied to the field
 	 *
@@ -288,24 +295,27 @@ public function render() {
 			$this->field_styles .= 'border-width: ' . (int) $this->get_attribute( 'borderwidth' ) . 'px;';
 		}
 		if ( is_numeric( $this->get_attribute( 'lineheight' ) ) ) {
-			$this->block_styles .= '--jetpack--contact-form--line-height: ' . esc_attr( $this->get_attribute( 'lineheight' ) ) . ';';
-			$this->field_styles .= 'line-height: ' . (int) $this->get_attribute( 'lineheight' ) . ';';
+			$this->block_styles  .= '--jetpack--contact-form--line-height: ' . esc_attr( $this->get_attribute( 'lineheight' ) ) . ';';
+			$this->field_styles  .= 'line-height: ' . (int) $this->get_attribute( 'lineheight' ) . ';';
+			$this->option_styles .= 'line-height: ' . (int) $this->get_attribute( 'lineheight' ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'bordercolor' ) ) ) {
 			$this->block_styles .= '--jetpack--contact-form--border-color: ' . esc_attr( $this->get_attribute( 'bordercolor' ) ) . ';';
 			$this->field_styles .= 'border-color: ' . esc_attr( $this->get_attribute( 'bordercolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'inputcolor' ) ) ) {
-			$this->block_styles .= '--jetpack--contact-form--text-color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
-			$this->field_styles .= 'color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
+			$this->block_styles  .= '--jetpack--contact-form--text-color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
+			$this->field_styles  .= 'color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
+			$this->option_styles .= 'color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'fieldbackgroundcolor' ) ) ) {
 			$this->block_styles .= '--jetpack--contact-form--input-background: ' . esc_attr( $this->get_attribute( 'fieldbackgroundcolor' ) ) . ';';
 			$this->field_styles .= 'background-color: ' . esc_attr( $this->get_attribute( 'fieldbackgroundcolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'fieldfontsize' ) ) ) {
-			$this->block_styles .= '--jetpack--contact-form--font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
-			$this->field_styles .= 'font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
+			$this->block_styles  .= '--jetpack--contact-form--font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
+			$this->field_styles  .= 'font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
+			$this->option_styles .= 'font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
 		}
 
 		if ( ! empty( $this->get_attribute( 'labelcolor' ) ) ) {
@@ -580,7 +590,7 @@ public function render_radio_field( $id, $label, $value, $class, $required, $req
 		$field  = $this->render_label( '', $id, $label, $required, $required_field_text );
 		$field .= '<div class="grunion-radio-options">';
 
-		$field_style = 'style="' . $this->field_styles . '"';
+		$field_style = 'style="' . $this->option_styles . '"';
 
 		foreach ( (array) $this->get_attribute( 'options' ) as $option_index => $option ) {
 			$option = Contact_Form_Plugin::strip_tags( $option );
@@ -632,7 +642,7 @@ private function render_consent_field( $id, $class ) {
 		$consent_type    = 'explicit' === $this->get_attribute( 'consenttype' ) ? 'explicit' : 'implicit';
 		$consent_message = 'explicit' === $consent_type ? $this->get_attribute( 'explicitconsentmessage' ) : $this->get_attribute( 'implicitconsentmessage' );
 
-		$field = "<label class='grunion-field-label consent consent-" . $consent_type . "'>";
+		$field = "<label class='grunion-field-label consent consent-" . $consent_type . "' style='" . $this->label_styles . "'>";
 
 		if ( 'implicit' === $consent_type ) {
 			$field .= "\t\t<input aria-hidden='true' type='checkbox' checked name='" . esc_attr( $id ) . "' value='" . esc_attr__( 'Yes', 'jetpack-forms' ) . "' style='display:none;' /> \n";
@@ -661,7 +671,7 @@ public function render_checkbox_multiple_field( $id, $label, $value, $class, $re
 		$field  = $this->render_label( '', $id, $label, $required, $required_field_text );
 		$field .= '<div class="grunion-checkbox-multiple-options">';
 
-		$field_style = 'style="' . $this->field_styles . '"';
+		$field_style = 'style="' . $this->option_styles . '"';
 
 		foreach ( (array) $this->get_attribute( 'options' ) as $option_index => $option ) {
 			$option = Contact_Form_Plugin::strip_tags( $option );
diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css
index 1584511703e25..06d23f49c98f0 100644
--- a/projects/packages/forms/src/contact-form/css/grunion.css
+++ b/projects/packages/forms/src/contact-form/css/grunion.css
@@ -372,6 +372,16 @@
 	flex-grow: 1;
 }
 
+.contact-form :not(.is-style-outlined):not(.is-style-animated) .grunion-field-wrap .grunion-checkbox-multiple-options,
+.contact-form :not(.is-style-outlined):not(.is-style-animated) .grunion-field-wrap .grunion-radio-options {
+	background-color: var(--jetpack--contact-form--input-background);
+	border-radius: var(--jetpack--contact-form--border-radius);
+	border-color: var(--jetpack--contact-form--border-color);
+	border-style: var(--jetpack--contact-form--border-style);
+	border-width: var(--jetpack--contact-form--border-size);
+	padding: var(--jetpack--contact-form--input-padding, 16px);
+}
+
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label {
 	position: absolute;
 	right: 0;
diff --git a/projects/packages/forms/src/contact-form/js/form-styles.js b/projects/packages/forms/src/contact-form/js/form-styles.js
index 0ab363d49ee85..0bcb80895dce2 100644
--- a/projects/packages/forms/src/contact-form/js/form-styles.js
+++ b/projects/packages/forms/src/contact-form/js/form-styles.js
@@ -1,10 +1,6 @@
 const FRONTEND_SELECTOR = '.wp-block-jetpack-contact-form-container';
 const EDITOR_SELECTOR = '[data-type="jetpack/contact-form"]';
 
-const iframeCanvas = document.querySelector( 'iframe[name="editor-canvas"]' );
-const doc = iframeCanvas ? iframeCanvas.contentDocument : document;
-const bodyNode = doc.querySelector( 'body' );
-
 //Fallback in case of the page load event takes too long to fire up
 const fallbackTimer = setTimeout( () => {
 	handleFormStyles();
@@ -46,6 +42,10 @@ function generateStyleVariables( selector, outputSelector = 'body' ) {
 		</div>
 	`;
 
+	const iframeCanvas = document.querySelector( 'iframe[name="editor-canvas"]' );
+	const doc = iframeCanvas ? iframeCanvas.contentDocument : document;
+	const bodyNode = doc.querySelector( 'body' );
+
 	setTimeout( () => {
 		clearTimeout( fallbackTimer );
 		bodyNode.classList.add( 'contact-form-styles-loaded' );
diff --git a/projects/plugins/jetpack/changelog/update-form-sync-field-style b/projects/plugins/jetpack/changelog/update-form-sync-field-style
new file mode 100644
index 0000000000000..fd6b5bff4ab8a
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-form-sync-field-style
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Allow Form fields style synchronization
diff --git a/projects/plugins/jetpack/changelog/update-form-sync-field-style#2 b/projects/plugins/jetpack/changelog/update-form-sync-field-style#2
new file mode 100644
index 0000000000000..a1c1831fa1ef7
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-form-sync-field-style#2
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/jetpack/composer.lock b/projects/plugins/jetpack/composer.lock
index 8050c9780ad59..72ff133053369 100644
--- a/projects/plugins/jetpack/composer.lock
+++ b/projects/plugins/jetpack/composer.lock
@@ -875,7 +875,7 @@
             "dist": {
                 "type": "path",
                 "url": "../../packages/forms",
-                "reference": "82af7f2fa186f320d807aad0d179a1d691318230"
+                "reference": "18f8f1fc449e666d94fd0443543f5550188c16e7"
             },
             "require": {
                 "automattic/jetpack-assets": "@dev",
@@ -897,7 +897,7 @@
                     "link-template": "https://github.com/automattic/jetpack-forms/compare/v${old}...v${new}"
                 },
                 "branch-alias": {
-                    "dev-trunk": "0.5.x-dev"
+                    "dev-trunk": "0.6.x-dev"
                 },
                 "textdomain": "jetpack-forms",
                 "version-constants": {
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js b/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js
index 78ce30f4d81a7..f7be51e816f98 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js
@@ -7,7 +7,7 @@ import renderMaterialIcon from '../../shared/render-material-icon';
 import JetpackField from './components/jetpack-field';
 import JetpackFieldCheckbox from './components/jetpack-field-checkbox';
 import JetpackFieldConsent from './components/jetpack-field-consent';
-import { JetpackDropdownEdit } from './components/jetpack-field-dropdown';
+import JetpackDropdown from './components/jetpack-field-dropdown';
 import JetpackFieldMultiple from './components/jetpack-field-multiple';
 import JetpackFieldTextarea from './components/jetpack-field-textarea';
 import { useFormWrapper } from './util/form';
@@ -82,6 +82,10 @@ const FieldDefaults = {
 		borderColor: {
 			type: 'string',
 		},
+		shareFieldAttributes: {
+			type: 'boolean',
+			default: true,
+		},
 	},
 	transforms: {
 		to: [
@@ -227,6 +231,7 @@ const EditCheckbox = props => {
 
 	return (
 		<JetpackFieldCheckbox
+			clientId={ props.clientId }
 			label={ props.attributes.label } // label intentionally left blank
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
@@ -246,6 +251,7 @@ const EditConsent = ( { attributes, clientId, isSelected, name, setAttributes }
 	const { id, width, consentType, implicitConsentMessage, explicitConsentMessage } = attributes;
 	return (
 		<JetpackFieldConsent
+			clientId={ clientId }
 			id={ id }
 			isSelected={ isSelected }
 			width={ width }
@@ -576,7 +582,7 @@ export const childBlocks = [
 					d="M5 4.5H19C19.2761 4.5 19.5 4.72386 19.5 5V19C19.5 19.2761 19.2761 19.5 19 19.5H5C4.72386 19.5 4.5 19.2761 4.5 19V5C4.5 4.72386 4.72386 4.5 5 4.5ZM19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM8.93582 10.1396L8.06396 11.3602L11.9999 14.1716L15.9358 11.3602L15.064 10.1396L11.9999 12.3283L8.93582 10.1396Z"
 				/>
 			),
-			edit: JetpackDropdownEdit,
+			edit: JetpackDropdown,
 			attributes: {
 				...FieldDefaults.attributes,
 				toggleLabel: {
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js
index eed2927f4ec5b..a2ab9e3c3a718 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js
@@ -5,8 +5,9 @@ import {
 	PanelColorSettings,
 } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
-import { withInstanceId } from '@wordpress/compose';
+import { compose, withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldCss from './jetpack-field-css';
 import JetpackFieldLabel from './jetpack-field-label';
 import JetpackFieldWidth from './jetpack-field-width';
@@ -69,8 +70,14 @@ function JetpackFieldCheckbox( props ) {
 						help={ __( 'You can edit the "required" label in the editor', 'jetpack' ) }
 					/>
 					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
-				</PanelBody>
 
+					<ToggleControl
+						label={ __( 'Sync fields style', 'jetpack' ) }
+						checked={ attributes.shareFieldAttributes }
+						onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
+						help={ __( 'Disable to apply individual styling to this block', 'jetpack' ) }
+					/>
+				</PanelBody>
 				<PanelColorSettings
 					title={ __( 'Color', 'jetpack' ) }
 					initialOpen={ false }
@@ -81,7 +88,7 @@ function JetpackFieldCheckbox( props ) {
 							label: __( 'Label Text', 'jetpack' ),
 						},
 					] }
-				></PanelColorSettings>
+				/>
 				<PanelBody
 					title={ __( 'Label Styles', 'jetpack' ) }
 					initialOpen={ attributes.labelFontSize }
@@ -104,4 +111,18 @@ function JetpackFieldCheckbox( props ) {
 	);
 }
 
-export default withInstanceId( JetpackFieldCheckbox );
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] ),
+	withInstanceId
+)( JetpackFieldCheckbox );
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js
index 63eca578cb89e..a07b015e50421 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js
@@ -1,7 +1,12 @@
-import { InspectorAdvancedControls, InspectorControls } from '@wordpress/block-editor';
-import { BaseControl, PanelBody, SelectControl } from '@wordpress/components';
-import { withInstanceId } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	InspectorControls,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
+import { BaseControl, PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
+import { compose, withInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldCss from './jetpack-field-css';
 import JetpackFieldLabel from './jetpack-field-label';
 import JetpackFieldWidth from './jetpack-field-width';
@@ -48,7 +53,24 @@ const JetpackFieldConsent = ( {
 				</PanelBody>
 				<PanelBody title={ __( 'Field Settings', 'jetpack' ) }>
 					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
+					<ToggleControl
+						label={ __( 'Sync fields style', 'jetpack' ) }
+						checked={ attributes.shareFieldAttributes }
+						onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
+						help={ __( 'Disable to apply individual styling to this block', 'jetpack' ) }
+					/>
 				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color', 'jetpack' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: attributes.labelColor,
+							onChange: value => setAttributes( { labelColor: value } ),
+							label: __( 'Label Text', 'jetpack' ),
+						},
+					] }
+				/>
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<JetpackFieldCss setAttributes={ setAttributes } id={ id } />
@@ -72,4 +94,18 @@ const JetpackFieldConsent = ( {
 	);
 };
 
-export default withInstanceId( JetpackFieldConsent );
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] ),
+	withInstanceId
+)( JetpackFieldConsent );
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js
index 5610504fa923c..22df4eb76df8e 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js
@@ -30,7 +30,6 @@ const JetpackFieldControls = ( {
 	required,
 	setAttributes,
 	width,
-	type,
 } ) => {
 	const setNumberAttribute = ( key, parse = parseInt ) => value => {
 		const parsedValue = parse( value, 10 );
@@ -40,8 +39,6 @@ const JetpackFieldControls = ( {
 		} );
 	};
 
-	const hasBorderControls = type !== 'radio' && type !== 'checkbox';
-
 	const colorSettings = [
 		{
 			value: attributes.labelColor,
@@ -107,11 +104,18 @@ const JetpackFieldControls = ( {
 							'jetpack'
 						) }
 					/>
+
+					<ToggleControl
+						label={ __( 'Sync fields style', 'jetpack' ) }
+						checked={ attributes.shareFieldAttributes }
+						onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
+						help={ __( 'Disable to apply individual styling to this block', 'jetpack' ) }
+					/>
 				</PanelBody>
 				<PanelColorSettings
 					title={ __( 'Color', 'jetpack' ) }
 					initialOpen={ false }
-					colorSettings={ ! hasBorderControls ? colorSettings.slice( 0, 2 ) : colorSettings }
+					colorSettings={ colorSettings }
 				/>
 				<PanelBody title={ __( 'Input Field Styles', 'jetpack' ) } initialOpen={ false }>
 					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
@@ -133,26 +137,22 @@ const JetpackFieldControls = ( {
 							size="__unstable-large"
 						/>
 					</BaseControl>
-					{ hasBorderControls && (
-						<>
-							<RangeControl
-								label={ __( 'Border Width', 'jetpack' ) }
-								value={ attributes.borderWidth }
-								initialPosition={ 1 }
-								onChange={ setNumberAttribute( 'borderWidth' ) }
-								min={ 0 }
-								max={ 100 }
-							/>
-							<RangeControl
-								label={ __( 'Border Radius', 'jetpack' ) }
-								value={ attributes.borderRadius }
-								initialPosition={ 0 }
-								onChange={ setNumberAttribute( 'borderRadius' ) }
-								min={ 0 }
-								max={ 100 }
-							/>
-						</>
-					) }
+					<RangeControl
+						label={ __( 'Border Width', 'jetpack' ) }
+						value={ attributes.borderWidth }
+						initialPosition={ 1 }
+						onChange={ setNumberAttribute( 'borderWidth' ) }
+						min={ 0 }
+						max={ 100 }
+					/>
+					<RangeControl
+						label={ __( 'Border Radius', 'jetpack' ) }
+						value={ attributes.borderRadius }
+						initialPosition={ 0 }
+						onChange={ setNumberAttribute( 'borderRadius' ) }
+						min={ 0 }
+						max={ 100 }
+					/>
 				</PanelBody>
 				<PanelBody title={ __( 'Label Styles', 'jetpack' ) } initialOpen={ false }>
 					<BaseControl>
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-dropdown.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-dropdown.js
index 148d14cb3b2e4..12c4ef314f60b 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-dropdown.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-dropdown.js
@@ -1,21 +1,17 @@
 import { RichText } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { isEmpty, isNil, noop, split, trim } from 'lodash';
 import { setFocus } from '../util/focus';
 import { useFormStyle, useFormWrapper } from '../util/form';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
-export const JetpackDropdownEdit = ( {
-	attributes,
-	clientId,
-	isSelected,
-	name,
-	setAttributes,
-} ) => {
+const JetpackDropdown = ( { attributes, clientId, isSelected, name, setAttributes } ) => {
 	const { id, label, options, required, requiredText, toggleLabel, width } = attributes;
 	const optionsWrapper = useRef();
 	const formStyle = useFormStyle( clientId );
@@ -160,3 +156,18 @@ export const JetpackDropdownEdit = ( {
 		</div>
 	);
 };
+
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] )
+)( JetpackDropdown );
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js
index 46250d8f0c054..af8c402d9a758 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js
@@ -1,9 +1,10 @@
 import { Button } from '@wordpress/components';
-import { withInstanceId } from '@wordpress/compose';
+import { compose, withInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { useFormStyle } from '../util/form';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import JetpackOption from './jetpack-option';
@@ -67,6 +68,11 @@ function JetpackFieldMultiple( props ) {
 	};
 
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
+	const optionStyle = {
+		color: fieldStyle.color,
+		fontSize: fieldStyle.fontSize,
+		lineHeight: fieldStyle.lineHeight,
+	};
 
 	return (
 		<>
@@ -99,20 +105,22 @@ function JetpackFieldMultiple( props ) {
 							onAddOption={ addNewOption }
 							isInFocus={ index === inFocus && isSelected }
 							isSelected={ isSelected }
-							style={ type !== 'select' ? fieldStyle : {} }
+							style={ type !== 'select' ? optionStyle : {} }
 						/>
 					) ) }
+					{ isSelected && (
+						<li>
+							<Button
+								className="jetpack-field-multiple__add-option"
+								icon="insert"
+								label={ __( 'Insert option', 'jetpack' ) }
+								onClick={ addNewOption }
+							>
+								{ __( 'Add option', 'jetpack' ) }
+							</Button>
+						</li>
+					) }
 				</ol>
-				{ isSelected && (
-					<Button
-						className="jetpack-field-multiple__add-option"
-						icon="insert"
-						label={ __( 'Insert option', 'jetpack' ) }
-						onClick={ addNewOption }
-					>
-						{ __( 'Add option', 'jetpack' ) }
-					</Button>
-				) }
 			</div>
 
 			<JetpackFieldControls
@@ -127,4 +135,18 @@ function JetpackFieldMultiple( props ) {
 	);
 }
 
-export default withInstanceId( JetpackFieldMultiple );
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] ),
+	withInstanceId
+)( JetpackFieldMultiple );
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js
index 23c72377b961d..6a0c9cfc34bdd 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js
@@ -1,12 +1,14 @@
+import { compose } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 import classnames from 'classnames';
 import { isEmpty, isNil } from 'lodash';
 import { useFormStyle } from '../util/form';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
-export default function JetpackFieldTextarea( props ) {
+const JetpackFieldTextarea = props => {
 	const {
 		attributes,
 		clientId,
@@ -64,4 +66,19 @@ export default function JetpackFieldTextarea( props ) {
 			/>
 		</>
 	);
-}
+};
+
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] )
+)( JetpackFieldTextarea );
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js
index 2f3c68b28f5c7..73d44c555bfee 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js
@@ -1,13 +1,14 @@
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import classnames from 'classnames';
 import { isEmpty } from 'lodash';
 import { useFormStyle } from '../util/form';
+import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
-export default function JetpackField( props ) {
+const JetpackField = props => {
 	const {
 		attributes,
 		clientId,
@@ -59,7 +60,22 @@ export default function JetpackField( props ) {
 			/>
 		</>
 	);
-}
+};
+
+export default compose(
+	withSharedFieldAttributes( [
+		'borderRadius',
+		'borderWidth',
+		'labelFontSize',
+		'fieldFontSize',
+		'lineHeight',
+		'labelLineHeight',
+		'inputColor',
+		'labelColor',
+		'fieldBackgroundColor',
+		'borderColor',
+	] )
+)( JetpackField );
 
 const withCustomClassName = createHigherOrderComponent( BlockListBlock => {
 	return props => {
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js
index 038450dcb143f..11084f67ed6c1 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js
@@ -50,7 +50,7 @@ class JetpackOption extends Component {
 		return (
 			<li className="jetpack-option">
 				{ type && type !== 'select' && (
-					<input className="jetpack-option__type" style={ style } type={ type } readOnly />
+					<input className="jetpack-option__type" type={ type } readOnly />
 				) }
 				<input
 					type="text"
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss b/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
index 8098d53cee8f8..47241d26964f2 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
@@ -410,8 +410,6 @@
 	}
 
 	&:focus {
-		background: #fff;
-		border-color: #e3e5e8;
 		box-shadow: none;
 	}
 }
@@ -587,6 +585,19 @@
 		}
 	}
 
+	&:not(.is-style-outlined):not(.is-style-animated) {
+		.jetpack-field.jetpack-field-multiple {
+			.jetpack-field-multiple__list {
+				background-color: var(--jetpack--contact-form--input-background);
+				border-radius: var(--jetpack--contact-form--border-radius);
+				border-color: var(--jetpack--contact-form--border-color);
+				border-style: var(--jetpack--contact-form--border-style);
+				border-width: var(--jetpack--contact-form--border-size);
+				padding: var(--jetpack--contact-form--input-padding, 16px);
+			}
+		}
+	}
+
 	&.is-style-outlined {
 		.block-editor-block-list__block:not([contenteditable]):focus:after {
 			top: -10px;
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/util/with-shared-field-attributes.js b/projects/plugins/jetpack/extensions/blocks/contact-form/util/with-shared-field-attributes.js
new file mode 100644
index 0000000000000..2ac2dfb09dd25
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/util/with-shared-field-attributes.js
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect } from '@wordpress/element';
+import { isEmpty, filter, first, map, pick, isNil } from 'lodash';
+
+export const useSharedFieldAttributes = ( {
+	attributes,
+	clientId,
+	setAttributes,
+	sharedAttributes,
+} ) => {
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+
+	const siblings = useSelect(
+		select => {
+			const blockEditor = select( 'core/block-editor' );
+
+			const parentId = first(
+				blockEditor.getBlockParentsByBlockName( clientId, 'jetpack/contact-form' )
+			);
+
+			return filter(
+				blockEditor.getBlocks( parentId ),
+				block => block.name.indexOf( 'jetpack/field' ) > -1 && block.attributes.shareFieldAttributes
+			);
+		},
+		[ clientId ]
+	);
+
+	useEffect( () => {
+		if ( ! isEmpty( siblings ) && attributes.shareFieldAttributes ) {
+			const newSharedAttributes = pick( first( siblings ).attributes, sharedAttributes );
+			updateBlockAttributes( [ clientId ], newSharedAttributes );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	return useCallback(
+		newAttributes => {
+			let blocksToUpdate;
+			let newSharedAttributes;
+
+			if ( attributes.shareFieldAttributes && isNil( newAttributes.shareFieldAttributes ) ) {
+				blocksToUpdate = map( siblings, block => block.clientId );
+				newSharedAttributes = pick( newAttributes, sharedAttributes );
+			} else if ( newAttributes.shareFieldAttributes && ! isEmpty( siblings ) ) {
+				blocksToUpdate = [ clientId ];
+				newSharedAttributes = pick( first( siblings ).attributes, sharedAttributes );
+			}
+
+			if ( ! isEmpty( blocksToUpdate ) && ! isEmpty( newSharedAttributes ) ) {
+				updateBlockAttributes( blocksToUpdate, newSharedAttributes );
+			}
+
+			setAttributes( newAttributes );
+		},
+		[ attributes, clientId, setAttributes, sharedAttributes, siblings, updateBlockAttributes ]
+	);
+};
+
+export const withSharedFieldAttributes = sharedAttributes => WrappedComponent => ( {
+	attributes,
+	clientId,
+	setAttributes,
+	...props
+} ) => {
+	const syncAttributes = useSharedFieldAttributes( {
+		attributes,
+		clientId,
+		setAttributes,
+		sharedAttributes,
+	} );
+
+	return (
+		<WrappedComponent
+			attributes={ attributes }
+			clientId={ clientId }
+			setAttributes={ syncAttributes }
+			{ ...props }
+		/>
+	);
+};
diff --git a/projects/plugins/jetpack/modules/contact-form/css/grunion.css b/projects/plugins/jetpack/modules/contact-form/css/grunion.css
index 0496ca8e0b547..47c4feb614524 100644
--- a/projects/plugins/jetpack/modules/contact-form/css/grunion.css
+++ b/projects/plugins/jetpack/modules/contact-form/css/grunion.css
@@ -367,6 +367,16 @@
 	flex-grow: 1;
 }
 
+.contact-form :not(.is-style-outlined):not(.is-style-animated) .grunion-field-wrap .grunion-checkbox-multiple-options,
+.contact-form :not(.is-style-outlined):not(.is-style-animated) .grunion-field-wrap .grunion-radio-options {
+	background-color: var(--jetpack--contact-form--input-background);
+	border-radius: var(--jetpack--contact-form--border-radius);
+	border-color: var(--jetpack--contact-form--border-color);
+	border-style: var(--jetpack--contact-form--border-style);
+	border-width: var(--jetpack--contact-form--border-size);
+	padding: var(--jetpack--contact-form--input-padding, 16px);
+}
+
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label {
 	position: absolute;
 	right: 0;
diff --git a/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php b/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php
index a81446add4d24..84d97e23fb55d 100644
--- a/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php
+++ b/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php
@@ -4183,6 +4183,13 @@ class Grunion_Contact_Form_Field extends Crunion_Contact_Form_Shortcode {
 	 */
 	public $field_styles = '';
 
+	/**
+	 * Styles to be applied to the field option
+	 *
+	 * @var string
+	 */
+	public $option_styles = '';
+
 	/**
 	 * Styles to be applied to the field
 	 *
@@ -4413,24 +4420,27 @@ public function render() {
 			$this->field_styles .= 'border-width: ' . (int) $this->get_attribute( 'borderwidth' ) . 'px;';
 		}
 		if ( is_numeric( $this->get_attribute( 'lineheight' ) ) ) {
-			$this->block_styles .= '--jetpack--contact-form--line-height: ' . esc_attr( $this->get_attribute( 'lineheight' ) ) . ';';
-			$this->field_styles .= 'line-height: ' . (int) $this->get_attribute( 'lineheight' ) . ';';
+			$this->block_styles  .= '--jetpack--contact-form--line-height: ' . esc_attr( $this->get_attribute( 'lineheight' ) ) . ';';
+			$this->field_styles  .= 'line-height: ' . (int) $this->get_attribute( 'lineheight' ) . ';';
+			$this->option_styles .= 'line-height: ' . (int) $this->get_attribute( 'lineheight' ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'bordercolor' ) ) ) {
 			$this->block_styles .= '--jetpack--contact-form--border-color: ' . esc_attr( $this->get_attribute( 'bordercolor' ) ) . ';';
 			$this->field_styles .= 'border-color: ' . esc_attr( $this->get_attribute( 'bordercolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'inputcolor' ) ) ) {
-			$this->block_styles .= '--jetpack--contact-form--text-color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
-			$this->field_styles .= 'color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
+			$this->block_styles  .= '--jetpack--contact-form--text-color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
+			$this->field_styles  .= 'color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
+			$this->option_styles .= 'color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'fieldbackgroundcolor' ) ) ) {
 			$this->block_styles .= '--jetpack--contact-form--input-background: ' . esc_attr( $this->get_attribute( 'fieldbackgroundcolor' ) ) . ';';
 			$this->field_styles .= 'background-color: ' . esc_attr( $this->get_attribute( 'fieldbackgroundcolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'fieldfontsize' ) ) ) {
-			$this->block_styles .= '--jetpack--contact-form--font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
-			$this->field_styles .= 'font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
+			$this->block_styles  .= '--jetpack--contact-form--font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
+			$this->field_styles  .= 'font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
+			$this->option_styles .= 'font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
 		}
 
 		if ( ! empty( $this->get_attribute( 'labelcolor' ) ) ) {
@@ -4705,7 +4715,7 @@ public function render_radio_field( $id, $label, $value, $class, $required, $req
 		$field  = $this->render_label( '', $id, $label, $required, $required_field_text );
 		$field .= '<div class="grunion-radio-options">';
 
-		$field_style = 'style="' . $this->field_styles . '"';
+		$field_style = 'style="' . $this->option_styles . '"';
 
 		foreach ( (array) $this->get_attribute( 'options' ) as $option_index => $option ) {
 			$option = Grunion_Contact_Form_Plugin::strip_tags( $option );
@@ -4757,7 +4767,7 @@ private function render_consent_field( $id, $class ) {
 		$consent_type    = 'explicit' === $this->get_attribute( 'consenttype' ) ? 'explicit' : 'implicit';
 		$consent_message = 'explicit' === $consent_type ? $this->get_attribute( 'explicitconsentmessage' ) : $this->get_attribute( 'implicitconsentmessage' );
 
-		$field = "<label class='grunion-field-label consent consent-" . $consent_type . "'>";
+		$field = "<label class='grunion-field-label consent consent-" . $consent_type . "' style='" . $this->label_styles . "'>";
 
 		if ( 'implicit' === $consent_type ) {
 			$field .= "\t\t<input aria-hidden='true' type='checkbox' checked name='" . esc_attr( $id ) . "' value='" . esc_attr__( 'Yes', 'jetpack' ) . "' style='display:none;' /> \n";
@@ -4786,7 +4796,7 @@ public function render_checkbox_multiple_field( $id, $label, $value, $class, $re
 		$field  = $this->render_label( '', $id, $label, $required, $required_field_text );
 		$field .= '<div class="grunion-checkbox-multiple-options">';
 
-		$field_style = 'style="' . $this->field_styles . '"';
+		$field_style = 'style="' . $this->option_styles . '"';
 
 		foreach ( (array) $this->get_attribute( 'options' ) as $option_index => $option ) {
 			$option = Grunion_Contact_Form_Plugin::strip_tags( $option );
@@ -5044,11 +5054,7 @@ public function render_field( $type, $id, $label, $value, $class, $placeholder,
 		 */
 		$required_field_text = esc_html( apply_filters( 'jetpack_required_field_text', $required_field_text ) );
 
-		$block_style = 'style="';
-		if ( $type === 'select' || in_array( $form_style, array( 'outlined', 'animated' ), true ) ) {
-			$block_style .= $this->block_styles;
-		}
-		$block_style .= '"';
+		$block_style = 'style="' . $this->block_styles . '"';
 
 		$field = "\n<div {$block_style} {$shell_field_class} >\n"; // new in Jetpack 6.8.0
 
diff --git a/projects/plugins/jetpack/modules/contact-form/js/form-styles.js b/projects/plugins/jetpack/modules/contact-form/js/form-styles.js
index 560abd245b4fb..0bcb80895dce2 100644
--- a/projects/plugins/jetpack/modules/contact-form/js/form-styles.js
+++ b/projects/plugins/jetpack/modules/contact-form/js/form-styles.js
@@ -1,11 +1,7 @@
 const FRONTEND_SELECTOR = '.wp-block-jetpack-contact-form-container';
 const EDITOR_SELECTOR = '[data-type="jetpack/contact-form"]';
 
-const iframeCanvas = document.querySelector( 'iframe[name="editor-canvas"]' );
-const doc = iframeCanvas ? iframeCanvas.contentDocument : document;
-const bodyNode = doc.querySelector( 'body' );
-
-//Fallback in case the page load event takes to long to fire up
+//Fallback in case of the page load event takes too long to fire up
 const fallbackTimer = setTimeout( () => {
 	handleFormStyles();
 }, 3000 );
@@ -46,6 +42,10 @@ function generateStyleVariables( selector, outputSelector = 'body' ) {
 		</div>
 	`;
 
+	const iframeCanvas = document.querySelector( 'iframe[name="editor-canvas"]' );
+	const doc = iframeCanvas ? iframeCanvas.contentDocument : document;
+	const bodyNode = doc.querySelector( 'body' );
+
 	setTimeout( () => {
 		clearTimeout( fallbackTimer );
 		bodyNode.classList.add( 'contact-form-styles-loaded' );

From edad05ef535b5e1e3b7cac80448df3db24d9240e Mon Sep 17 00:00:00 2001
From: Clemen <javacodia@gmail.com>
Date: Thu, 23 Feb 2023 16:53:00 +0000
Subject: [PATCH 29/38] CRM: Segment list pagination doesn't work properly
 (#29004)

* Offset is not calculated on SQL query

* changelog

* Improve line for better readability
---
 .../plugins/crm/changelog/segment-list-pagination-not-work  | 4 ++++
 projects/plugins/crm/includes/ZeroBSCRM.AJAX.php            | 4 ++--
 .../plugins/crm/includes/ZeroBSCRM.DAL3.Obj.Segments.php    | 6 ++----
 3 files changed, 8 insertions(+), 6 deletions(-)
 create mode 100644 projects/plugins/crm/changelog/segment-list-pagination-not-work

diff --git a/projects/plugins/crm/changelog/segment-list-pagination-not-work b/projects/plugins/crm/changelog/segment-list-pagination-not-work
new file mode 100644
index 0000000000000..3ec1552c7d32d
--- /dev/null
+++ b/projects/plugins/crm/changelog/segment-list-pagination-not-work
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Segment list pagination is not working correctly
diff --git a/projects/plugins/crm/includes/ZeroBSCRM.AJAX.php b/projects/plugins/crm/includes/ZeroBSCRM.AJAX.php
index 8ff7508bd3f3e..621b945cb4b88 100644
--- a/projects/plugins/crm/includes/ZeroBSCRM.AJAX.php
+++ b/projects/plugins/crm/includes/ZeroBSCRM.AJAX.php
@@ -3976,8 +3976,8 @@ function zeroBSCRM_AJAX_listViewRetrieveData() {
 
 					// } If using pagination, also return total count
 				if ( isset( $listViewParams['pagination'] ) && $listViewParams['pagination'] ) {
-
-					$res['objectcount'] = $zbs->DAL->segments->getSegmentsCountIncParams( $ownerID, $per_page, $page_number, false, $possibleSearchTerm, $inArray, $sortField, $sortOrder );
+					// phpcs:ignore WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase, WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
+					$res['objectcount'] = (int) $zbs->DAL->segments->getSegmentsCountIncParams( $ownerID, $per_page, $page_number, false, $possibleSearchTerm, $inArray, $sortField, $sortOrder );
 
 				}
 
diff --git a/projects/plugins/crm/includes/ZeroBSCRM.DAL3.Obj.Segments.php b/projects/plugins/crm/includes/ZeroBSCRM.DAL3.Obj.Segments.php
index 237037c200851..94882c724cfcf 100644
--- a/projects/plugins/crm/includes/ZeroBSCRM.DAL3.Obj.Segments.php
+++ b/projects/plugins/crm/includes/ZeroBSCRM.DAL3.Obj.Segments.php
@@ -232,10 +232,8 @@ public function getSegments($ownerID=-1,$perPage=10,$page=0,$withConditions=fals
                         $page = (int)$page-1;
                         if ($page < 0) $page = 0;
 
-                        // check params realistic
-                        // todo, for now, brute pass
-                        $orderByStr .= ' LIMIT '.(int)$page.','.(int)$perPage;
-
+						// phpcs:ignore WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase
+						$orderByStr .= sprintf( ' LIMIT %d, %d ', (int) $page * (int) $perPage, (int) $perPage );
                     }
 
                     // append to sql

From 11495077be438fadbac238e84371aaab7cb2cf8c Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Thu, 23 Feb 2023 09:55:15 -0700
Subject: [PATCH 30/38] WAF: Add basic integration tests (#29005)

---
 .../waf/changelog/add-waf-integration-tests   |  5 ++
 projects/packages/waf/composer.json           |  1 +
 .../waf/tests/php/integration/bootstrap.php   | 24 ++++++++
 .../php/integration/test-waf-activation.php   | 51 +++++++++++++++-
 .../integration/test-waf-compatibility.php    | 58 +++++++++++++++++++
 .../tests/php/integration/test-waf-runner.php | 56 ++++++++++++++++++
 .../changelog/add-waf-activation-tests        |  5 ++
 projects/plugins/jetpack/composer.lock        |  3 +-
 .../changelog/add-waf-activation-tests        |  5 ++
 projects/plugins/protect/composer.lock        |  3 +-
 10 files changed, 207 insertions(+), 4 deletions(-)
 create mode 100644 projects/packages/waf/changelog/add-waf-integration-tests
 create mode 100644 projects/packages/waf/tests/php/integration/test-waf-compatibility.php
 create mode 100644 projects/packages/waf/tests/php/integration/test-waf-runner.php
 create mode 100644 projects/plugins/jetpack/changelog/add-waf-activation-tests
 create mode 100644 projects/plugins/protect/changelog/add-waf-activation-tests

diff --git a/projects/packages/waf/changelog/add-waf-integration-tests b/projects/packages/waf/changelog/add-waf-integration-tests
new file mode 100644
index 0000000000000..1298451329e06
--- /dev/null
+++ b/projects/packages/waf/changelog/add-waf-integration-tests
@@ -0,0 +1,5 @@
+Significance: patch
+Type: added
+Comment: Add integration tests.
+
+
diff --git a/projects/packages/waf/composer.json b/projects/packages/waf/composer.json
index 146829152b36e..c05627863f4d9 100644
--- a/projects/packages/waf/composer.json
+++ b/projects/packages/waf/composer.json
@@ -5,6 +5,7 @@
 	"license": "GPL-2.0-or-later",
 	"require": {
 		"automattic/jetpack-connection": "@dev",
+		"automattic/jetpack-constants": "@dev",
 		"automattic/jetpack-status": "@dev",
 		"wikimedia/aho-corasick": "^1.0"
 	},
diff --git a/projects/packages/waf/tests/php/integration/bootstrap.php b/projects/packages/waf/tests/php/integration/bootstrap.php
index 5751e22ab1eb1..a6c06885c8da1 100644
--- a/projects/packages/waf/tests/php/integration/bootstrap.php
+++ b/projects/packages/waf/tests/php/integration/bootstrap.php
@@ -9,4 +9,28 @@
  * Include the composer autoloader.
  */
 require_once __DIR__ . '/../../../vendor/autoload.php';
+
+/**
+ * Load WorDBless.
+ */
 \WorDBless\Load::load();
+
+/**
+ * Patch the WorDBless custom $wpdb with a `db_server_info` method,
+ * so that the WAF can use `dbDelta()` without errors.
+ *
+ * @todo Remove once https://github.com/Automattic/wordbless/pull/63 is merged.
+ */
+class Waf_Tests_WPDB extends \Db_Less_Wpdb {
+	/**
+	 * Mock for `wpdb::db_server_info`.
+	 *
+	 * @return bool Always false.
+	 */
+	public function db_server_info() {
+		return false;
+	}
+}
+
+global $wpdb;
+$wpdb = new Waf_Tests_WPDB(); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
diff --git a/projects/packages/waf/tests/php/integration/test-waf-activation.php b/projects/packages/waf/tests/php/integration/test-waf-activation.php
index 0121efc1420bd..d87940c27522a 100644
--- a/projects/packages/waf/tests/php/integration/test-waf-activation.php
+++ b/projects/packages/waf/tests/php/integration/test-waf-activation.php
@@ -5,11 +5,14 @@
  * @package automattic/jetpack-waf
  */
 
+use Automattic\Jetpack\Constants;
 use Automattic\Jetpack\Waf\Waf_Initializer;
+use Automattic\Jetpack\Waf\Waf_Rules_Manager;
 use Automattic\Jetpack\Waf\Waf_Runner;
+use Automattic\Jetpack\Waf\Waf_Standalone_Bootstrap;
 
 /**
- * Activation tests.
+ * Integration tests for the firewall activation process.
  */
 final class WafActivationTest extends WorDBless\BaseTestCase {
 
@@ -22,15 +25,59 @@ protected function set_up() {
 		// Set a blog token and id so the site is connected.
 		Jetpack_Options::update_option( 'blog_token', 'asdasd.123123' );
 		Jetpack_Options::update_option( 'id', 1234 );
+
+		// Set the WPCOM JSON API base URL so the site will attempt to make requests.
+		Constants::set_constant( 'JETPACK__WPCOM_JSON_API_BASE', 'https://public-api.wordpress.com' );
+	}
+
+	/**
+	 * Return a sample wpcom rules response.
+	 *
+	 * @return array
+	 */
+	public function return_sample_response() {
+		$sample_response = (object) array(
+			'data' => "<?php\n", // empty rules file
+		);
+
+		return array(
+			'body'     => wp_json_encode( $sample_response ),
+			'response' => array(
+				'code'    => 200,
+				'message' => '',
+			),
+		);
 	}
 
 	/**
 	 * Test WAF activation.
 	 */
 	public function testActivation() {
-		Waf_Initializer::on_activation();
+		// Mock the WPCOM request for retrieving the automatic rules.
+		add_filter( 'pre_http_request', array( $this, 'return_sample_response' ) );
+
+		// Initialize the firewall.
+		$activated = Waf_Initializer::on_activation();
+
+		// Ensure the WAF was activated successfully.
+		$this->assertTrue( $activated );
 
+		// Ensure default options were set.
+		$this->assertSame( get_option( Waf_Runner::SHARE_DATA_OPTION_NAME ), true );
 		$this->assertSame( get_option( Waf_Runner::MODE_OPTION_NAME ), 'normal' );
+		$this->assertSame( get_option( Waf_Rules_Manager::AUTOMATIC_RULES_ENABLED_OPTION_NAME ), false );
+
+		// Ensure the rule files were generated.
+		$this->assertFileExists( Waf_Runner::get_waf_file_path( Waf_Rules_Manager::RULES_ENTRYPOINT_FILE ) );
+		$this->assertFileExists( Waf_Runner::get_waf_file_path( Waf_Rules_Manager::AUTOMATIC_RULES_FILE ) );
+		$this->assertFileExists( Waf_Runner::get_waf_file_path( Waf_Rules_Manager::IP_ALLOW_RULES_FILE ) );
+		$this->assertFileExists( Waf_Runner::get_waf_file_path( Waf_Rules_Manager::IP_BLOCK_RULES_FILE ) );
+
+		// Ensure the bootstrap file was generated.
+		$this->assertFileExists( ( new Waf_Standalone_Bootstrap() )->get_bootstrap_file_path() );
+
+		// Clean up
+		remove_filter( 'pre_http_request', array( $this, 'return_sample_response' ) );
 	}
 
 }
diff --git a/projects/packages/waf/tests/php/integration/test-waf-compatibility.php b/projects/packages/waf/tests/php/integration/test-waf-compatibility.php
new file mode 100644
index 0000000000000..ba7c8aa7fdf2b
--- /dev/null
+++ b/projects/packages/waf/tests/php/integration/test-waf-compatibility.php
@@ -0,0 +1,58 @@
+<?php
+/**
+ * Compatibility tests.
+ *
+ * @package automattic/jetpack-waf
+ */
+
+use Automattic\Jetpack\Waf\Waf_Initializer;
+use Automattic\Jetpack\Waf\Waf_Rules_Manager;
+use Automattic\Jetpack\Waf\Waf_Runner;
+
+/**
+ * Integration tests for the backwards-compatibility of the package.
+ */
+final class WafCompatibilityTest extends WorDBless\BaseTestCase {
+
+	/**
+	 * Test setup.
+	 *
+	 * @before
+	 */
+	public function set_up() {
+		// Add the WAF module to the available modules.
+		add_filter( 'jetpack_get_available_modules', array( $this, 'add_waf_to_available_modules' ), 10, 1 );
+		add_filter( 'jetpack_get_available_standalone_modules', array( $this, 'add_waf_to_available_modules' ), 10, 1 );
+
+		// Initialize the firewall.
+		Waf_Initializer::init();
+	}
+
+	/**
+	 * Add "waf" to the available Jetpack modules.
+	 *
+	 * @param array $modules The available modules.
+	 * @return array The available modules, including "waf".
+	 */
+	public function add_waf_to_available_modules( $modules ) {
+		if ( ! in_array( 'waf', $modules, true ) ) {
+			$modules[] = 'waf';
+		}
+		return $modules;
+	}
+
+	/**
+	 * Test that the automatic rules option inherits from the module status when it is doesn't exist.
+	 */
+	public function testAutomaticRulesOptionInheritsFromModuleStatus() {
+		// Enable the WAF module.
+		Waf_Runner::enable();
+
+		// Manually delete the automatic rules option to simulate a site that installed the WAF before the automatic rules option was introduced.
+		delete_option( Waf_Rules_Manager::AUTOMATIC_RULES_ENABLED_OPTION_NAME );
+
+		// Check that the automatic rules option is enabled by default.
+		$this->assertTrue( Waf_Runner::is_enabled() );
+	}
+
+}
diff --git a/projects/packages/waf/tests/php/integration/test-waf-runner.php b/projects/packages/waf/tests/php/integration/test-waf-runner.php
new file mode 100644
index 0000000000000..870602e833468
--- /dev/null
+++ b/projects/packages/waf/tests/php/integration/test-waf-runner.php
@@ -0,0 +1,56 @@
+<?php
+/**
+ * Runner tests.
+ *
+ * @package automattic/jetpack-waf
+ */
+
+use Automattic\Jetpack\Waf\Waf_Initializer;
+use Automattic\Jetpack\Waf\Waf_Runner;
+
+/**
+ * Integration tests for the firewall runner.
+ */
+final class WafRunsTest extends WorDBless\BaseTestCase {
+
+	/**
+	 * Test setup.
+	 */
+	public function set_up() {
+		// Set a blog token and id so the site is connected.
+		Jetpack_Options::update_option( 'blog_token', 'asdasd.123123' );
+		Jetpack_Options::update_option( 'id', 1234 );
+
+		// Set the WPCOM JSON API base URL so the site will attempt to make requests.
+		Constants::set_constant( 'JETPACK__WPCOM_JSON_API_BASE', 'https://public-api.wordpress.com' );
+
+		// Add the WAF module to the available modules.
+		add_filter( 'jetpack_get_available_modules', array( $this, 'add_waf_to_available_modules' ), 10, 1 );
+		add_filter( 'jetpack_get_available_standalone_modules', array( $this, 'add_waf_to_available_modules' ), 10, 1 );
+
+		// Initialize the firewall.
+		Waf_Initializer::init();
+	}
+
+	/**
+	 * Add "waf" to the available Jetpack modules.
+	 *
+	 * @param array $modules The available modules.
+	 * @return array The available modules, including "waf".
+	 */
+	public function add_waf_to_available_modules( $modules ) {
+		if ( ! in_array( 'waf', $modules, true ) ) {
+			$modules[] = 'waf';
+		}
+		return $modules;
+	}
+
+	/**
+	 * Test that the firewall runs.
+	 */
+	public function testWafRuns() {
+		Waf_Runner::run();
+		$this->assertTrue( defined( 'JETPACK_WAF_RUN' ) );
+	}
+
+}
diff --git a/projects/plugins/jetpack/changelog/add-waf-activation-tests b/projects/plugins/jetpack/changelog/add-waf-activation-tests
new file mode 100644
index 0000000000000..b8670867378dc
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-waf-activation-tests
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updated composer.lock
+
+
diff --git a/projects/plugins/jetpack/composer.lock b/projects/plugins/jetpack/composer.lock
index 72ff133053369..b1159eb419f5c 100644
--- a/projects/plugins/jetpack/composer.lock
+++ b/projects/plugins/jetpack/composer.lock
@@ -2304,10 +2304,11 @@
             "dist": {
                 "type": "path",
                 "url": "../../packages/waf",
-                "reference": "819c5345676b2830fad4ec956a3c680d44778d1b"
+                "reference": "9e0055457442062de1b4b955db24a02b8191c8a4"
             },
             "require": {
                 "automattic/jetpack-connection": "@dev",
+                "automattic/jetpack-constants": "@dev",
                 "automattic/jetpack-status": "@dev",
                 "wikimedia/aho-corasick": "^1.0"
             },
diff --git a/projects/plugins/protect/changelog/add-waf-activation-tests b/projects/plugins/protect/changelog/add-waf-activation-tests
new file mode 100644
index 0000000000000..11fbe6a176cca
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-waf-activation-tests
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock
+
+
diff --git a/projects/plugins/protect/composer.lock b/projects/plugins/protect/composer.lock
index f1673dc3dc064..410f6d248617c 100644
--- a/projects/plugins/protect/composer.lock
+++ b/projects/plugins/protect/composer.lock
@@ -1283,10 +1283,11 @@
             "dist": {
                 "type": "path",
                 "url": "../../packages/waf",
-                "reference": "819c5345676b2830fad4ec956a3c680d44778d1b"
+                "reference": "9e0055457442062de1b4b955db24a02b8191c8a4"
             },
             "require": {
                 "automattic/jetpack-connection": "@dev",
+                "automattic/jetpack-constants": "@dev",
                 "automattic/jetpack-status": "@dev",
                 "wikimedia/aho-corasick": "^1.0"
             },

From 58a04490e84c940ceeb2105eb0bdbb7f333e665b Mon Sep 17 00:00:00 2001
From: Calypso Bot <sysops+ghmatticbot@automattic.com>
Date: Thu, 23 Feb 2023 18:39:02 +0100
Subject: [PATCH 31/38] Update dependency @automattic/calypso-color-schemes to
 v3 (#29117)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 pnpm-lock.yaml                                | 24 +++++++++----------
 ...ovate-automattic-calypso-color-schemes-3.x |  4 ++++
 projects/packages/search/package.json         |  2 +-
 ...ovate-automattic-calypso-color-schemes-3.x |  4 ++++
 projects/packages/videopress/package.json     |  2 +-
 ...ovate-automattic-calypso-color-schemes-3.x |  4 ++++
 projects/packages/wordads/package.json        |  2 +-
 ...ovate-automattic-calypso-color-schemes-3.x |  4 ++++
 projects/plugins/jetpack/package.json         |  2 +-
 ...ovate-automattic-calypso-color-schemes-3.x |  4 ++++
 projects/plugins/social/package.json          |  2 +-
 11 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 projects/packages/search/changelog/renovate-automattic-calypso-color-schemes-3.x
 create mode 100644 projects/packages/videopress/changelog/renovate-automattic-calypso-color-schemes-3.x
 create mode 100644 projects/packages/wordads/changelog/renovate-automattic-calypso-color-schemes-3.x
 create mode 100644 projects/plugins/jetpack/changelog/renovate-automattic-calypso-color-schemes-3.x
 create mode 100644 projects/plugins/social/changelog/renovate-automattic-calypso-color-schemes-3.x

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c109cd3a8651..2b47332618b99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1727,8 +1727,8 @@ importers:
   projects/packages/search:
     dependencies:
       '@automattic/calypso-color-schemes':
-        specifier: 2.1.1
-        version: 2.1.1
+        specifier: 3.0.0
+        version: 3.0.0
       '@automattic/color-studio':
         specifier: 2.5.0
         version: 2.5.0
@@ -2000,8 +2000,8 @@ importers:
         version: 2.3.0
     devDependencies:
       '@automattic/calypso-color-schemes':
-        specifier: 2.1.1
-        version: 2.1.1
+        specifier: 3.0.0
+        version: 3.0.0
       '@automattic/jetpack-webpack-config':
         specifier: workspace:*
         version: link:../../js-packages/webpack-config
@@ -2090,8 +2090,8 @@ importers:
   projects/packages/wordads:
     dependencies:
       '@automattic/calypso-color-schemes':
-        specifier: 2.1.1
-        version: 2.1.1
+        specifier: 3.0.0
+        version: 3.0.0
       '@automattic/color-studio':
         specifier: 2.5.0
         version: 2.5.0
@@ -2433,8 +2433,8 @@ importers:
   projects/plugins/jetpack:
     dependencies:
       '@automattic/calypso-color-schemes':
-        specifier: 2.1.1
-        version: 2.1.1
+        specifier: 3.0.0
+        version: 3.0.0
       '@automattic/components':
         specifier: 2.0.1
         version: 2.0.1(@wordpress/data@8.3.0)(react-dom@18.2.0)(react@18.2.0)
@@ -3033,8 +3033,8 @@ importers:
         version: 18.2.0(react@18.2.0)
     devDependencies:
       '@automattic/calypso-color-schemes':
-        specifier: 2.1.1
-        version: 2.1.1
+        specifier: 3.0.0
+        version: 3.0.0
       '@automattic/color-studio':
         specifier: 2.5.0
         version: 2.5.0
@@ -3619,8 +3619,8 @@ packages:
     resolution: {integrity: sha512-dRmLP0Ytf2oDNbUbO8MXLKYnPZfqhtFQ8v1hgDo2Fde1Y0bUz2Ll1UmUOHdyZudnrN/8Zt95cG/fIOJ0dxHi8Q==}
     dev: false
 
-  /@automattic/calypso-color-schemes@2.1.1:
-    resolution: {integrity: sha512-X5gmQEDJVtw8N9NARgZGM/pmalfapV8ZyRzEn2o0sCLmTAXGYg6A28ucLCQdBIn1l9t2rghBDFkY71vyqjyyFQ==}
+  /@automattic/calypso-color-schemes@3.0.0:
+    resolution: {integrity: sha512-nebu4pXXN1BrUhTAZZmrHhjubsHcQF81CEx/c29MSQHeamgnRrhlgiqREsU26KwwXQkcDPB6x84Dhtv90vQifQ==}
 
   /@automattic/calypso-url@1.0.0:
     resolution: {integrity: sha512-d2odYhxkIFlpCcJ7r+FDI7yBAcm86gtDHteYLcijkOu/2cM+u5D47x/ttYR1+dux9RtT12usBTNc0gGHb89hkA==}
diff --git a/projects/packages/search/changelog/renovate-automattic-calypso-color-schemes-3.x b/projects/packages/search/changelog/renovate-automattic-calypso-color-schemes-3.x
new file mode 100644
index 0000000000000..c47cb18e82997
--- /dev/null
+++ b/projects/packages/search/changelog/renovate-automattic-calypso-color-schemes-3.x
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/search/package.json b/projects/packages/search/package.json
index 35adb2b89caef..b09a821147576 100644
--- a/projects/packages/search/package.json
+++ b/projects/packages/search/package.json
@@ -37,7 +37,7 @@
 		"yarn": "use pnpm instead - see docs/yarn-upgrade.md"
 	},
 	"dependencies": {
-		"@automattic/calypso-color-schemes": "2.1.1",
+		"@automattic/calypso-color-schemes": "3.0.0",
 		"@automattic/color-studio": "2.5.0",
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-analytics": "workspace:*",
diff --git a/projects/packages/videopress/changelog/renovate-automattic-calypso-color-schemes-3.x b/projects/packages/videopress/changelog/renovate-automattic-calypso-color-schemes-3.x
new file mode 100644
index 0000000000000..c47cb18e82997
--- /dev/null
+++ b/projects/packages/videopress/changelog/renovate-automattic-calypso-color-schemes-3.x
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json
index ffcfc7de2a2e3..78170773849ba 100644
--- a/projects/packages/videopress/package.json
+++ b/projects/packages/videopress/package.json
@@ -23,7 +23,7 @@
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
 	},
 	"devDependencies": {
-		"@automattic/calypso-color-schemes": "2.1.1",
+		"@automattic/calypso-color-schemes": "3.0.0",
 		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "7.20.12",
diff --git a/projects/packages/wordads/changelog/renovate-automattic-calypso-color-schemes-3.x b/projects/packages/wordads/changelog/renovate-automattic-calypso-color-schemes-3.x
new file mode 100644
index 0000000000000..c47cb18e82997
--- /dev/null
+++ b/projects/packages/wordads/changelog/renovate-automattic-calypso-color-schemes-3.x
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/wordads/package.json b/projects/packages/wordads/package.json
index d5cb6a61bf9e0..481a1baaf60c2 100644
--- a/projects/packages/wordads/package.json
+++ b/projects/packages/wordads/package.json
@@ -30,7 +30,7 @@
 		"watch": "concurrently 'pnpm:build-dashboard --watch'"
 	},
 	"dependencies": {
-		"@automattic/calypso-color-schemes": "2.1.1",
+		"@automattic/calypso-color-schemes": "3.0.0",
 		"@automattic/color-studio": "2.5.0",
 		"@automattic/jetpack-analytics": "workspace:*",
 		"@automattic/jetpack-api": "workspace:*",
diff --git a/projects/plugins/jetpack/changelog/renovate-automattic-calypso-color-schemes-3.x b/projects/plugins/jetpack/changelog/renovate-automattic-calypso-color-schemes-3.x
new file mode 100644
index 0000000000000..1eaea6a769e84
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/renovate-automattic-calypso-color-schemes-3.x
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Updated package dependencies.
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index 7e380b67386a5..ae15be281ad97 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -44,7 +44,7 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@automattic/calypso-color-schemes": "2.1.1",
+		"@automattic/calypso-color-schemes": "3.0.0",
 		"@automattic/components": "2.0.1",
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-analytics": "workspace:*",
diff --git a/projects/plugins/social/changelog/renovate-automattic-calypso-color-schemes-3.x b/projects/plugins/social/changelog/renovate-automattic-calypso-color-schemes-3.x
new file mode 100644
index 0000000000000..c47cb18e82997
--- /dev/null
+++ b/projects/plugins/social/changelog/renovate-automattic-calypso-color-schemes-3.x
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/plugins/social/package.json b/projects/plugins/social/package.json
index 9c4826e1ffc41..4df337832e707 100644
--- a/projects/plugins/social/package.json
+++ b/projects/plugins/social/package.json
@@ -44,7 +44,7 @@
 		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
-		"@automattic/calypso-color-schemes": "2.1.1",
+		"@automattic/calypso-color-schemes": "3.0.0",
 		"@automattic/color-studio": "2.5.0",
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "7.20.12",

From 036f21ce4d159625a8825f968f4cfe110916b291 Mon Sep 17 00:00:00 2001
From: Fernando Fernandes <fernandofernand3s@gmail.com>
Date: Thu, 23 Feb 2023 15:30:12 -0300
Subject: [PATCH 32/38] JS Components: Add Mastodon icon (#28987)

Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>
---
 .../components/changelog/update-add-mastodon-icon   |  4 ++++
 .../components/components/icons/README.md           |  6 +++++-
 .../components/components/icons/index.tsx           | 13 +++++++++++++
 .../components/components/icons/style.module.scss   |  3 +++
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 projects/js-packages/components/changelog/update-add-mastodon-icon

diff --git a/projects/js-packages/components/changelog/update-add-mastodon-icon b/projects/js-packages/components/changelog/update-add-mastodon-icon
new file mode 100644
index 0000000000000..8540cdc239dc7
--- /dev/null
+++ b/projects/js-packages/components/changelog/update-add-mastodon-icon
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+JS Components: Add Mastodon icon
diff --git a/projects/js-packages/components/components/icons/README.md b/projects/js-packages/components/components/icons/README.md
index e8ffb34ac849f..f8d87ac564e5a 100644
--- a/projects/js-packages/components/components/icons/README.md
+++ b/projects/js-packages/components/components/icons/README.md
@@ -21,6 +21,7 @@ Available slugs are:
 * linkedin
 * tumblr
 * google
+* mastodon
 
 ```es6
 import {
@@ -52,6 +53,7 @@ return (
 * LinkedinIcon
 * TumblrIcon
 * GoogleIcon
+* MastodonIcon
 
 ```es6
 import {
@@ -69,7 +71,8 @@ import {
 	TwitterIcon,
 	LinkedinIcon,
 	TumblrIcon,
-	GoogleIcon
+	GoogleIcon,
+	MastodonIcon
 } from '@automattic/jetpack-components';
 
 return (
@@ -89,6 +92,7 @@ return (
 		<LinkedinIcon />
 		<TumblrIcon />
 		<GoogleIcon />
+		<MastodonIcon />
 	</div>
 )
 ```
diff --git a/projects/js-packages/components/components/icons/index.tsx b/projects/js-packages/components/components/icons/index.tsx
index 9301a2acc88cd..e7b1cb206736d 100644
--- a/projects/js-packages/components/components/icons/index.tsx
+++ b/projects/js-packages/components/components/icons/index.tsx
@@ -283,6 +283,18 @@ export const GoogleIcon: React.FC< SocialIconWrapperProps > = ( { fill, size, cl
 	);
 };
 
+export const MastodonIcon: React.FC< SocialIconWrapperProps > = ( { fill, size, className } ) => {
+	return (
+		<SocialIconWrapper
+			fill={ fill }
+			size={ size }
+			className={ classNames( styles.mastodon, className ) }
+		>
+			<Path d="M 19.997205,6.2868955 C 19.729197,4.3162778 17.992912,2.7633017 15.93468,2.4623753 15.587434,2.4115195 14.271759,2.2264681 11.224008,2.2264681 h -0.02277 c -3.0485688,0 -3.7026204,0.1850577 -4.0498676,0.2359072 C 5.1504449,2.7549655 3.3231548,4.1503966 2.879815,6.1443318 2.6665754,7.1263038 2.6438193,8.2149794 2.6834329,9.2136207 c 0.056471,1.4321143 0.067433,2.8617113 0.1989115,4.2879943 0.090908,0.947406 0.2494696,1.887266 0.4745239,2.812521 0.4214237,1.708868 2.1273496,3.130966 3.7987144,3.71116 1.7894479,0.605052 3.7138403,0.705478 5.5577463,0.290088 0.202828,-0.04667 0.403445,-0.100873 0.601781,-0.162549 0.447558,-0.140863 0.972662,-0.298434 1.358683,-0.575188 0.0052,-0.004 0.0097,-0.0089 0.01266,-0.01471 0.0031,-0.0056 0.0047,-0.01218 0.005,-0.01866 v -1.382076 c -9.4e-5,-0.006 -0.0016,-0.01202 -0.0043,-0.01754 -0.0027,-0.0054 -0.0067,-0.01028 -0.01155,-0.01392 -0.0049,-0.0038 -0.01044,-0.0063 -0.01648,-0.0078 -0.006,-0.0013 -0.01218,-0.0013 -0.01825,7.1e-5 -1.181368,0.279106 -2.391962,0.419012 -3.606552,0.416801 -2.0902554,0 -2.6524392,-0.981126 -2.8134375,-1.3896 -0.1293933,-0.353009 -0.2115739,-0.721231 -0.2444221,-1.095331 -3.29e-4,-0.0063 8.463e-4,-0.0125 0.00348,-0.01832 0.00253,-0.0056 0.00649,-0.01077 0.011389,-0.01471 0.0049,-0.004 0.010755,-0.0068 0.016957,-0.0081 0.00617,-0.0014 0.012655,-0.0012 0.018808,3.52e-4 1.1616831,0.277201 2.3525266,0.417106 3.5475526,0.416801 0.287408,0 0.573966,0 0.861395,-0.0074 1.201893,-0.03335 2.468685,-0.0942 3.6512,-0.322606 0.02952,-0.0058 0.059,-0.01091 0.0843,-0.01833 1.865209,-0.354279 3.640245,-1.466278 3.820617,-4.282163 0.0068,-0.110869 0.0236,-1.161191 0.0236,-1.276219 8.46e-4,-0.390958 0.127273,-2.7733487 -0.01856,-4.2371335 z m -2.87074,7.0263315 H 15.165179 V 8.5617567 c 0,-1.0003116 -0.421434,-1.5104614 -1.278618,-1.5104614 -0.942305,0 -1.414292,0.6035217 -1.414292,1.7955379 V 11.44764 H 10.522764 V 8.8468332 c 0,-1.1920162 -0.472832,-1.7955379 -1.4151372,-1.7955379 -0.8521293,0 -1.2777701,0.5101498 -1.2786179,1.5104614 V 13.313227 H 5.8693944 V 8.4175496 c 0,-1.0003133 0.2582014,-1.7949986 0.7745804,-2.3840846 0.5326766,-0.587672 1.2314038,-0.8894211 2.0986981,-0.8894211 1.003817,0 1.7623841,0.3817657 2.2680911,1.1445204 l 0.488023,0.8102521 0.488846,-0.8102521 c 0.505705,-0.7627547 1.264275,-1.1445204 2.26642,-1.1445204 0.866449,0 1.565152,0.3017491 2.099521,0.8894211 0.516404,0.5885211 0.774583,1.3832066 0.774583,2.3840846 z" />
+		</SocialIconWrapper>
+	);
+};
+
 const jetpackIcons = {
 	'anti-spam': AntiSpamIcon,
 	backup: BackupIcon,
@@ -304,6 +316,7 @@ const socialIcons = {
 	linkedin: LinkedinIcon,
 	tumblr: TumblrIcon,
 	google: GoogleIcon,
+	mastodon: MastodonIcon,
 };
 
 const iconsMap = {
diff --git a/projects/js-packages/components/components/icons/style.module.scss b/projects/js-packages/components/components/icons/style.module.scss
index ea02ebfa8edeb..68d8e7f415399 100644
--- a/projects/js-packages/components/components/icons/style.module.scss
+++ b/projects/js-packages/components/components/icons/style.module.scss
@@ -27,5 +27,8 @@
 	&.google {
 		fill: var( --color-gplus );
 	}
+	&.mastodon {
+		fill: var( --color-mastodon );
+	}
 }
 

From 4515e06f911373b3fd0ca90838682ec658ae93ff Mon Sep 17 00:00:00 2001
From: Steve D <33553323+sdixon194@users.noreply.github.com>
Date: Thu, 23 Feb 2023 13:53:03 -0500
Subject: [PATCH 33/38] Fix Backup Versioning (#29133)

---
 projects/plugins/backup/changelog/fix-backup-versioning | 4 ++++
 projects/plugins/backup/composer.json                   | 8 ++++----
 projects/plugins/backup/composer.lock                   | 2 +-
 projects/plugins/backup/jetpack-backup.php              | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 projects/plugins/backup/changelog/fix-backup-versioning

diff --git a/projects/plugins/backup/changelog/fix-backup-versioning b/projects/plugins/backup/changelog/fix-backup-versioning
new file mode 100644
index 0000000000000..5429a53137d97
--- /dev/null
+++ b/projects/plugins/backup/changelog/fix-backup-versioning
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixes the plugin's versioning so it actually uses WordPress versioning
diff --git a/projects/plugins/backup/composer.json b/projects/plugins/backup/composer.json
index 181d1ed115bae..ddbbdab4cdd2c 100644
--- a/projects/plugins/backup/composer.json
+++ b/projects/plugins/backup/composer.json
@@ -34,7 +34,7 @@
 	"minimum-stability": "dev",
 	"prefer-stable": true,
 	"config": {
-		"autoloader-suffix": "9559eef123208b7d1b9c15b978567267_backupⓥ1_4_5_alpha",
+		"autoloader-suffix": "9559eef123208b7d1b9c15b978567267_backupⓥ1_5_alpha",
 		"allow-plugins": {
 			"automattic/jetpack-autoloader": true,
 			"automattic/jetpack-composer-plugin": true
@@ -46,11 +46,11 @@
 		"autotagger": {
 			"v": false
 		},
+		"changelogger": {
+			"versioning": "wordpress"
+		},
 		"release-branch-prefix": "jetpack",
 		"wp-plugin-slug": "jetpack-backup",
 		"wp-svn-autopublish": true
-	},
-	"changelogger": {
-		"versioning": "wordpress"
 	}
 }
diff --git a/projects/plugins/backup/composer.lock b/projects/plugins/backup/composer.lock
index 0ea528381874d..2e9bd649abce5 100644
--- a/projects/plugins/backup/composer.lock
+++ b/projects/plugins/backup/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "17713a49a048dad36b8a2cec52db481f",
+    "content-hash": "ca94c69eb8cb04e34a717469b0851cd6",
     "packages": [
         {
             "name": "automattic/jetpack-a8c-mc-stats",
diff --git a/projects/plugins/backup/jetpack-backup.php b/projects/plugins/backup/jetpack-backup.php
index 80aaca00964e2..04e076e14485a 100644
--- a/projects/plugins/backup/jetpack-backup.php
+++ b/projects/plugins/backup/jetpack-backup.php
@@ -4,7 +4,7 @@
  * Plugin Name: Jetpack VaultPress Backup
  * Plugin URI: https://jetpack.com/jetpack-backup
  * Description: Easily restore or download a backup of your site from a specific moment in time.
- * Version: 1.4.5-alpha
+ * Version: 1.5-alpha
  * Author: Automattic
  * Author URI: https://jetpack.com/
  * License: GPLv2 or later

From f222193f9f332e746ff85d2e6a1721e8f6cf95f2 Mon Sep 17 00:00:00 2001
From: Samiff <samiff@users.noreply.github.com>
Date: Thu, 23 Feb 2023 13:02:53 -0700
Subject: [PATCH 34/38] jetpack-mu-wpcom: add GH test reminder (#28476)

* [not verified] jetpack-mu-wpcom: add GH test reminder

* Simplify return and cleanup comments

* Rename variable/function for clarity
---
 .../check-test-reminder-comment.js            | 50 ++++++++++++-------
 .github/workflows/build.yml                   | 25 ++++++----
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/.github/files/build-reminder-comment/check-test-reminder-comment.js b/.github/files/build-reminder-comment/check-test-reminder-comment.js
index 69a9eef212bf1..f9f8a8f4df83a 100644
--- a/.github/files/build-reminder-comment/check-test-reminder-comment.js
+++ b/.github/files/build-reminder-comment/check-test-reminder-comment.js
@@ -6,25 +6,36 @@ const getCheckComments = require( './get-check-comments.js' );
  * Does the PR touch anything that needs testing on WordPress.com.
  *
  * Currently we look whether process.env.CHANGED contains `plugins/jetpack`,
- * meaning that Jetpack is being built.
+ * meaning that Jetpack is being built. Or `packages/jetpack-mu-wpcom`,
+ * for the jetpack-mu-wpcom-plugin used on WordPress.com is being built.
  *
  * @param {GitHub} github  - Initialized Octokit REST client.
  * @param {string} owner   - Repository owner.
  * @param {string} repo    - Repository name.
  * @param {string} number  - PR number.
  * @param {Core}   core    - A reference to the @actions/core package
- * @returns {Promise<boolean>} Promise resolving to a boolean if the PR touches something that needs testing.
+ * @returns {Promise} Promise resolving to an array of project strings needing testing.
  */
-async function isTouchingSomethingNeedingTesting( github, owner, repo, number, core ) {
+async function touchedProjectsNeedingTesting( github, owner, repo, number, core ) {
 	const changed = JSON.parse( process.env.CHANGED );
+	const projects = [];
 
 	if ( changed[ 'plugins/jetpack' ] ) {
 		core.info( 'Build: Jetpack is being built, testing needed' );
-		return true;
+		projects.push( 'jetpack' );
+	}
+
+	if ( changed[ 'packages/jetpack-mu-wpcom' ] ) {
+		core.info( 'Build: jetpack-mu-wpcom is being built, testing needed' );
+		projects.push( 'jetpack-mu-wpcom-plugin' );
+	}
+
+	if ( projects.length ) {
+		return projects;
 	}
 
 	core.info( 'Build: Nothing that needs testing was found' );
-	return false;
+	return projects;
 }
 
 /**
@@ -35,16 +46,18 @@ async function isTouchingSomethingNeedingTesting( github, owner, repo, number, c
  * @param {github} github  - Pre-authenticated octokit/rest.js client with pagination plugins
  * @param {object} context - Context of the workflow run
  * @param {core}   core    - A reference to the @actions/core package
- * @returns {Promise<number>} Promise resolving to a comment ID, or 0 if no comment is found.
+ * @returns {Promise} Promise resolving to an object with the following properties:
+ * - {commentId} - a comment ID, or 0 if no comment is found.
+ * - {projects} - an array of project strings needing testing.
  */
 async function checkTestReminderComment( github, context, core ) {
 	const { repo, issue } = context;
 	const { owner, repo: repoName } = repo;
 	const { TEST_COMMENT_INDICATOR } = process.env;
+	const data = {};
 
-	// Check if one of the files modified in this PR has been de-fusioned,
-	// and thus must now be tested on WordPress.com.
-	const touchesSomethingNeedingTesting = await isTouchingSomethingNeedingTesting(
+	// Check if one of the files modified in this PR need testing on WordPress.com.
+	data.projects = await touchedProjectsNeedingTesting(
 		github,
 		owner,
 		repoName,
@@ -54,7 +67,7 @@ async function checkTestReminderComment( github, context, core ) {
 
 	core.info(
 		`Build: This PR ${
-			touchesSomethingNeedingTesting ? 'touches' : 'does not touch'
+			data.projects.length ? 'touches' : 'does not touch'
 		} something that needs testing on WordPress.com.`
 	);
 
@@ -68,9 +81,8 @@ async function checkTestReminderComment( github, context, core ) {
 		core
 	);
 
-	// This PR does not touch de-fusioned files.
-	if ( ! touchesSomethingNeedingTesting ) {
-		// If it previously touched Jetpack, delete the comments that were created then.
+	// This PR does not touch files needing testing.
+	if ( ! data.projects.length ) {
 		if ( testCommentIDs.length > 0 ) {
 			core.info(
 				`Build: this PR previously touched something that needs testing, but does not anymore. Deleting previous test reminder comments.`
@@ -87,7 +99,8 @@ async function checkTestReminderComment( github, context, core ) {
 			);
 		}
 
-		return 0;
+		data.commentId = 0;
+		return data;
 	}
 
 	// If our PR needs testing, and there was previously a test reminder comment, return it.
@@ -97,7 +110,8 @@ async function checkTestReminderComment( github, context, core ) {
 		core.info(
 			`Build: this PR touches something that needs testing, and there was previously a test reminder comment, ${ testCommentIDs[ 0 ] }.`
 		);
-		return testCommentIDs[ 0 ];
+		data.commentId = testCommentIDs[ 0 ];
+		return data;
 	}
 
 	// If our PR touches something that needs testing, and there has been no test reminder comment yet, create one.
@@ -115,14 +129,16 @@ async function checkTestReminderComment( github, context, core ) {
 			body,
 		} );
 		core.info( `Build: created test reminder comment with ID ${ id }.` );
-		return id;
+		data.commentId = id;
+		return data;
 	}
 
 	// Fallback. No comment exists, or was created.
 	core.notice(
 		`Build: final fallback. No comment exists, or was created. We should not get here.`
 	);
-	return 0;
+	data.commentId = 0;
+	return data;
 }
 
 module.exports = checkTestReminderComment;
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 135709e6321f3..ea18ade28e946 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -59,11 +59,10 @@ jobs:
         env:
           CHANGED: ${{ steps.changed.outputs.projects }}
         with:
-          result-encoding: string
           script: |
             const checkTestReminderComment = require('.github/files/build-reminder-comment/check-test-reminder-comment.js')
-            const commentId = await checkTestReminderComment( github, context, core );
-            return commentId;
+            const data = await checkTestReminderComment( github, context, core );
+            return data;
 
       - name: Build changed projects
         id: build
@@ -116,24 +115,30 @@ jobs:
       - name: Update reminder with testing instructions
         id: update-reminder-comment
         uses: actions/github-script@v6
-        if: ${{ github.event_name == 'pull_request' && steps.check-test-reminder-comment.outputs.result != 0 && github.event.pull_request.head.repo.full_name == github.event.pull_request.base.repo.full_name }}
+        if: ${{ github.event_name == 'pull_request' && fromJSON(steps.check-test-reminder-comment.outputs.result)['commentId'] != 0 && github.event.pull_request.head.repo.full_name == github.event.pull_request.base.repo.full_name }}
         env:
           BRANCH_NAME: ${{ github.head_ref }}
-          COMMENT_ID: ${{ steps.check-test-reminder-comment.outputs.result }}
+          DATA: ${{ steps.check-test-reminder-comment.outputs.result }}
         with:
           script: |
-            const { BRANCH_NAME, COMMENT_ID, TEST_COMMENT_INDICATOR } = process.env;
+            const { BRANCH_NAME, TEST_COMMENT_INDICATOR } = process.env;
+            const data = JSON.parse( process.env.DATA );
+            const commands = data.projects.reduce( ( acc, cur ) => {
+              return acc += `
+              \`\`\`
+              bin/jetpack-downloader test ${ cur } ${ BRANCH_NAME }
+              \`\`\`
+              `;
+            }, '' );
             const commentBody = `${ TEST_COMMENT_INDICATOR }
             Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run
-            \`\`\`
-            bin/jetpack-downloader test jetpack ${ BRANCH_NAME }
-            \`\`\`
+            ${ commands }
             to get started. More details: p9dueE-5Nn-p2`;
             await github.rest.issues.updateComment( {
               owner: context.repo.owner,
               repo: context.repo.repo,
               body: commentBody,
-              comment_id: +COMMENT_ID,
+              comment_id: +data.commentId,
             } );
 
   jetpack_beta:

From cee144a9c8fc38319de9889a12c45fa1f4f04d07 Mon Sep 17 00:00:00 2001
From: Ian Ramos <5714212+IanRamosC@users.noreply.github.com>
Date: Thu, 23 Feb 2023 17:20:37 -0300
Subject: [PATCH 35/38] Assistant: Add VaultPress card to the assistant flow
 (#28741)

* Assistant: add VaultPress upsell screen

* changelog

* Assistant: add dynamic price to VaultPress card button

* Assistant: add VaultPress as the last step

* Assistant: update style to match proposed design

* Assistant: fix e2e tests for the recommendation steps

* Remove site-products reducer from exclude list

* Remove accidentally added changelog

* Assistant: fix description list style

* Assistant: adjust progressValue

---------

Co-authored-by: Samiff <samiff@users.noreply.github.com>
---
 projects/plugins/jetpack/_inc/client/main.jsx |   4 +
 .../_inc/client/recommendations/constants.js  |   2 +
 .../client/recommendations/feature-utils.js   | 107 +++++++++++++++++-
 .../_inc/client/recommendations/index.jsx     |  14 +++
 .../prompts/prompt-layout/index.jsx           |   4 +-
 .../prompts/prompt-layout/style.scss          |  28 +++--
 .../prompts/resource-prompt/index.jsx         |  16 ++-
 .../client/state/recommendations/reducer.js   |  19 +++-
 .../client/state/site-products/reducer.js     |  36 +++++-
 .../add-vaultpress-card-to-the-assistant      |   4 +
 .../post-connection/recommendations.test.js   |  14 ++-
 .../pages/wp-admin/recommendations.js         |  18 ++-
 tools/eslint-excludelist.json                 |   1 -
 13 files changed, 237 insertions(+), 30 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/add-vaultpress-card-to-the-assistant

diff --git a/projects/plugins/jetpack/_inc/client/main.jsx b/projects/plugins/jetpack/_inc/client/main.jsx
index fe3e60b7ea69f..6f5bd331c14be 100644
--- a/projects/plugins/jetpack/_inc/client/main.jsx
+++ b/projects/plugins/jetpack/_inc/client/main.jsx
@@ -103,6 +103,8 @@ const recommendationsRoutes = [
 	'/recommendations/backup-plan',
 	'/recommendations/boost',
 	'/recommendations/summary',
+	'/recommendations/vaultpress-backup',
+	'/recommendations/vaultpress-for-woocommerce',
 ];
 
 const dashboardRoutes = [ '/', '/dashboard', '/reconnect', '/my-plan', '/plans' ];
@@ -503,6 +505,8 @@ class Main extends React.Component {
 			case '/recommendations/backup-plan':
 			case '/recommendations/boost':
 			case '/recommendations/summary':
+			case '/recommendations/vaultpress-backup':
+			case '/recommendations/vaultpress-for-woocommerce':
 			case '/recommendations/welcome-backup':
 			case '/recommendations/welcome-complete':
 			case '/recommendations/welcome-security':
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/constants.js b/projects/plugins/jetpack/_inc/client/recommendations/constants.js
index 0fe2e17420189..404fb908f273d 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/constants.js
+++ b/projects/plugins/jetpack/_inc/client/recommendations/constants.js
@@ -19,6 +19,8 @@ export const RECOMMENDATION_WIZARD_STEP = {
 	RELATED_POSTS: 'related-posts',
 	CREATIVE_MAIL: 'creative-mail',
 	SITE_ACCELERATOR: 'site-accelerator',
+	VAULTPRESS_BACKUP: 'vaultpress-backup',
+	VAULTPRESS_FOR_WOOCOMMERCE: 'vaultpress-for-woocommerce',
 	PUBLICIZE: 'publicize',
 	PROTECT: 'protect',
 	ANTI_SPAM: 'anti-spam',
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js b/projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js
index 32b45148c9958..345ae01ad1c1c 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js
+++ b/projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js
@@ -1,6 +1,7 @@
+import formatCurrency from '@automattic/format-currency';
 import restApi from '@automattic/jetpack-api';
 import { getRedirectUrl } from '@automattic/jetpack-components';
-import { __ } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 import {
 	PLAN_JETPACK_SECURITY_T1_YEARLY,
 	PLAN_JETPACK_VIDEOPRESS,
@@ -16,6 +17,11 @@ import {
 import { updateSettings } from 'state/settings';
 import { fetchPluginsData } from 'state/site/plugins';
 import { isFeatureActive } from '../state/recommendations';
+import {
+	getSiteProduct,
+	getSiteProductMonthlyCost,
+	isFetchingSiteProducts,
+} from '../state/site-products';
 
 export const mapStateToSummaryFeatureProps = ( state, featureSlug ) => {
 	switch ( featureSlug ) {
@@ -115,6 +121,11 @@ export const getSummaryResourceProps = ( state, resourceSlug ) => {
 				ctaLabel: __( 'Add', 'jetpack' ),
 				ctaLink: getJetpackCloudUrl( state, 'settings' ),
 			};
+		case 'vaultpress-backup':
+		case 'vaultpress-for-woocommerce':
+			return {
+				displayName: __( 'VaultPress Backup', 'jetpack' ),
+			};
 		default:
 			throw `Unknown resource slug in getSummaryResourceProps() recommendations/feature-utils.js: ${ resourceSlug }`;
 	}
@@ -281,7 +292,7 @@ export const getStepContent = ( state, stepSlug ) => {
 			};
 		case 'creative-mail':
 			return {
-				progressValue: '86',
+				progressValue: '76',
 				question: __( 'Would you like to turn site visitors into subscribers?', 'jetpack' ),
 				description: __(
 					'The Jetpack Newsletter Form combined with Creative Mail by Constant Contact can help automatically gather subscribers and send them beautiful emails. <ExternalLink>Learn more</ExternalLink>',
@@ -294,7 +305,7 @@ export const getStepContent = ( state, stepSlug ) => {
 			};
 		case 'monitor':
 			return {
-				progressValue: '57',
+				progressValue: '52',
 				question: __(
 					'Would you like Downtime Monitoring to notify you if your site goes offline?',
 					'jetpack'
@@ -309,7 +320,7 @@ export const getStepContent = ( state, stepSlug ) => {
 			};
 		case 'related-posts':
 			return {
-				progressValue: '71',
+				progressValue: '64',
 				question: __(
 					'Would you like Related Posts to display at the bottom of your content?',
 					'jetpack'
@@ -324,7 +335,7 @@ export const getStepContent = ( state, stepSlug ) => {
 			};
 		case 'site-accelerator':
 			return {
-				progressValue: '99',
+				progressValue: '88',
 				question: __( 'Would you like your site to load faster?', 'jetpack' ),
 				description: __(
 					'Faster sites get better ranking in search engines and help keep visitors on your site longer. Jetpack will automatically optimize and load your images and files from our global Content Delivery Network (CDN). <ExternalLink>Learn more</ExternalLink>',
@@ -383,7 +394,7 @@ export const getStepContent = ( state, stepSlug ) => {
 			};
 		case 'woocommerce':
 			return {
-				progressValue: '43',
+				progressValue: '40',
 				question: __( 'Would you like WooCommerce to power your store?', 'jetpack' ),
 				description: __(
 					'We’re partnered with <strong>WooCommerce</strong> — a customizable, open-source eCommerce platform built for WordPress. It’s everything you need to start selling products today. <ExternalLink>Learn more</ExternalLink>',
@@ -547,6 +558,90 @@ export const getStepContent = ( state, stepSlug ) => {
 				ctaLink: getJetpackCloudUrl( state, 'settings' ),
 				illustration: 'assistant-server-credentials',
 			};
+		case 'vaultpress-backup': {
+			const siteRawUrl = getSiteRawUrl( state );
+			const monthlyPrice = getSiteProductMonthlyCost( state, PLAN_JETPACK_BACKUP_T1_YEARLY );
+			const product = getSiteProduct( state, PLAN_JETPACK_BACKUP_T1_YEARLY );
+			const price = formatCurrency( monthlyPrice, product?.currency_code );
+			const ctaText = isFetchingSiteProducts( state )
+				? __( 'Try for 30 days', 'jetpack' )
+				: sprintf(
+						/* translators: %s: is a formatted currency. e.g. $1 */
+						__( 'Try for %s for 30 days', 'jetpack' ),
+						price
+				  );
+
+			return {
+				progressValue: 100,
+				question: __(
+					'Never lose your site, even if your host goes down (along with your backups)',
+					'jetpack'
+				),
+				description: '',
+				descriptionList: [
+					__(
+						'VaultPress Backup is built specifically for WordPress and has done over 270 million backups to date.',
+						'jetpack'
+					),
+					__(
+						'We store copies of your backups in our secure cloud, so your content will never be lost.',
+						'jetpack'
+					),
+					__(
+						'If your site goes down, you can restore it with one click from desktop or the Jetpack mobile app.',
+						'jetpack'
+					),
+					__( 'VaultPress Backup is so easy to use; no developer required.', 'jetpack' ),
+				],
+				ctaText: ctaText,
+				ctaLink: getRedirectUrl( 'jetpack-recommendations-product-checkout', {
+					site: siteRawUrl,
+					path: PLAN_JETPACK_BACKUP_T1_YEARLY,
+				} ),
+				illustration: 'assistant-backup-welcome',
+			};
+		}
+		case 'vaultpress-for-woocommerce': {
+			const siteRawUrl = getSiteRawUrl( state );
+			const monthlyPrice = getSiteProductMonthlyCost( state, PLAN_JETPACK_BACKUP_T1_YEARLY );
+			const product = getSiteProduct( state, PLAN_JETPACK_BACKUP_T1_YEARLY );
+			const price = formatCurrency( monthlyPrice, product?.currency_code );
+			const ctaText = isFetchingSiteProducts( state )
+				? __( 'Try for 30 days', 'jetpack' )
+				: sprintf(
+						/* translators: %s: is a formatted currency. e.g. $1 */
+						__( 'Try for %s for 30 days', 'jetpack' ),
+						price
+				  );
+
+			return {
+				progressValue: 100,
+				question: __(
+					'Store downtime means lost sales. Do you have a cloud-based store backup solution?',
+					'jetpack'
+				),
+				description: __(
+					'VaultPress Backup saves your store in the cloud, so even if your host goes down, you’ll never lose a thing.',
+					'jetpack'
+				),
+				descriptionList: [
+					__(
+						'Restore your site to any past state in one click while keeping all orders and products current.',
+						'jetpack'
+					),
+					__( 'Backups are encrypted, keeping your store data secure.', 'jetpack' ),
+					__( 'Protect your customer data and stay GDPR compliant.', 'jetpack' ),
+					__( 'Custom WooCommerce table backups.', 'jetpack' ),
+					__( 'Easy to use; no developer required.', 'jetpack' ),
+				],
+				ctaText: ctaText,
+				ctaLink: getRedirectUrl( 'jetpack-recommendations-product-checkout', {
+					site: siteRawUrl,
+					path: PLAN_JETPACK_BACKUP_T1_YEARLY,
+				} ),
+				illustration: 'assistant-backup-welcome',
+			};
+		}
 		default:
 			throw `Unknown step slug in recommendations/question: ${ stepSlug }`;
 	}
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/index.jsx
index 585487aa649c6..c9ef40d7c9b59 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/index.jsx
@@ -23,6 +23,7 @@ import {
 	updateRecommendationsStep as updateRecommendationsStepAction,
 } from 'state/recommendations';
 import { isFetchingSiteData } from 'state/site';
+import QuerySiteProducts from '../components/data/query-site-products';
 import { RECOMMENDATION_WIZARD_STEP } from './constants';
 import { ProductPurchased } from './product-purchased';
 import { FeaturePrompt } from './prompts/feature-prompt';
@@ -90,6 +91,12 @@ const RecommendationsComponent = props => {
 		case RECOMMENDATION_WIZARD_STEP.SITE_ACCELERATOR:
 			redirectPath = '/site-accelerator';
 			break;
+		case RECOMMENDATION_WIZARD_STEP.VAULTPRESS_BACKUP:
+			redirectPath = '/vaultpress-backup';
+			break;
+		case RECOMMENDATION_WIZARD_STEP.VAULTPRESS_FOR_WOOCOMMERCE:
+			redirectPath = '/vaultpress-for-woocommerce';
+			break;
 		case RECOMMENDATION_WIZARD_STEP.PUBLICIZE:
 			redirectPath = '/publicize';
 			break;
@@ -173,6 +180,7 @@ const RecommendationsComponent = props => {
 			<QuerySite />
 			<QuerySitePlugins />
 			<QuerySiteDiscount />
+			<QuerySiteProducts />
 			<QueryIntroOffers />
 			{ isLoading ? (
 				<div className="jp-recommendations__loading">
@@ -209,6 +217,12 @@ const RecommendationsComponent = props => {
 					<Route path="/recommendations/site-accelerator">
 						<FeaturePrompt stepSlug="site-accelerator" />
 					</Route>
+					<Route path="/recommendations/vaultpress-backup">
+						<ResourcePrompt stepSlug="vaultpress-backup" />
+					</Route>
+					<Route path="/recommendations/vaultpress-for-woocommerce">
+						<ResourcePrompt stepSlug="vaultpress-for-woocommerce" />
+					</Route>
 					<Route path="/recommendations/publicize">
 						<FeaturePrompt stepSlug="publicize" isNew={ isNew( 'publicize' ) } />
 					</Route>
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/index.jsx
index 296c0190a14c7..f7c9d5ea6455f 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/index.jsx
@@ -76,7 +76,9 @@ const PromptLayoutComponent = props => {
 						nbsp: <span>&nbsp;</span>,
 					} ) }
 				</h1>
-				<p className="jp-recommendations-question__description">{ description }</p>
+				{ description && (
+					<p className="jp-recommendations-question__description">{ description }</p>
+				) }
 				{ content }
 				<div className="jp-recommendations-question__answer">{ answer }</div>
 			</div>
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/style.scss b/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/style.scss
index ac32f4e1b48e0..5103e6e730ce4 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/style.scss
+++ b/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/style.scss
@@ -37,22 +37,22 @@
 	color: var( --jp-gray-80 );
 
 	font-size: 1.5rem;
-	margin: 40px 40px 0 40px;
+	margin: 2.5rem 2.5rem 1rem 2.5rem;
 
 	@include breakpoint( '<480px' ) {
-		margin: 0 16px 32px 16px;
+		margin: 0 1rem 2rem 1rem;
 	}
 }
 
 .jp-recommendations-question__description {
 	color: var( --jp-gray-100 );
 
-	font-size: 16px;
+	font-size: 1rem;
 
-	margin: 32px 32px 32px 40px;
+	margin: 1rem 2rem 2rem 2.5rem;
 
 	@include breakpoint( '<480px' ) {
-		margin: 0 16px 16px 16px;
+		margin: 0 1rem 1rem 1rem;
 	}
 
 	.gridicons-external {
@@ -66,13 +66,21 @@
 
 .jp-recommendations-question__description-list {
 	color: var( --jp-gray-100 );
-	font-size: 16px;
-	margin: 0 32px 32px 32px;
-	list-style: disc;
-	padding-left: 16px;
+	font-size: 1rem;
+	margin: 0 2rem 2rem 2.5rem;
+
+	list-style-type: none;
+	padding: 0;
+
+	li {
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVHcEwFnwUInggGnggGnggHnAcAnwUFnQcAnwcGnwkFnQgGnQgFnwcGnQYFnQcFnAcGnQkDnwdhiL0pAAAAEnRSTlMAMF//f2Aw7yBQ3+9gcIBgcED+HDbkAAAAZklEQVR4Ae3LNwICARDDQC0+cv7/Y8mwV9odSfWIcf/+VegnGkIvDaGXKvTTn/Gz+Uf5xTL0K1XotS7fs5H6GHvvaO8d7c3j7rdgHne/A/PYt/cO+R42oYdN6OEQetiFHo4A//6dAXqtBEkmtWutAAAAAElFTkSuQmCC) no-repeat;
+		background-size: 1.25rem;
+		padding-left: 1.75rem;
+		margin-bottom: 0.5rem;
+	}
 
 	@include breakpoint( '<480px' ) {
-		margin: 0 16px 0 16px;
+		margin: 0 1rem 0 1rem;
 	}
 }
 
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/prompts/resource-prompt/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/prompts/resource-prompt/index.jsx
index 77cccf3fb6bb4..35053f8c8875d 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/prompts/resource-prompt/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/prompts/resource-prompt/index.jsx
@@ -118,11 +118,17 @@ const ResourcePromptComponent = props => {
 			progressBar={ progressBarComponent }
 			isNew={ isNew }
 			question={ question }
-			description={ createInterpolateElement( description, {
-				br: <br />,
-				strong: <strong />,
-				ExternalLink: <ExternalLink href={ descriptionLink } onClick={ onExternalLinkClick } />,
-			} ) }
+			description={
+				description
+					? createInterpolateElement( description, {
+							br: <br />,
+							strong: <strong />,
+							ExternalLink: (
+								<ExternalLink href={ descriptionLink } onClick={ onExternalLinkClick } />
+							),
+					  } )
+					: null
+			}
 			content={
 				descriptionList || descriptionSecondary ? (
 					<React.Fragment>
diff --git a/projects/plugins/jetpack/_inc/client/state/recommendations/reducer.js b/projects/plugins/jetpack/_inc/client/state/recommendations/reducer.js
index c508ec04f2928..bf44a40fb9789 100644
--- a/projects/plugins/jetpack/_inc/client/state/recommendations/reducer.js
+++ b/projects/plugins/jetpack/_inc/client/state/recommendations/reducer.js
@@ -5,6 +5,7 @@ import {
 	PLAN_JETPACK_VIDEOPRESS,
 	PLAN_JETPACK_ANTI_SPAM,
 	PLAN_JETPACK_BACKUP_T1_YEARLY,
+	getPlanClass,
 } from 'lib/plans/constants';
 import { assign, difference, get, isArray, isEmpty, mergeWith, union } from 'lodash';
 import {
@@ -50,6 +51,7 @@ import {
 	getNewRecommendations,
 	getInitialRecommendationsStep,
 	getNewRecommendationsCount,
+	isWooCommerceActive,
 } from 'state/initial-state';
 import { getRewindStatus } from 'state/rewind';
 import { getSetting } from 'state/settings';
@@ -335,7 +337,9 @@ const stepToNextStepByPath = {
 		'related-posts': 'creative-mail',
 		'creative-mail': 'site-accelerator',
 		'site-accelerator': 'publicize',
-		publicize: 'summary',
+		publicize: 'vaultpress-for-woocommerce',
+		'vaultpress-for-woocommerce': 'vaultpress-backup', // falls back to vaultpress-backup so it only shows one of them
+		'vaultpress-backup': 'summary',
 		protect: 'summary',
 		'anti-spam': 'summary',
 		videopress: 'summary',
@@ -410,6 +414,8 @@ export const stepToRoute = {
 	'backup-plan': '#/recommendations/backup-plan',
 	boost: '#/recommendations/boost',
 	summary: '#/recommendations/summary',
+	'vaultpress-backup': '#/recommendations/vaultpress-backup',
+	'vaultpress-for-woocommerce': '#/recommendations/vaultpress-for-woocommerce',
 	// new steps (September 2022)
 	welcome__backup: '#/recommendations/welcome-backup',
 	welcome__complete: '#/recommendations/welcome-complete',
@@ -547,6 +553,13 @@ export const getProductSlugForStep = ( state, step ) => {
 	return false;
 };
 
+const shouldRecommendVaultPress = ( state, isWooCommerceRequired = false ) => {
+	const sitePlan = getSitePlan( state ).product_slug;
+	const isFree = 'is-free-plan' === getPlanClass( sitePlan );
+
+	return isFree && isWooCommerceActive( state ) === isWooCommerceRequired;
+};
+
 const isConditionalRecommendationEnabled = ( state, step ) => {
 	const conditionalRecommendations = getConditionalRecommendations( state );
 	return (
@@ -565,6 +578,10 @@ const isStepEligibleToShow = ( state, step ) => {
 			return true;
 		case 'product-suggestions':
 			return isProductSuggestionsAvailable( state );
+		case 'vaultpress-backup':
+			return shouldRecommendVaultPress( state );
+		case 'vaultpress-for-woocommerce':
+			return shouldRecommendVaultPress( state, true );
 		case 'agency':
 			return !! getDataByKey( state, 'site-type-agency' );
 		case 'woocommerce':
diff --git a/projects/plugins/jetpack/_inc/client/state/site-products/reducer.js b/projects/plugins/jetpack/_inc/client/state/site-products/reducer.js
index c65629f7a834a..1e1334600c229 100644
--- a/projects/plugins/jetpack/_inc/client/state/site-products/reducer.js
+++ b/projects/plugins/jetpack/_inc/client/state/site-products/reducer.js
@@ -34,8 +34,8 @@ export const reducer = combineReducers( {
 /**
  * Returns true if currently requesting site products. Otherwise false.
  *
- * @param  {Object}  state Global state tree
- * @return {Boolean}       Whether site products are being requested
+ * @param   {object} state - Global state tree
+ * @returns {boolean}        Whether site products are being requested
  */
 export function isFetchingSiteProducts( state ) {
 	return !! state.jetpack.siteProducts.requests.isFetching;
@@ -43,9 +43,37 @@ export function isFetchingSiteProducts( state ) {
 
 /**
  * Returns WP.com site products that are relevant to Jetpack.
- * @param  {Object}  state Global state tree
- * @return {Object}  Site products
+ *
+ * @param   {object} state -  Global state tree
+ * @returns {object} Site products
  */
 export function getSiteProducts( state ) {
 	return state.jetpack.siteProducts.items;
 }
+
+/**
+ * Returns a Jetpack product if it exists in the state.
+ *
+ * @param   {object} state - Global state tree
+ * @param   {string} slug  - Product slug
+ * @returns {object} Product
+ */
+export function getSiteProduct( state, slug ) {
+	return state.jetpack.siteProducts.items?.[ slug ];
+}
+
+/**
+ * Returns the monthly cost of a product. This also takes into account intro offers.
+ *
+ * @see     pbNhbs-53E-p2
+ * @todo    Fix how we calculate the price in the future.
+ * @param   {object} state - Global state tree
+ * @param   {string} slug  - Product slug
+ * @returns {number}  Monthly cost of a product
+ */
+export function getSiteProductMonthlyCost( state, slug ) {
+	const product = getSiteProduct( state, slug );
+	const price = product?.introductory_offer?.cost_per_interval || product?.cost;
+
+	return Math.ceil( ( price / 12 ) * 100 ) / 100;
+}
diff --git a/projects/plugins/jetpack/changelog/add-vaultpress-card-to-the-assistant b/projects/plugins/jetpack/changelog/add-vaultpress-card-to-the-assistant
new file mode 100644
index 0000000000000..995ebbe3d11ce
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-vaultpress-card-to-the-assistant
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Assistant: added a new card to highlight the advantages of VaultPress Backup
diff --git a/projects/plugins/jetpack/tests/e2e/specs/post-connection/recommendations.test.js b/projects/plugins/jetpack/tests/e2e/specs/post-connection/recommendations.test.js
index 64b0cfb5145de..7de144537e09e 100644
--- a/projects/plugins/jetpack/tests/e2e/specs/post-connection/recommendations.test.js
+++ b/projects/plugins/jetpack/tests/e2e/specs/post-connection/recommendations.test.js
@@ -83,10 +83,22 @@ test( 'Recommendations (Jetpack Assistant)', async ( { page } ) => {
 		).toBeTruthy();
 	} );
 
-	await test.step( 'Skip Site Accelerator and continue to Summary', async () => {
+	await test.step( 'Skip Site Accelerator and continue to VaultPress Backup card', async () => {
 		await recommendationsPage.skipSiteAcceleratorAndContinue();
 		await recommendationsPage.reload();
 		await recommendationsPage.waitForNetworkIdle();
+		const isVaultPressBackupStep = await recommendationsPage.isTryVaultPressBackupButtonVisible();
+		expect( isVaultPressBackupStep, 'VaultPress Backup step should be visible' ).toBeTruthy();
+		expect(
+			recommendationsPage.isUrlInSyncWithStepName( 'vaultpress-backup' ),
+			'URL should be in sync with the step name'
+		).toBeTruthy();
+	} );
+
+	await test.step( 'Skip VaultPress Backup card and continue to Summary', async () => {
+		await recommendationsPage.skipVaultPressBackupAndContinue();
+		await recommendationsPage.reload();
+		await recommendationsPage.waitForNetworkIdle();
 		const isSummaryContent = await recommendationsPage.isSummaryContentVisible();
 		const isSummarySidebar = await recommendationsPage.isSummarySidebarVisible();
 		expect(
diff --git a/tools/e2e-commons/pages/wp-admin/recommendations.js b/tools/e2e-commons/pages/wp-admin/recommendations.js
index 93771010fa943..94537c5f7959d 100644
--- a/tools/e2e-commons/pages/wp-admin/recommendations.js
+++ b/tools/e2e-commons/pages/wp-admin/recommendations.js
@@ -50,10 +50,18 @@ export default class RecommendationsPage extends WpPage {
 	}
 
 	get enableSiteAcceleratorButtonSel() {
-		return 'a[href*="recommendations/summary"] >> text="Enable Site Accelerator"';
+		return 'a[href*="recommendations/vaultpress-backup"] >> text="Enable Site Accelerator"';
 	}
 
 	get skipSiteAcceleratorButtonSel() {
+		return 'a[href*="recommendations/vaultpress-backup"] >> text="Not now"';
+	}
+
+	get tryVaultPressBackup() {
+		return 'a[href*="jetpack-recommendations-product-checkout"] >> text=Try for';
+	}
+
+	get skipVaultPressBackup() {
 		return 'a[href*="recommendations/summary"] >> text="Not now"';
 	}
 
@@ -152,6 +160,14 @@ export default class RecommendationsPage extends WpPage {
 		return await this.click( this.skipSiteAcceleratorButtonSel );
 	}
 
+	async isTryVaultPressBackupButtonVisible() {
+		return await this.isElementVisible( this.tryVaultPressBackup );
+	}
+
+	async skipVaultPressBackupAndContinue() {
+		return await this.click( this.skipVaultPressBackup );
+	}
+
 	async isSummaryContentVisible() {
 		return await this.isElementVisible( this.summaryContentSel );
 	}
diff --git a/tools/eslint-excludelist.json b/tools/eslint-excludelist.json
index 8c3b863f7208a..53637ee562517 100644
--- a/tools/eslint-excludelist.json
+++ b/tools/eslint-excludelist.json
@@ -47,7 +47,6 @@
 	"projects/plugins/jetpack/_inc/client/state/search/reducer.js",
 	"projects/plugins/jetpack/_inc/client/state/settings/actions.js",
 	"projects/plugins/jetpack/_inc/client/state/settings/reducer.js",
-	"projects/plugins/jetpack/_inc/client/state/site-products/reducer.js",
 	"projects/plugins/jetpack/_inc/client/state/site-verify/reducer.js",
 	"projects/plugins/jetpack/_inc/client/state/site/reducer.js",
 	"projects/plugins/jetpack/_inc/client/state/tracking/reducer.js",

From ff7c623d068d25a23019cb1ba393dfad451c8376 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 24 Feb 2023 11:17:23 -0300
Subject: [PATCH 36/38] VideoPress: move the Playback Bar color panel into the
 colors panel group (#29054)

* [not verified] move dynamic color to style settings tab

* [not verified] changelog

* [not verified] use __experimentalGroup prop

* [not verified] add a panel section title. tweak layout

* [not verified] reset also static colors from panel item

* update changelog
---
 .../update-videopress-organize-block-panels   |  4 +++
 .../video/components/color-panel/index.tsx    | 36 ++++++++++++++++---
 .../video/components/color-panel/style.scss   | 17 +++++++++
 .../client/block-editor/blocks/video/edit.tsx | 10 +++++-
 4 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 projects/packages/videopress/changelog/update-videopress-organize-block-panels

diff --git a/projects/packages/videopress/changelog/update-videopress-organize-block-panels b/projects/packages/videopress/changelog/update-videopress-organize-block-panels
new file mode 100644
index 0000000000000..a05bcd76def2d
--- /dev/null
+++ b/projects/packages/videopress/changelog/update-videopress-organize-block-panels
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+VideoPress: move the Playback Bar color panel into the colors panel group
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx
index 359f7da4fcc61..f3b6c4a2c2cc7 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx
@@ -2,7 +2,12 @@
  *External dependencies
  */
 import { PanelColorSettings } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	PanelRow,
+	ToggleControl,
+	// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -24,7 +29,7 @@ import type React from 'react';
  * @param {VideoControlProps} props - Component props.
  * @returns {React.ReactElement}    Component template
  */
-export default function ColorPanel( { attributes, setAttributes }: VideoControlProps ) {
+export default function ColorPanel( { clientId, attributes, setAttributes }: VideoControlProps ) {
 	const { useAverageColor, seekbarColor, seekbarLoadingColor, seekbarPlayedColor } = attributes;
 
 	const initialColorState: VideoBlockColorAttributesProps = {
@@ -44,8 +49,31 @@ export default function ColorPanel( { attributes, setAttributes }: VideoControlP
 		debouncedSetColors( colorToUpdate );
 	}, [] );
 
+	const resetStaticColors = useCallback( () => {
+		setColorsState( {} );
+
+		setAttributes( {
+			useAverageColor: true,
+			seekbarColor: '',
+			seekbarLoadingColor: '',
+			seekbarPlayedColor: '',
+		} );
+	}, [] );
+
 	return (
-		<PanelBody title={ __( 'Color', 'jetpack-videopress-pkg' ) } initialOpen={ false }>
+		<ToolsPanelItem
+			className="videopress-playback-bar-colors-panel-item"
+			hasValue={ () => ! useAverageColor }
+			label={ __( 'Dynamic color', 'jetpack-videopress-pkg' ) }
+			resetAllFilter={ resetStaticColors }
+			isShownByDefault
+			panelId={ clientId }
+			onDeselect={ resetStaticColors }
+		>
+			<PanelRow className="videopress-color-panel__title">
+				{ __( 'Playback bar colors', 'jetpack-videopress-pkg' ) }
+			</PanelRow>
+
 			<ToggleControl
 				label={ __( 'Dynamic color', 'jetpack-videopress-pkg' ) }
 				help={
@@ -94,6 +122,6 @@ export default function ColorPanel( { attributes, setAttributes }: VideoControlP
 					] }
 				/>
 			) }
-		</PanelBody>
+		</ToolsPanelItem>
 	);
 }
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/style.scss
index 9b6adc0b0cfad..3ec965b560686 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/style.scss
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/style.scss
@@ -9,3 +9,20 @@
 	--spacing-base: 8px;
 	margin-top: var( --spacing-base );
 }
+
+.color-block-support-panel__inner-wrapper .videopress-playback-bar-colors-panel-item {
+	margin-top: 0; // clean up the margin-top from the color picker
+
+	.videopress-color-panel__title {
+		margin-bottom: 8px;
+	}
+}
+
+.videopress-color-panel__title {
+	min-height: 24px;
+	height: 24px;
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
index 813ad081fef4b..9f1c76b57fa11 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
@@ -514,11 +514,19 @@ export default function VideoPressEdit( {
 					isRequestingVideoData={ isRequestingVideoData }
 					{ ...{ attributes, setAttributes } }
 				/>
+
 				<PlaybackPanel { ...{ attributes, setAttributes, isRequestingVideoData } } />
+
 				<PrivacyAndRatingPanel
 					{ ...{ attributes, setAttributes, isRequestingVideoData, privateEnabledForSite } }
 				/>
-				<ColorPanel { ...{ attributes, setAttributes, isRequestingVideoData } } />
+			</InspectorControls>
+
+			<InspectorControls __experimentalGroup="color">
+				<ColorPanel
+					clientId={ clientId }
+					{ ...{ attributes, setAttributes, isRequestingVideoData } }
+				/>
 			</InspectorControls>
 
 			<ConnectBanner

From 52277605f79e937985827237d1e4bfdc588f9dc2 Mon Sep 17 00:00:00 2001
From: nunyvega <alvaro.vega@automattic.com>
Date: Fri, 24 Feb 2023 16:10:36 +0100
Subject: [PATCH 37/38] Change plugin versioning from SemVer to WordPress
 (#29147)

---
 .../videopress/changelog/modify-videopress-plugin-versioning | 5 +++++
 projects/plugins/videopress/composer.json                    | 5 ++++-
 projects/plugins/videopress/composer.lock                    | 2 +-
 projects/plugins/videopress/jetpack-videopress.php           | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 projects/plugins/videopress/changelog/modify-videopress-plugin-versioning

diff --git a/projects/plugins/videopress/changelog/modify-videopress-plugin-versioning b/projects/plugins/videopress/changelog/modify-videopress-plugin-versioning
new file mode 100644
index 0000000000000..9aa70e3ec1f75
--- /dev/null
+++ b/projects/plugins/videopress/changelog/modify-videopress-plugin-versioning
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/videopress/composer.json b/projects/plugins/videopress/composer.json
index 6eaabf3159649..ea0053964e431 100644
--- a/projects/plugins/videopress/composer.json
+++ b/projects/plugins/videopress/composer.json
@@ -45,6 +45,9 @@
 		"mirror-repo": "Automattic/jetpack-videopress-plugin",
 		"autorelease": true,
 		"autotagger": true,
+		"changelogger": {
+			"versioning": "wordpress"
+		},
 		"release-branch-prefix": "videopress",
 		"beta-plugin-slug": "jetpack-videopress",
 		"wp-plugin-slug": "jetpack-videopress",
@@ -56,6 +59,6 @@
 			"automattic/jetpack-autoloader": true,
 			"automattic/jetpack-composer-plugin": true
 		},
-		"autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_videopressⓥ1_4_1_alpha"
+		"autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_videopressⓥ1_5_alpha"
 	}
 }
diff --git a/projects/plugins/videopress/composer.lock b/projects/plugins/videopress/composer.lock
index 4735e51230bde..ea0d98c80947e 100644
--- a/projects/plugins/videopress/composer.lock
+++ b/projects/plugins/videopress/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "faefaedb6a3045f6d773302b27fc511a",
+    "content-hash": "52723a4da57d238ae83d20657ef5a5e9",
     "packages": [
         {
             "name": "automattic/jetpack-a8c-mc-stats",
diff --git a/projects/plugins/videopress/jetpack-videopress.php b/projects/plugins/videopress/jetpack-videopress.php
index 2cf216ef00c62..0658b61cb1c91 100644
--- a/projects/plugins/videopress/jetpack-videopress.php
+++ b/projects/plugins/videopress/jetpack-videopress.php
@@ -4,7 +4,7 @@
  * Plugin Name: Jetpack VideoPress
  * Plugin URI: https://wordpress.org/plugins/jetpack-videopress
  * Description: High quality, ad-free video.
- * Version: 1.4.1-alpha
+ * Version: 1.5-alpha
  * Author: Automattic - Jetpack Video team
  * Author URI: https://jetpack.com/videopress/
  * License: GPLv2 or later

From 053c584cad9aa960e2739fc58e4a13100c31e3b1 Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Fri, 24 Feb 2023 15:41:59 +0000
Subject: [PATCH 38/38] CRM: Changing escape function for API generated
 activity (#29146)

---
 .../plugins/crm/admin/dashboard/main.page.php    |  2 +-
 .../changelog/fix-crm-activity-api-html-i-tag    |  4 ++++
 .../crm/includes/ZeroBSCRM.FormatHelpers.php     | 16 ++++++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 projects/plugins/crm/changelog/fix-crm-activity-api-html-i-tag

diff --git a/projects/plugins/crm/admin/dashboard/main.page.php b/projects/plugins/crm/admin/dashboard/main.page.php
index 5d3b09b1b07e3..d3bd7fe6b9620 100644
--- a/projects/plugins/crm/admin/dashboard/main.page.php
+++ b/projects/plugins/crm/admin/dashboard/main.page.php
@@ -552,7 +552,7 @@ function jpcrm_render_dashboard_page() {
 				<div class='date'><img class='ui avatar img img-rounded' alt='<?php esc_attr_e( 'Contact Image', 'zero-bs-crm' ); ?>' src='<?php echo esc_url( $avatar ); ?>'/></div>
 				<div class='content text'>
 				<span class='header'><?php echo esc_html( $logmetatype ); ?><span class='when'> (<?php echo esc_html( $diff . __( ' ago', 'zero-bs-crm' ) ); ?>)</span><span class='who'><?php echo esc_html( $logauthor ); ?></span></span>
-				<div class='description'><?php echo esc_html( $logmetashot ); ?><br/></div>
+				<div class='description'><?php echo wp_kses( $logmetashot, array( 'i' => array( 'class' => true ) ) ); ?><br/></div>
 				</div>
 			</div>
 						<?php
diff --git a/projects/plugins/crm/changelog/fix-crm-activity-api-html-i-tag b/projects/plugins/crm/changelog/fix-crm-activity-api-html-i-tag
new file mode 100644
index 0000000000000..386c3e96ed493
--- /dev/null
+++ b/projects/plugins/crm/changelog/fix-crm-activity-api-html-i-tag
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+CRM: change escape function for API generated activity
diff --git a/projects/plugins/crm/includes/ZeroBSCRM.FormatHelpers.php b/projects/plugins/crm/includes/ZeroBSCRM.FormatHelpers.php
index 2cff417f2685a..d8d28932c9bf5 100644
--- a/projects/plugins/crm/includes/ZeroBSCRM.FormatHelpers.php
+++ b/projects/plugins/crm/includes/ZeroBSCRM.FormatHelpers.php
@@ -417,7 +417,7 @@ function zeroBSCRM_html_contactTimeline($contactID=-1,$logs=false,$contactObj=fa
 						<div>
 							<?php
 							if ( isset( $log['shortdesc'] ) ) {
-								echo esc_html( $log['shortdesc'] );
+								echo wp_kses( $log['shortdesc'], array( 'i' => array( 'class' => true ) ) );
 							}
 							if ( !empty( $log['author'] ) ) {
 								echo ' &mdash; ' . esc_html( $log['author'] );
@@ -799,7 +799,19 @@ function zeroBSCRM_html_companyTimeline($companyID=-1,$logs=false,$companyObj=fa
                          	if (isset($log['type'])) echo esc_html( $log['type'] ); 
                          }
                          ?></h3>
-                        <p><?php if (isset($log['shortdesc'])) echo esc_html( $log['shortdesc'] ); ?><?php if (isset($log['author'])) echo " &mdash; " . esc_html( $log['author'] ) ?><?php if (isset($log['nicetime'])) echo ' &mdash; <i class="clock icon"></i>' . esc_html( $log['nicetime'] ) ?></p>
+						<p>
+						<?php
+						if ( isset( $log['shortdesc'] ) ) {
+							echo wp_kses( $log['shortdesc'], array( 'i' => array( 'class' => true ) ) );
+							if ( isset( $log['author'] ) ) {
+								echo ' &mdash; ' . esc_html( $log['author'] );
+							}
+							if ( isset( $log['nicetime'] ) ) {
+								echo ' &mdash; <i class="clock icon"></i>' . esc_html( $log['nicetime'] );
+							}
+						}
+						?>
+						</p>
                     </div>
                 </li>
                 <?php $i++; } ?>