Check for version control, display notice

wp-modules/api-data/api-data.php

@@ -13,6 +13,8 @@
 
 use WP_REST_Request;
 use WP_REST_Response;
+use function \PatternManager\GetVersionControl\get_dismissed_themes;
+use function \PatternManager\GetVersionControl\get_version_control_meta_key;
 
 // Exit if accessed directly.
 if ( ! defined( 'ABSPATH' ) ) {
@@ -67,6 +69,16 @@ function register_routes() {
 			),
 		)
 	);
+
+	register_rest_route(
+		$namespace,
+		'/update-dismissed-themes',
+		array(
+			'methods'             => 'POST',
+			'callback'            => __NAMESPACE__ . '\update_dismissed_themes',
+			'permission_callback' => __NAMESPACE__ . '\permission_check',
+		)
+	);
 }
 add_action( 'rest_api_init', __NAMESPACE__ . '\register_routes', 11 );
 
@@ -107,6 +119,26 @@ function delete_pattern( $request ) {
 		: new WP_REST_Response( $is_success, 400 );
 }
 
+/**
+ * Updates the list of theme names that should not show version control notifications.
+ *
+ * @param WP_REST_Request $request Full data about the request.
+ * @return WP_REST_Response
+ */
+function update_dismissed_themes( $request ) {
+	$dismissed_themes = array_merge( get_dismissed_themes(), (array) wp_get_theme()->get( 'Name' ) );
+	$is_success       = update_user_meta( get_current_user_id(), get_version_control_meta_key(), $dismissed_themes );
+
+	return $is_success
+		? new WP_REST_Response(
+			array(
+				'message' => __( 'Version control notifications dismissed for this theme.', 'pattern-manager' ),
+			),
+			200
+		)
+		: new WP_REST_Response( $is_success, 400 );
+}
+
 /**
  * Check the permissions required to take this action.
  *

wp-modules/api-data/tests/ApiDataTest.php

@@ -70,6 +70,7 @@ public function test_register_routes_authorized() {
 				'/pattern-manager/v1',
 				'/pattern-manager/v1/get-pattern-names',
 				'/pattern-manager/v1/delete-pattern',
+				'/pattern-manager/v1/update-dismissed-themes',
 			],
 			array_keys( rest_get_server()->get_routes( 'pattern-manager/v1' ) )
 		);

wp-modules/app/app.php

@@ -11,6 +11,8 @@
 
 namespace PatternManager\App;
 
+use function PatternManager\GetVersionControl\check_version_control_notice_should_show;
+
 // Exit if accessed directly.
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
@@ -21,14 +23,16 @@
  */
 function get_app_state() {
 	return array(
-		'patterns'          => \PatternManager\PatternDataHandlers\get_theme_patterns_with_editor_links(),
-		'patternCategories' => \WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(),
-		'apiNonce'          => wp_create_nonce( 'wp_rest' ),
-		'apiEndpoints'      => array(
-			'deletePatternEndpoint' => get_rest_url( false, 'pattern-manager/v1/delete-pattern/' ),
+		'patterns'                 => \PatternManager\PatternDataHandlers\get_theme_patterns_with_editor_links(),
+		'patternCategories'        => \WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(),
+		'apiNonce'                 => wp_create_nonce( 'wp_rest' ),
+		'apiEndpoints'             => array(
+			'deletePatternEndpoint'         => get_rest_url( false, 'pattern-manager/v1/delete-pattern/' ),
+			'updateDismissedThemesEndpoint' => get_rest_url( false, 'pattern-manager/v1/update-dismissed-themes/' ),
 		),
-		'siteUrl'           => get_bloginfo( 'url' ),
-		'adminUrl'          => admin_url(),
+		'siteUrl'                  => get_bloginfo( 'url' ),
+		'adminUrl'                 => admin_url(),
+		'showVersionControlNotice' => check_version_control_notice_should_show( wp_get_theme()->get( 'Name' ) ),
 	);
 }
 

wp-modules/app/js/src/components/App/index.scss

@@ -129,6 +129,22 @@ html body.toplevel_page_pattern-manager {
 		}
 	}
 
