Boost: Add cornerstone pages support

projects/plugins/boost/.phan/baseline.php

@@ -12,11 +12,11 @@
     // PhanTypeArraySuspiciousNullable : 15+ occurrences
     // PhanPluginDuplicateConditionalNullCoalescing : 10+ occurrences
     // PhanTypeMismatchArgumentNullableInternal : 10+ occurrences
-    // PhanTypeMismatchReturnProbablyReal : 10+ occurrences
     // PhanTypeArraySuspicious : 9 occurrences
     // PhanTypeMismatchArgument : 8 occurrences
     // PhanParamTooMany : 6 occurrences
     // PhanPossiblyUndeclaredVariable : 6 occurrences
+    // PhanTypeMismatchReturnProbablyReal : 6 occurrences
     // PhanUndeclaredConstant : 5 occurrences
     // PhanUndeclaredFunction : 4 occurrences
     // PhanPluginUseReturnValueInternalKnown : 3 occurrences
@@ -49,12 +49,7 @@
         'app/data-sync/Performance_History_Entry.php' => ['PhanPluginDuplicateConditionalNullCoalescing', 'PhanTypeArraySuspicious'],
         'app/lib/class-cli.php' => ['PhanPluginDuplicateConditionalNullCoalescing', 'PhanTypeMismatchArgument'],
         'app/lib/critical-css/Critical_CSS_State.php' => ['PhanPluginDuplicateConditionalNullCoalescing', 'PhanTypeArraySuspiciousNullable'],
-        'app/lib/critical-css/source-providers/providers/Archive_Provider.php' => ['PhanTypeMismatchReturnProbablyReal'],
-        'app/lib/critical-css/source-providers/providers/Post_ID_Provider.php' => ['PhanTypeMismatchReturnProbablyReal'],
         'app/lib/critical-css/source-providers/providers/Provider.php' => ['PhanTypeMismatchArgumentInternal'],
-        'app/lib/critical-css/source-providers/providers/Singular_Post_Provider.php' => ['PhanTypeMismatchReturnProbablyReal'],
-        'app/lib/critical-css/source-providers/providers/Taxonomy_Provider.php' => ['PhanTypeMismatchReturnProbablyReal'],
-        'app/lib/critical-css/source-providers/providers/WP_Core_Provider.php' => ['PhanTypeMismatchReturnProbablyReal'],
         'app/lib/minify/Concatenate_CSS.php' => ['PhanPluginUseReturnValueInternalKnown', 'PhanTypeMismatchArgument'],
         'app/lib/minify/Concatenate_JS.php' => ['PhanPluginUseReturnValueInternalKnown', 'PhanPossiblyUndeclaredVariable', 'PhanTypeInvalidUnaryOperandIncOrDec', 'PhanTypeMismatchArgument', 'PhanTypeMismatchArgumentNullableInternal', 'PhanTypePossiblyInvalidDimOffset'],
         'app/lib/minify/Dependency_Path_Mapping.php' => ['PhanUndeclaredConstant'],

projects/plugins/boost/app/admin/class-config.php

