Merge branch 'trunk' into update/etk-wordpress-interface-to-latest-ve…

…rsion

.circleci/config.yml

@@ -11,7 +11,6 @@ references:
     environment:
       CIRCLE_ARTIFACTS: /tmp/artifacts
       CIRCLE_TEST_REPORTS: /tmp/test_results
-      PUPPETEER_SKIP_DOWNLOAD: 'true'
       PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 'true'
       SKIP_TSC: 'true'
       NODE_OPTIONS: --max-old-space-size=3072
@@ -164,7 +163,6 @@ jobs:
     working_directory: /Users/distiller/wp-calypso
     environment:
       CONFIG_ENV: release
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true'
     steps:
       - checkout
       - attach_workspace:
@@ -241,7 +239,6 @@ jobs:
     shell: /bin/bash --login
     environment:
       CONFIG_ENV: release
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true'
     steps:
       - checkout
       - attach_workspace:
@@ -310,7 +307,6 @@ jobs:
     working_directory: C:\Users\circleci\wp-calypso
     environment:
       CONFIG_ENV: release
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true'
     steps:
       - checkout
       - attach_workspace:

.eslintrc.js

@@ -465,7 +465,18 @@ module.exports = {
 				'@wordpress/compose': [ '__experimentalUseFocusOutside' ],
 				'@wordpress/date': [ '__experimentalGetSettings' ],
 				'@wordpress/edit-post': [ '__experimentalMainDashboardButton' ],
-				'@wordpress/components': [ '__experimentalNavigationBackButton' ],
+				'@wordpress/components': [
+					'__experimentalDivider',
+					'__experimentalHStack',
+					'__experimentalItem',
+					'__experimentalItemGroup',
+					'__experimentalNavigationBackButton',
+					'__experimentalNavigatorBackButton',
+					'__experimentalNavigatorButton',
+					'__experimentalNavigatorProvider',
+					'__experimentalNavigatorScreen',
+					'__experimentalUseNavigator',
+				],
 			},
 		],
 

.github/workflows/icfy-stats.yml

@@ -19,7 +19,6 @@ jobs:
         run: git fetch --prune --unshallow
       - name: Install dependencies
         env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
         run: yarn install --inline-builds
       - name: Build ICFY stats
         env:

Dockerfile

@@ -37,7 +37,6 @@ ENV COMMIT_SHA $commit_sha
 ENV CALYPSO_ENV production
 ENV WORKERS $workers
 ENV BUILD_TRANSLATION_CHUNKS true
-ENV PUPPETEER_SKIP_DOWNLOAD true
 ENV PLAYWRIGHT_SKIP_DOWNLOAD true
 ENV SKIP_TSC true
 ENV NODE_OPTIONS --max-old-space-size=$node_memory

Dockerfile.base

@@ -37,7 +37,6 @@ ENV NPM_CONFIG_CACHE=/calypso/.cache
 ENV NODE_OPTIONS=--max-old-space-size=$node_memory
 ENV HOME=/calypso
 ENV SKIP_TSC=true
-ENV PUPPETEER_SKIP_DOWNLOAD=true
 ENV PLAYWRIGHT_SKIP_DOWNLOAD=true
 
 # Add user calypso with uid 1003, give it sudo permissions
@@ -65,7 +64,6 @@ ENTRYPOINT [ "/bin/bash" ]
 #### This image is used to run E2E tests.
 FROM base as ci-e2e
 
-ENV PUPPETEER_SKIP_DOWNLOAD=false
 ENV PLAYWRIGHT_SKIP_DOWNLOAD=false
 ENV DISPLAY=:99
 

apps/editing-toolkit/editing-toolkit-plugin/wpcom-documentation-links/class-wpcom-documentation-links.php

@@ -65,6 +65,16 @@ public function enqueue_script() {
 			'wpcomDocumentationLinksAssetsUrl',
 			plugins_url( 'dist/', __FILE__ )
 		);
