[not verified] Merge branch 'master' into add/disconnect-modal-click-…

…events

.github/files/list-changed-projects.sh

@@ -32,4 +32,4 @@ else
 	die "Unsupported GITHUB_EVENT_NAME \"$GITHUB_EVENT_NAME\""
 fi
 
-pnpx jetpack dependencies list "${ARGS[@]}" | jq -cR 'reduce inputs as $i ({}; .[$i] |= true)'
+pnpx jetpack dependencies list "${ARGS[@]}" | jq -ncR 'reduce inputs as $i ({}; .[$i] |= true)'

.github/files/setup-wordpress-env.sh

@@ -35,12 +35,6 @@ case "$WP_BRANCH" in
 		;;
 	latest)
 		LATEST=$(php ./tools/get-wp-version.php)
-		# 5.8.x still requires a monkey-patched obsolete version of phpunit.
-		# If that's latest, run the coverage test with the upcoming 5.9 instead.
-		# @todo: Remove this once WordPress 5.9 is "latest".
-		if [[ "$LATEST" == 5.8.* && "$TEST_SCRIPT" == "test-coverage" ]]; then
-			LATEST=master
-		fi
 		git clone --depth=1 --branch "$LATEST" git://develop.git.wordpress.org/ /tmp/wordpress-latest
 		;;
 	previous)

projects/js-packages/components/changelog/update-my-jetpack-styles

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+RNA: Improve layout structure with Container and Col

projects/js-packages/components/components/admin-page/index.jsx

@@ -9,8 +9,10 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import AdminPageHeader from './header';
-import AdminPageFooter from './footer';
+import JetpackFooter from '../jetpack-footer';
+import JetpackLogo from '../jetpack-logo';
+import Container from '../layout/container';
+import Col from '../layout/col';
 
 /**
  * This is the base structure for any admin page. It comes with Header and Footer.
@@ -24,10 +26,24 @@ const AdminPage = props => {
 	const { children, moduleName, a8cLogoHref, showHeader, showFooter } = props;
 
 	return (
-		<div className={ styles[ 'jp-admin-page' ] }>
-			{ showHeader && <AdminPageHeader /> }
-			{ children }
-			{ showFooter && <AdminPageFooter moduleName={ moduleName } a8cLogoHref={ a8cLogoHref } /> }
+		<div className={ styles[ 'admin-page' ] }>
+			{ showHeader && (
+				<Container horizontalSpacing={ 5 }>
+					<Col>
+						<JetpackLogo />
+					</Col>
+				</Container>
+			) }
+			<Container fluid horizontalSpacing={ 0 }>
+				<Col>{ children }</Col>
+			</Container>
+			{ showFooter && (
+				<Container horizontalSpacing={ 5 }>
+					<Col>
+						<JetpackFooter moduleName={ moduleName } a8cLogoHref={ a8cLogoHref } />
+					</Col>
+				</Container>
+			) }
 		</div>
 	);
 };

projects/js-packages/components/components/admin-page/style.module.scss

@@ -1,10 +1,8 @@
-@import '@automattic/jetpack-base-styles/style';
-
-.jp-admin-page {
+.admin-page {
 	margin-left: -20px; // to neutralize the padding of #wpcontent.
-}
+	background-color: var(--jp-white);
 
-.jp-admin-page-section {
-	padding: 40px 0px;
-	background-color: white;
+	@media (max-width: 782px) {
+		margin-left: -10px; // to neutralize the padding of #wpcontent.
+	}
 }

projects/js-packages/components/components/admin-section/basic/index.jsx

@@ -7,7 +7,6 @@ import React from 'react';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import Container from '../../layout/container';
 
 /**
  * This is the wrapper component to build sections within your admin page.
@@ -17,11 +16,7 @@ import Container from '../../layout/container';
  */
 const AdminSection = props => {
 	const { children } = props;
-	return (
-		<div className={ styles[ 'jp-admin-section' ] }>
-			<Container>{ children }</Container>
-		</div>
-	);
+	return <div className={ styles.section }>{ children }</div>;
 };
 
 export default AdminSection;

projects/js-packages/components/components/admin-section/basic/style.module.scss

@@ -1,6 +1,3 @@
-
-.jp-admin-section {
-	padding: 64px 0px;
-	background-color: white;
-
+.section {
+	background-color: var(--jp-white);
 }