Merge branch 'develop' into enhancement/#9316-fix-as-flaky-tests.

.github/workflows/e2e-tests.yml

@@ -82,7 +82,7 @@ jobs:
  wp_version: ['latest', 'nightly']
  include:
  - amp_version: '1.5.5'
- wp_version: '5.2.16'
+ wp_version: '5.2.21'
  env:
  AMP_VERSION: ${{ matrix.amp_version }}
  WP_VERSION: ${{ matrix.wp_version }}

.github/workflows/zips.yml

@@ -65,11 +65,6 @@ on:
  description: Release version
  required: false
  default: ''
- dry_run:
- type: boolean
- description: Run the publishing process without committing.
- required: false
- default: false
 
 concurrency:
  group: zips-${{ github.event_name }}-${{ github.ref }}
@@ -223,6 +218,31 @@ jobs:
  edit-mode: replace
  body: Build files for ${{ github.event.pull_request.head.sha }} have been deleted.
 
+ dryrun-publish-to-wporg:
+ name: '[DRY RUN] Publish to WordPress.org'
+ runs-on: ubuntu-latest
+ # environment: do not define to omit SVN credentials + deployment protection rules for this dry-run.
+ if: github.event_name == 'workflow_dispatch' && ( github.ref_type == 'tag' || inputs.release_version != '' )
+ needs: build-zips
+ timeout-minutes: 20
+ steps:
+ - uses: actions/download-artifact@v4
+ with:
+ name: zip-files
+ path: /tmp
+ - name: Extract
+ run: |
+ unzip /tmp/google-site-kit.zip
+ - uses: 10up/action-wordpress-plugin-deploy@2.2.2
+ with:
+ dry-run: true
+ env:
+ BUILD_DIR: ./google-site-kit
+ SLUG: google-site-kit
+ SVN_PASSWORD: no-op-password
+ SVN_USERNAME: no-op-username
+ VERSION: ${{ inputs.release_version }}
+
  publish-to-wporg:
  name: Publish to WordPress.org
  runs-on: ubuntu-latest
@@ -239,8 +259,6 @@ jobs:
  run: |
  unzip /tmp/google-site-kit.zip
  - uses: 10up/action-wordpress-plugin-deploy@2.2.2
- with:
- dry-run: ${{ inputs.dry_run }}
  env:
  BUILD_DIR: ./google-site-kit
  SLUG: google-site-kit

.storybook/preview.js

@@ -75,7 +75,14 @@ export const decorators = [
  }
 
  return (
- <WithTestRegistry features={ features } route={ route }>
+ <WithTestRegistry
+ features={ features }
+ route={ route }
+ // Expose registry as global for tinkering.
+ callback={ ( registry ) => {
+ global.registry = registry;
+ } }
+ >
  <Story />
  </WithTestRegistry>
  );

assets/js/components/KeyMetrics/ChangeMetricsLink.stories.js