+
+		// This is a way to get the data from the customize-controls script and change the link to the wpcom support page.
+		global $wp_scripts;
+		$data = $wp_scripts->get_data( 'customize-controls', 'data' );
+
+		if ( $data ) {
+			$data = str_replace( 'https:\\/\\/wordpress.org\\/support\\/article\\/site-editor\\/\\', 'https:\\/\\/wordpress.com\\/support\\/site-editor\\/\\', $data );
+			$wp_scripts->registered['customize-controls']->extra['data'] = $data;
+		}
+
 		wp_localize_script(
 			'wpcom-documentation-links-script',
 			'wpcomDocumentationLinksLocale',

apps/happy-blocks/bin/build-translations-manifest.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+
+/* eslint-disable import/no-nodejs-modules */
+const fs = require( 'fs' );
+const path = require( 'path' );
+
+const PROJECT_DIR = path.resolve( __dirname, '..' );
+const ROOT_DIR = path.resolve( PROJECT_DIR, '..', '..' );
+const CHUNKS_MAP_PATH = path.resolve( PROJECT_DIR, 'dist', 'chunks-map.json' );
+const CALYPSO_STRINGS_PATH = path.resolve( PROJECT_DIR, 'dist', 'calypso-strings.pot' );
+const OUTPUT_PATH = path.resolve( PROJECT_DIR, 'dist', 'translations-manifest.json' );
+
+const chunksMap = JSON.parse(
+	fs.readFileSync( CHUNKS_MAP_PATH, {
+		encoding: 'utf8',
+	} )
+);
+
+const calypsoStrings = fs.readFileSync( CALYPSO_STRINGS_PATH, {
+	encoding: 'utf8',
+} );
+const stringRefs = new Set( calypsoStrings.match( /(?<=#:\s).+(?=:\d+)/gm ) );
+
+const translationsRefs = Object.fromEntries(
+	Object.entries( chunksMap ).map( ( [ key, refs ] ) => {
+		// Paths relative to the root directory and filtered to intersect with calypso-strings.pot refs.
+		const normalizedRefs = refs
+			.map( ( ref ) => path.relative( ROOT_DIR, ref ) )
+			.filter( ( ref ) => stringRefs.has( ref ) );
+		return [ key, normalizedRefs ];
+	} )
+);
+
+// Write translatios manifest file.
+fs.writeFileSync( OUTPUT_PATH, JSON.stringify( { references: translationsRefs } ) );
+
+// Clean up.
+fs.unlinkSync( CALYPSO_STRINGS_PATH );
+fs.unlinkSync( CHUNKS_MAP_PATH );

apps/happy-blocks/package.json

@@ -6,8 +6,10 @@
 	"main": "build/index.js",
 	"scripts": {
 		"build:block": "wp-scripts build",
-		"build": "NODE_ENV=production yarn dev",
+		"build": "NODE_ENV=production yarn dev && yarn run build-translations-manifest",
 		"build-ci": "yarn build && ./bin/prepArtifactForCI.sh",
+		"build-calypso-strings": "wp-babel-makepot '../../{client,packages,apps}/**/*.{js,jsx,ts,tsx}' --ignore '**/node_modules/**,**/test/**,**/*.d.ts' --base '../../' --dir 'dist/strings' --output './dist/calypso-strings.pot' && rm -rf dist/strings",
+		"build-translations-manifest": "yarn run build-calypso-strings && node bin/build-translations-manifest.js",
 		"test": "jest test",
 		"clean": "rm -rf build",
 		"dev": "yarn run calypso-apps-builder --localPath / --remotePath /home/wpcom/public_html/wp-content/a8c-plugins/happy-blocks",
@@ -27,6 +29,7 @@
 		"@automattic/color-studio": "2.5.0",
 		"@automattic/format-currency": "workspace:^",
 		"@automattic/typography": "workspace:^",
+		"@automattic/wp-babel-makepot": "workspace:^",
 		"@wordpress/base-styles": "^4.5.0",
 		"@wordpress/block-editor": "^9.1.0",
 		"@wordpress/blocks": "^11.8.0",

apps/happy-blocks/webpack.config.js

@@ -4,9 +4,11 @@
 
 const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
 const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' );
+const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chunks-map-plugin' );
 
 function getWebpackConfig( env, argv ) {
 	const webpackConfig = getBaseWebpackConfig( { ...env, WP: true }, argv );
+	const isProduction = process.env.NODE_ENV === 'production';
 
 	return {
 		...webpackConfig,
@@ -18,7 +20,13 @@ function getWebpackConfig( env, argv ) {
 			...webpackConfig.output,
 			filename: '[name].min.js',
 		},
-		plugins: [ ...webpackConfig.plugins, new ReadableJsAssetsWebpackPlugin() ],
+		plugins: [
+			...webpackConfig.plugins,
+			new ReadableJsAssetsWebpackPlugin(),
+			...( isProduction
+				? [ new GenerateChunksMapPlugin( { output: './dist/chunks-map.json' } ) ]
+				: [] ),
+		],
 	};
 }
 

bin/install-if-no-packages.js

@@ -6,7 +6,7 @@ if ( ! fs.existsSync( 'node_modules' ) ) {
 	const installResult = spawnSync( 'yarn', [ 'install', '--frozen-lockfile' ], {
 		shell: true,
 		stdio: 'inherit',
-		env: { PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true', ...process.env },
+		env: { ...process.env },
 	} );
 	if ( installResult.status ) {
 		console.error( 'failed to install: exited with code %d', installResult.status );

client/blocks/importer/wordpress/content-chooser/style.scss

@@ -21,6 +21,7 @@
 	}
 
 	.card.list__importer-option {
+		background: transparent;
 		box-shadow: none;
 		padding: 0;
 		margin: 1.25rem 0;

client/blocks/importer/wordpress/import-everything/style.scss

@@ -94,6 +94,7 @@
 .import__upgrade-plan {
 	p {
 		color: var(--studio-gray-40);
+		margin-bottom: 1em;
 	}
 
 	.import__upgrade-plan-container {

client/components/backup-storage-space/hooks.tsx

@@ -1,5 +1,8 @@
+import { Gridicon } from '@automattic/components';
 import { useTranslate, TranslateResult } from 'i18n-calypso';
 import { useMemo } from 'react';
+import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
+import { settingsPath } from 'calypso/lib/jetpack/paths';
 
 export enum StorageUnits {
 	Gigabyte = 2 ** 30,
@@ -96,16 +99,19 @@ export const useDaysOfBackupsSavedText = (
 			return null;
 		}
 
-		const daysOfBackupsSavedLinkTarget = `/activity-log/${ siteSlug }?group=rewind`;
+		const daysOfBackupsSavedLinkTarget = isJetpackCloud()
+			? settingsPath( siteSlug )
+			: `/activity-log/${ siteSlug }?group=rewind`;
 
 		return translate(
-			'{{a}}%(daysOfBackupsSaved)d day of backups saved{{/a}}',
-			'{{a}}%(daysOfBackupsSaved)d days of backups saved{{/a}}',
+			'{{a}}%(daysOfBackupsSaved)d day of backups saved {{icon/}}{{/a}}',
+			'{{a}}%(daysOfBackupsSaved)d days of backups saved {{icon/}}{{/a}}',
 			{
 				count: daysOfBackupsSaved,
 				args: { daysOfBackupsSaved },
 				components: {
 					a: <a href={ daysOfBackupsSavedLinkTarget } />,
+					icon: isJetpackCloud() ? <Gridicon icon="cog" size={ 16 } /> : <></>,
 				},
 			}
 		);

client/components/backup-storage-space/style.scss

@@ -113,6 +113,12 @@
 
 	a {
 		text-decoration: underline;
+		display: inline-flex;
+		align-items: center;
+
+		svg.gridicon {
+			margin-left: 6px;
+		}
 	}
 }
 

client/components/backup-storage-space/test/hooks.js

@@ -124,11 +124,19 @@ describe( 'useDaysOfBackupsSavedText', () => {
 		expect( text ).toHaveTextContent( '7 days of backups saved' );
 	} );
 
-	test( 'renders `7 days of backups saved` with link to activity log with site-slug', () => {
+	test( 'renders `7 days of backups saved` with link to activity log with site-slug in Calypso Blue', () => {
 		const text = renderDaysOfBackupsSavedText( 7, 'site-slug' );
-		expect( text.childNodes[ 0 ] ).toContainHTML(
-			'<a href="/activity-log/site-slug?group=rewind">7 days of backups saved</a>'
-		);
+		const link = text.childNodes[ 0 ];
+		expect( link ).toHaveAttribute( 'href', '/activity-log/site-slug?group=rewind' );
+		expect( link ).toHaveTextContent( '7 days of backups saved' );
+	} );
+
+	test( 'renders `7 days of backups saved` with link to settings page with site-slug in Jetpack Cloud', () => {
+		isJetpackCloud.mockImplementation( () => true );
+		const text = renderDaysOfBackupsSavedText( 7, 'site-slug' );
+		const link = text.childNodes[ 0 ];
+		expect( link ).toHaveAttribute( 'href', '/settings/site-slug' );
+		expect( link ).toHaveTextContent( '7 days of backups saved' );
 	} );
 } );
 

client/components/chart/index.jsx

@@ -60,7 +60,6 @@ function Chart( {
 	const [ tooltip, setTooltip ] = useState( { isTooltipVisible: false } );
 	const [ sizing, setSizing ] = useState( { clientWidth: 650, hasResized: false } );
 	const [ yAxisSize, setYAxisSize ] = useState( { clientWidth: 0, hasResized: false } );
-	const { hasResized } = sizing;
 
 	// Callback to handle tooltip changes.
 	// Needs to be memoized to avoid assigning children a new function every render.
@@ -72,15 +71,15 @@ function Chart( {
 		}
 	}, [] );
 
-	const handleYAxisSizeChange = useCallback( ( contentRect ) => {
+	const handleYAxisSizeChange = ( contentRect ) => {
 		setYAxisSize( ( prevSizing ) => {
 			const clientWidth = contentRect.width;
 			if ( ! prevSizing.hasResized || clientWidth !== prevSizing.clientWidth ) {
 				return { clientWidth, hasResized: true };
 			}
 			return prevSizing;
 		} );
-	}, [] );
+	};
 
 	const yAxisRef = useWindowResizeCallback( handleYAxisSizeChange );
 
@@ -98,7 +97,7 @@ function Chart( {
 				return prevSizing;
 			} );
 		},
-		[ yAxisSize ]
+		[ yAxisRef, yAxisSize.clientWidth ]
 	);
 
 	// Subscribe to changes to element size and position.
@@ -134,15 +133,8 @@ function Chart( {
 			isEmptyChart: Boolean( ! nextVals.some( ( a ) => a > 0 ) ),
 			yMax: getYAxisMax( nextVals ),
 		};
-	}, [ data, maxBars, hasResized, sliceFromBeginning ] );
-
-	// Recover the chart with data even if no sizing is updated on the first loading.
-	// If we don't have any sizing info yet, render an empty chart with the ref.
-	// if ( ! hasResized ) {
-	// 	return <div ref={ resizeRef } className="chart" />;
-	// }
+	}, [ data, maxBars, sliceFromBeginning ] );
 
-	// Otherwise, render full chart.
 	const { isTooltipVisible, tooltipContext, tooltipPosition, tooltipData } = tooltip;
 
 	return (