@@ -21,21 +21,22 @@ public function constants() {
 		$internal_path = apply_filters( 'jetpack_boost_asset_internal_path', 'app/assets/dist/' );
 
 		$constants = array(
-			'version'         => JETPACK_BOOST_VERSION,
-			'pluginDirUrl'    => untrailingslashit( JETPACK_BOOST_PLUGINS_DIR_URL ),
-			'assetPath'       => plugins_url( $internal_path, JETPACK_BOOST_PATH ),
-			'canResizeImages' => wp_image_editor_supports( array( 'methods' => array( 'resize' ) ) ),
-			'site'            => array(
+			'version'             => JETPACK_BOOST_VERSION,
+			'pluginDirUrl'        => untrailingslashit( JETPACK_BOOST_PLUGINS_DIR_URL ),
+			'assetPath'           => plugins_url( $internal_path, JETPACK_BOOST_PATH ),
+			'canResizeImages'     => wp_image_editor_supports( array( 'methods' => array( 'resize' ) ) ),
+			'site'                => array(
 				'url'    => get_home_url(),
 				'domain' => ( new Status() )->get_site_suffix(),
 				'online' => ! ( new Status() )->is_offline_mode() && ! ( new Status() )->is_private_site(),
 				'host'   => ( new Host() )->get_known_host_guess(),
 			),
-			'api'             => array(
+			'api'                 => array(
 				'namespace' => JETPACK_BOOST_REST_NAMESPACE,
 				'prefix'    => JETPACK_BOOST_REST_PREFIX,
 			),
-			'postTypes'       => (object) $this->get_custom_post_types(),
+			'postTypes'           => (object) $this->get_custom_post_types(),
+			'developmentFeatures' => defined( 'JETPACK_BOOST_DEVELOPMENT_FEATURES' ) && JETPACK_BOOST_DEVELOPMENT_FEATURES,
 		);
 
 		/**

projects/plugins/boost/app/assets/src/js/features/cornerstone-pages/cornerstone-pages.tsx

@@ -0,0 +1,29 @@
+import { __ } from '@wordpress/i18n';
+import Meta from './meta/meta';
+import SettingsItem from '$features/ui/settings-item/settings-item';
+import Pill from '$features/ui/pill/pill';
+
+const CornerstonePages = () => {
+	return (
+		<SettingsItem
+			title={
+				<>
+					{ __( 'Cornerstone Pages', 'jetpack-boost' ) }
+					<Pill text="Experimental" />
+				</>
+			}
+			description={
+				<p>
+					{ __(
+						'List the most important pages of your site. These pages will receive specially tailored optimizations, including targeted critical CSS. The Page Speed scores are based on the first cornerstone page.',
+						'jetpack-boost'
+					) }
+				</p>
+			}
+		>
+			<Meta />
+		</SettingsItem>
+	);
+};
+
+export default CornerstonePages;

projects/plugins/boost/app/assets/src/js/features/cornerstone-pages/lib/stores/cornerstone-pages.ts

@@ -0,0 +1,39 @@
+import { useDataSync } from '@automattic/jetpack-react-data-sync-client';
+import { z } from 'zod';
+
+/**
+ * Hook to get the Cornerstone Pages.
+ */
+export function useCornerstonePages(): [
+	string[],
+	( newValue: string[], onSuccessCallback?: () => void ) => void,
+] {
+	const [ { data }, { mutate } ] = useDataSync(
+		'jetpack_boost_ds',
+		'cornerstone_pages_list',
+		z.array( z.string() )
+	);
+
+	function updatePages( newValue: string[], onSuccessCallback?: () => void ) {
+		mutate( newValue, {
+			onSuccess: onSuccessCallback,
+		} );
+	}
+
+	return [ data || [], updatePages ];
+}
+
+const CornerstonePagesProperties = z.object( {
+	max_pages: z.number(),
+} );
+type CornerstonePagesProperties = z.infer< typeof CornerstonePagesProperties >;
+
+export function useCornerstonePagesProperties(): CornerstonePagesProperties | undefined {
+	const [ { data } ] = useDataSync(
+		'jetpack_boost_ds',
+		'cornerstone_pages_properties',
+		CornerstonePagesProperties
+	);
+
+	return data;
+}

projects/plugins/boost/app/assets/src/js/features/cornerstone-pages/meta/meta.module.scss

@@ -0,0 +1,111 @@
+.wrapper {
+	font-size: 14px;
+	line-height: 22px;
+
+	:global(button ~ button) {
+		margin-left: 20px !important;
+	}
+
+	.head {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+
+		:global(svg) {
+			fill: var(--jetpack-green-40);
+		}
+
+		.summary {
+			flex-grow: 1;
+			margin-right: 5px;
+			color: var(--gray-40);
+		}
+	}
+
+	.body {
+		margin-top: 16px;
+
+		.section {
+			padding: 16px;
+			border-radius: 4px;
+			background-color: var(--gray-0);
+
+			& ~ .section {
+				margin-top: 16px;
+			}
+
+			&.has-error {
+				textarea {
+					border-color: var( --red-40 );
+				}
+
+				.error-message {
+					display: block;
+					color: var( --red-40 );
+				}
+
+				.error {
+					color: var( --red-40 );
+				}
+			}
+
+			.title {
+				margin-bottom: 16px;
+				font-size: 16px;
+				line-height: 1;
+				font-weight: 600;
+			}
+
+			textarea {
+				display: block;
+				margin-bottom: 8px;
+				width: 100%;
+				padding: 12px 16px;
+				border-radius: 4px;
+				border: 1px solid var( --gray-10 );
+				background: var( --primary-white );
+				color: #000;
+			}
+
+			.error-message {
+				display: none;
+			}
+
+			.description {
+				margin-top: 8px;
+				font-size: 14px;
+				line-height: 1.5;
+				color: var( --gray-60 );
+				font-weight: 400;
+			}
+
+			label {
+				display: block;
+				font-size: 16px;
+				line-height: 1.5;
+
+				&:not(:last-child) {
+					margin-bottom: 8px;
+				}
+			}
+		}
+
+		.button {
+			margin-top: 16px;
+		}
+	}
+
+	.see-logs-link {
+		font-size: 16px;
+		line-height: 1.5;
+	}
+
+	.logging-toggle {
+		margin-right: 1em;
+		float: left;
+	}
+
+	.clearfix {
+		clear: both;
+	}
+}