@@ -24,6 +24,7 @@ import {
  provideUserAuthentication,
 } from '../../../../tests/js/utils';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import { KM_ANALYTICS_NEW_VISITORS } from '../../googlesitekit/datastore/user/constants';
 import ChangeMetricsLink from './ChangeMetricsLink';
 
 function Template() {
@@ -43,7 +44,9 @@ export default {
  ( Story ) => {
  const setupRegistry = ( registry ) => {
  provideUserAuthentication( registry );
- provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
+ provideKeyMetrics( registry, {
+ widgetSlugs: [ KM_ANALYTICS_NEW_VISITORS ],
+ } );
  };
 
  return (

assets/js/components/KeyMetrics/ChangeMetricsLink.test.js

@@ -34,6 +34,7 @@ import {
 } from '../../../../tests/js/mock-survey-endpoints';
 import { CORE_UI } from '../../googlesitekit/datastore/ui/constants';
 import { KEY_METRICS_SELECTION_PANEL_OPENED_KEY } from './constants';
+import { KM_ANALYTICS_LEAST_ENGAGING_PAGES } from '../../googlesitekit/datastore/user/constants';
 import ChangeMetricsLink from './ChangeMetricsLink';
 
 describe( 'ChangeMetricsLink', () => {
@@ -74,17 +75,23 @@ describe( 'ChangeMetricsLink', () => {
  } );
 
  it( 'should render a button to change metrics', () => {
- provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
+ provideKeyMetrics( registry, {
+ widgetSlugs: [ KM_ANALYTICS_LEAST_ENGAGING_PAGES ],
+ } );
 
- const { queryByRole } = render( <ChangeMetricsLink />, { registry } );
+ const { queryByRole } = render( <ChangeMetricsLink />, {
+ registry,
+ } );
 
  const button = queryByRole( 'button' );
  expect( button ).toBeInTheDocument();
  expect( button ).toHaveTextContent( 'Change metrics' );
  } );
 
  it( 'should set UI store key correctly when button is clicked', () => {
- provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
+ provideKeyMetrics( registry, {
+ widgetSlugs: [ KM_ANALYTICS_LEAST_ENGAGING_PAGES ],
+ } );
 
  registry
  .dispatch( CORE_UI )
@@ -104,7 +111,9 @@ describe( 'ChangeMetricsLink', () => {
  } );
 
  it( 'should trigger a survey when viewed', async () => {
- provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
+ provideKeyMetrics( registry, {
+ widgetSlugs: [ KM_ANALYTICS_LEAST_ENGAGING_PAGES ],
+ } );
  provideSiteInfo( registry, { keyMetricsSetupCompletedBy: 1 } );
  mockSurveyEndpoints();
 
@@ -120,7 +129,9 @@ describe( 'ChangeMetricsLink', () => {
  } );
 
  it( 'should trigger two surveys when the key metrics setup is completed by current user', async () => {
- provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
+ provideKeyMetrics( registry, {
+ widgetSlugs: [ KM_ANALYTICS_LEAST_ENGAGING_PAGES ],
+ } );
  provideSiteInfo( registry, { keyMetricsSetupCompletedBy: 1 } );
  provideUserInfo( registry, { id: 1 } );
  fetchMock.post( surveyTriggerEndpoint, {

assets/js/components/KeyMetrics/KeyMetricsCTAContent.js

@@ -22,6 +22,7 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useIntersection } from 'react-use';
+import { useWindowWidth } from '@react-hook/window-size/throttled';
 
 /**
  * WordPress dependencies
@@ -34,11 +35,18 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from 'googlesitekit-data';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
-import { BREAKPOINT_SMALL, useBreakpoint } from '../../hooks/useBreakpoint';
+import {
+ useBreakpoint,
+ BREAKPOINT_TABLET,
+ BREAKPOINT_SMALL,
+} from '../../hooks/useBreakpoint';
 import { WEEK_IN_SECONDS, trackEvent } from '../../util';
 import useViewContext from '../../hooks/useViewContext';
 import { Cell, Grid, Row } from '../../material-components';
-import GhostCardsSVG from './GhostCards';
+import KeyMetricsSetupDesktopSVG from './KeyMetricsSetupDesktopSVG';
+import KeyMetricsSetupSmallDesktopSVG from './KeyMetricsSetupSmallDesktopSVG';
+import KeyMetricsSetupTabletSVG from './KeyMetricsSetupTabletSVG';
+import KeyMetricsSetupMobileSVG from './KeyMetricsSetupMobileSVG';
 
 export default function KeyMetricsCTAContent( {
  className,
@@ -49,8 +57,27 @@ export default function KeyMetricsCTAContent( {
 } ) {
  const trackingRef = useRef();
  const breakpoint = useBreakpoint();
+ const onlyWidth = useWindowWidth();
  const viewContext = useViewContext();
  const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;
+ let isTabletBreakpoint =
+ breakpoint === BREAKPOINT_TABLET && onlyWidth < 960;
+ // onlyWidth is used directly here since BREAKPOINT_XLARGE only
+ // accounts for screens that are over 1280px and current layout graphic should
+ // show on the screens starting from size of 1280px and over.
+ const isDesktopBreakpoint = onlyWidth >= 1280;
+ // Also here, BREAKPOINT_DESKTOP accounts for screens over 960, in this particular case
+ // graphic should be shown on screens starting from 960px.
+ let isSmallDesktopBreakpoint = onlyWidth >= 960 && onlyWidth < 1280;
+
+ if ( ! ga4Connected ) {
+ // When 4 metrics were selected and then GA4 was disconnected
+ // the full width disconnected banner can display desktop layout
+ // graphic, since it has very short text.
+ isTabletBreakpoint =
+ breakpoint === BREAKPOINT_TABLET && onlyWidth < 800;
+ isSmallDesktopBreakpoint = onlyWidth >= 800 && onlyWidth < 1280;
+ }
 
  const intersectionEntry = useIntersection( trackingRef, {
  threshold: 0.25,
@@ -99,30 +126,45 @@ export default function KeyMetricsCTAContent( {
  >
  <Grid>
  <Row>
- <Cell smSize={ 6 } mdSize={ 5 } lgSize={ 6 }>
+ <Cell
+ smSize={ 5 }
+ mdSize={ 6 }
+ lgSize={ 5 }
+ className="googlesitekit-widget-key-metrics-content__wrapper"
+ >
  <div className="googlesitekit-widget-key-metrics-text__wrapper">
  <h3 className="googlesitekit-publisher-win__title">
  { title }
  </h3>
  <p>{ description }</p>
  </div>
+ <div className="googlesitekit-widget-key-metrics-actions__wrapper">
+ { actions }
+ </div>
+ { isTabletBreakpoint && (
+ <Cell className="googlesitekit-widget-key-metrics-svg__wrapper">
+ <KeyMetricsSetupTabletSVG />
+ </Cell>
+ ) }
  { isMobileBreakpoint && (
  <Cell className="googlesitekit-widget-key-metrics-svg__wrapper">
- <GhostCardsSVG />
+ <KeyMetricsSetupMobileSVG />
  </Cell>
  ) }
- <div className="googlesitekit-widget-key-metrics-actions__wrapper">
- { actions }
- </div>
  </Cell>
- { ! isMobileBreakpoint && (
+ { isSmallDesktopBreakpoint && (
+ <Cell className="googlesitekit-widget-key-metrics-svg__wrapper">
+ <KeyMetricsSetupSmallDesktopSVG />
+ </Cell>
+ ) }
+ { isDesktopBreakpoint && (
  <Cell
  className="googlesitekit-widget-key-metrics-svg__wrapper"
  smSize={ 6 }
  mdSize={ 3 }
  lgSize={ 6 }
  >
- <GhostCardsSVG />
+ <KeyMetricsSetupDesktopSVG />
  </Cell>
  ) }
  </Row>

assets/js/components/KeyMetrics/KeyMetricsCTAFooter.js

@@ -32,12 +32,28 @@ import { __ } from '@wordpress/i18n';
 import { Cell, Row } from '../../material-components';
 import Link from '../Link';
 
-export default function KeyMetricsCTAFooter( { onActionClick = () => {} } ) {
+export default function KeyMetricsCTAFooter( {
+ onActionClick = () => {},
+ showDismiss,
+} ) {
  return (
  <Row className="googlesitekit-widget-key-metrics-footer">
- <Cell size={ 12 }>
+ <Cell
+ size={ 12 }
+ className="googlesitekit-widget-key-metrics-footer__cta-wrapper"
+ >
+ { ! showDismiss && (
+ <p>
+ { __(
+ 'Intereseted in specific metrics?',
+ 'google-site-kit'
+ ) }
+ </p>
+ ) }
  <Link onClick={ onActionClick }>
- { __( 'Maybe later', 'google-site-kit' ) }
+ { showDismiss
+ ? __( 'Maybe later', 'google-site-kit' )
+ : __( 'Select your own metrics', 'google-site-kit' ) }
  </Link>
  </Cell>
  </Row>

assets/js/components/KeyMetrics/KeyMetricsNewBadge.js

@@ -26,8 +26,12 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from 'googlesitekit-data';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import Badge from '../Badge';
+import { isFeatureEnabled } from '../../features';
 
 export default function KeyMetricsNewBadge() {
+ const conversionReportingEnabled = isFeatureEnabled(
+ 'conversionReporting'
+ );
  // This is necessary to conditionally render the badge
  // as this component is used in a context where `select` is not in scope.
  const isKeyMetricsSetupNew = useSelect( ( select ) =>
@@ -50,7 +54,13 @@ export default function KeyMetricsNewBadge() {
  }
  }, [ initialKeyMetricsSetupCompleted, isKeyMetricsSetupCompleted ] );
 
- if ( ! isNew ) {
+ // In new ACR design "New" badge is shown only initially before
+ // KMW is setup, afterwards, "New" badge is not visible anymore.
+ if ( conversionReportingEnabled && isKeyMetricsSetupCompleted ) {
+ return null;
+ }
+
+ if ( ! isNew && ! conversionReportingEnabled ) {
  return null;
  }
 

assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js

@@ -154,16 +154,18 @@ function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {
  <Widget
  noPadding
  Footer={ () => (
- <KeyMetricsCTAFooter onActionClick={ dismissCallback } />
+ <KeyMetricsCTAFooter
+ onActionClick={ openMetricsSelectionPanel }
+ />
  ) }
  >
  <KeyMetricsCTAContent
  title={ __(
- 'Get metrics and suggestions tailored to your specific site goals',
+ 'Get personalized suggestions for user interaction metrics based on your goals',
  'google-site-kit'
  ) }
  description={ __(
- 'Answer 3 questions to show relevant stats for your site',
+ 'Answer 3 questions and we’ll suggest relevant metrics for your dashboard. These metrics will help you track how users interact with your site.',
  'google-site-kit'
  ) }
  actions={
@@ -176,11 +178,8 @@ function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {
  >
  { __( 'Get tailored metrics', 'google-site-kit' ) }
  </Button>
- <Button tertiary onClick={ openMetricsSelectionPanel }>
- { __(
- 'I’ll pick metrics myself',
- 'google-site-kit'
- ) }
+ <Button tertiary onClick={ dismissCallback }>
+ { __( 'Maybe later', 'google-site-kit' ) }
  </Button>
  </Fragment>
  }

assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.test.js

@@ -250,7 +250,7 @@ describe( 'KeyMetricsSetupCTAWidget', () => {
  expect(
  container.querySelector( '.googlesitekit-publisher-win__title' )
  ).toHaveTextContent(
- 'Get metrics and suggestions tailored to your specific site goals'
+ 'Get personalized suggestions for user interaction metrics based on your goals'
  );
  const button = getByRole( 'button', { name: /get tailored metrics/i } );
  expect( button ).toBeInTheDocument();
@@ -369,7 +369,7 @@ describe( 'KeyMetricsSetupCTAWidget', () => {
  expect(
  container.querySelector( '.googlesitekit-publisher-win__title' )
  ).toHaveTextContent(
- 'Get metrics and suggestions tailored to your specific site goals'
+ 'Get personalized suggestions for user interaction metrics based on your goals'
  );
 
  // eslint-disable-next-line require-await