+	.patternmanager-version-control-notice {
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 3rem;
+		padding-right: 12px;
+		padding-left: 12px;
+
+		.components-notice__content {
+			margin-right: 0;
+
+			span {
+				font-weight: 600;
+			}
+		}
+	}
+
 	.patternmanager-pattern-editor-columns {
 		width: 100%;
 		height: calc(100vh - 64px - 32px);

wp-modules/app/js/src/components/App/index.tsx

@@ -15,20 +15,25 @@ import PatternManagerContext from '../../contexts/PatternManagerContext';
 
 // Hooks
 import usePatterns from '../../hooks/usePatterns';
+import useVersionControl from '../../hooks/useVersionControl';
 
 // Components
 import Header from '../Header';
 import Patterns from '../Patterns';
 const PatternGridActions: PatternGridActionsType = loadable(
 	async () => import( '../Patterns/PatternGridActions' )
 );
+import VersionControlNotice from '../VersionControlNotice';
 
 // Types
 import type { InitialContext } from '../../types';
 import { PatternGridActionsType } from '../Patterns/PatternGridActions';
 
 export default function App() {
 	const patterns = usePatterns( patternManager.patterns );
+	const versionControl = useVersionControl(
+		Boolean( patternManager.showVersionControlNotice )
+	);
 
 	const providerValue: InitialContext = {
 		patterns,
@@ -38,6 +43,12 @@ export default function App() {
 		<PatternManagerContext.Provider value={ providerValue }>
 			<Header />
 			<Patterns
+				Notice={
+					<VersionControlNotice
+						isVisible={ versionControl.displayNotice }
+						handleDismiss={ versionControl.updateDismissedThemes }
+					/>
+				}
 				PatternActions={ PatternGridActions }
 				patternCategories={ patternManager.patternCategories }
 				patterns={ patterns.data }

wp-modules/app/js/src/components/Patterns/index.tsx

@@ -20,6 +20,7 @@ import type { PatternsProps } from '../../types';
 
 export default function Patterns( {
 	onSelectPattern,
+	Notice,
 	PatternActions,
 	patternCategories,
 	patterns,
@@ -45,6 +46,7 @@ export default function Patterns( {
 	return (
 		<div className="pattern-manager-theme-patterns">
 			<div className="patterns-container-inner">
+				{ Notice }
 				{ ! Object.entries( patterns ?? {} ).length ? (
 					<div className="grid-empty">
 						{ createInterpolateElement(

wp-modules/app/js/src/components/VersionControlNotice/index.tsx

@@ -0,0 +1,28 @@
+// WP dependencies
+import { __ } from '@wordpress/i18n';
+import { Notice } from '@wordpress/components';
+
+type Props = {
+	isVisible: boolean;
+	handleDismiss: () => void;
+};
+
+/** Display a notice if no version control is detected in the theme. */
+export default function VersionControlNotice( {
+	isVisible,
+	handleDismiss,
+}: Props ) {
+	return isVisible ? (
+		<Notice
+			className="patternmanager-version-control-notice"
+			isDismissible
+			status="warning"
+			onRemove={ handleDismiss }
+		>
+			{ __(
+				'No version control detected for this theme. We recommend adding version control so you do not lose your patterns during theme updates.',
+				'pattern-manager'
+			) }
+		</Notice>
+	) : null;
+}

wp-modules/app/js/src/hooks/useVersionControl.ts

@@ -0,0 +1,28 @@
+import { useState } from '@wordpress/element';
+import { patternManager } from '../globals';
+import getHeaders from '../utils/getHeaders';
+import type { Theme } from '../types';
+
+export default function useVersionControl(
+	initialVersionControlNotice: boolean
+) {
+	const [ displayNotice, setDisplayNotice ] = useState(
+		initialVersionControlNotice
+	);
+
+	function updateDismissedThemes() {
+		setDisplayNotice( false );
+		return fetch(
+			patternManager.apiEndpoints.updateDismissedThemesEndpoint,
+			{
+				method: 'POST',
+				headers: getHeaders(),
+			}
+		);
+	}
+
+	return {
+		displayNotice,
+		updateDismissedThemes,
+	};
+}

wp-modules/app/js/src/types.ts

@@ -1,4 +1,5 @@
 import usePatterns from './hooks/usePatterns';
+import versionControl from './hooks/useVersionControl';
 
 export type PatternManagerViews = 'theme_patterns' | 'pattern_editor';
 
@@ -10,11 +11,14 @@ export type InitialPatternManager = {
 	adminUrl: string;
 	apiEndpoints: {
 		deletePatternEndpoint: string;
+		updateDismissedThemesEndpoint: string;
 	};
 	apiNonce: string;
 	patternCategories: QueriedCategories;
 	patterns: Patterns;
 	siteUrl: string;
+	themeName: string;
+	showVersionControlNotice: boolean;
 };
 
 export type Pattern = {
@@ -42,9 +46,14 @@ export type PatternsProps = {
 	patternCategories: InitialPatternManager[ 'patternCategories' ];
 	PatternActions?: ( props: { patternData: Pattern } ) => JSX.Element;
 	siteUrl: string;
+	Notice?: JSX.Element;
 };
 
 export type QueriedCategories = {
 	label: string;
 	name: string;
 }[];
+
+export type Theme = {
+	name: string;
+};

wp-modules/app/tests/AppTest.php

@@ -28,6 +28,7 @@ public function test_get_app_state() {
 				'apiEndpoints',
 				'siteUrl',
 				'adminUrl',
+				'showVersionControlNotice',
 			],
 			array_keys( get_app_state() )
 		);

wp-modules/get-version-control/get-version-control.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Module Name: Get Version Control
+ * Description: Checks the current theme directory for version control.
+ * Namespace: GetVersionControl
+ *
+ * @package pattern-manager
+ */
+
+declare(strict_types=1);
+
+namespace PatternManager\GetVersionControl;
+
+/**
+ * Gets the meta key for storing version control notice dismissals.
+ *
+ * @return string
+ */
+function get_version_control_meta_key() {
+	return 'patternmanager_version_control_notice_dismissed_themes';
+}
+
+/**
+ * Gets the list of themes that have had version control notices dismissed by the user.
+ *
+ * @return array
+ */
+function get_dismissed_themes() {
+	$dismissed_themes = get_user_meta( get_current_user_id(), get_version_control_meta_key(), true );
+	return ! empty( $dismissed_themes ) ? $dismissed_themes : [];
+}
+
+/**
+ * Determines if the version control notice should be displayed.
+ *
+ * @param string $theme_name The theme name to check against previously dismissed notices.
+ * @param string $version_control The version control directory to check.
+ * @return boolean
+ */
+function check_version_control_notice_should_show( $theme_name, $version_control = '/.git' ) {
+	return ! check_theme_name_dismissed( $theme_name ) && ! check_for_version_control_in_theme( $version_control );
+}
+
+/**
+ * Checks for a version control folder in the current theme.
+ *
+ * @param string $version_control The version control directory to check.
+ * @return boolean
+ */
+function check_for_version_control_in_theme( $version_control ) {
+	return file_exists( get_template_directory() . $version_control );
+}
+
+/**
+ * Checks if the version control notice has already been dismissed for a given theme.
+ *
+ * @param string $theme_name The theme name.
+ * @return boolean
+ */
+function check_theme_name_dismissed( $theme_name ) {
+	return in_array( $theme_name, get_dismissed_themes(), true );
+}