add git sidebar placeholder in the editor

admin/git-integration/git-themes.php

@@ -1,12 +1,12 @@
 <?php
 
-require_once( __DIR__ . '/git-wrapper.php' );
+require_once( dirname(dirname(__DIR__)) . '/lib/git-wrapper.php' );
 
 class Git_Themes {
     private static $git;
 
 	public static function create_admin_page() {
-        self::$git = Git_Wrapper::getGit();
+        self::$git = Git_Wrapper::getGit(CREATE_BLOCK_THEME_GIT_DIR);
         WP_Filesystem();
 
         ?>

includes/class-create-block-theme-api.php

@@ -1,5 +1,7 @@
 <?php
 
+require_once(__DIR__.'/class-git-themes-api.php');
+
 /**
  * The api functionality of the plugin leveraged by the site editor UI.
  *
@@ -8,12 +10,14 @@
  * @author     WordPress.org
  */
 class Create_Block_Theme_API {
+	private $git_api;
 
 	/**
 	 * Initialize the class and set its properties.
 	 */
 	public function __construct() {
 		add_action( 'rest_api_init', array( $this, 'register_rest_routes' ) );
+		$this -> git_api = new Git_Themes_API();
 	}
 
 	/**
@@ -97,6 +101,19 @@ public function register_rest_routes() {
 				},
 			)
 		);
+
+		// git integration routes
+		register_rest_route(
+			'create-block-theme/v1',
+			'/get-git-config',
+			array(
+				'methods'             => 'GET',
+				'callback'            => array( $this -> git_api, 'get_git_config' ),
+				'permission_callback' => function () {
+					return current_user_can( 'edit_theme_options' );
+				},
+			)
+		);
 	}
 
 	function rest_get_readme_data( $request ) {

includes/class-git-themes-api.php

@@ -0,0 +1,19 @@
+<?php
+
+require_once( dirname(__DIR__) . '/lib/git-wrapper.php' );
+
+class Git_Themes_API {
+    private $git;
+
+    public function __construct() {
+        $this -> git = Git_Wrapper::get_git(CREATE_BLOCK_THEME_GIT_DIR);
+    }
+
+    public function get_git_config() {
+        return array(
+            'version' => $this -> git -> get_version(),
+            'git_configured' => false,
+            'remote_url' => ''
+        );
+    }
+}

admin/git-integration/git-wrapper.php → lib/git-wrapper.php

@@ -9,10 +9,7 @@ function __construct( $repo_dir ) {
 	}
 
 	// singleton
-	public static function getGit($repo_dir='') {
-		if (empty($repo_dir)) {
-			$repo_dir = CREATE_BLOCK_THEME_GIT_DIR;
-		}
+	public static function get_git($repo_dir) {
 		if (empty($repo_dir)) {
 			return null;
 		}

src/git-sidebar/git-config.js

@@ -0,0 +1,48 @@
+import { __ } from '@wordpress/i18n';
+import {
+	// eslint-disable-next-line
+	__experimentalSpacer as Spacer,
+	// eslint-disable-next-line
+	__experimentalText as Text,
+	TextControl,
+} from '@wordpress/components';
+import { useState } from "@wordpress/element";
+
+export const GitIntegrationForm = function() {
+    const [ repository, setRepository ] = useState( {
+		url: '',
+		author_name: '',
+		author_email: '',
+	} );
+
+    return <>
+        <Text>
+            { __(
+                'Enter a repository Url to connect with current theme.',
+                'create-block-theme'
+            ) }
+        </Text>
+        <Spacer />
+        <TextControl
+            label={ __( 'Repository URL', 'create-block-theme' ) }
+            value={ repository.url }
+            onChange={ ( value ) =>
+                setRepository( { ...repository, url: value } )
+            }
+        />
+        <TextControl
+            label={ __( 'Author Name', 'create-block-theme' ) }
+            value={ repository.author_name }
+            onChange={ ( value ) =>
+                setRepository( { ...repository, author_name: value } )
+            }
+        />
+        <TextControl
+            label={ __( 'Author Email', 'create-block-theme' ) }
+            value={ repository.author_email }
+            onChange={ ( value ) =>
+                setRepository( { ...repository, author_email: value } )
+            }
+        />
+    </>
+}

src/git-sidebar/git-errors.js

@@ -0,0 +1,14 @@
+import { __ } from '@wordpress/i18n';
+import {
+	// eslint-disable-next-line
+	__experimentalText as Text,
+} from '@wordpress/components';
+
+export const GitNotInstalledError = function () {
+    return <Text>
+        { __(
+            'Git is not installed on the server.',
+            'create-block-theme'
+        ) }
+    </Text>;
+}

src/git-sidebar/git-integration-panel.js

@@ -0,0 +1,50 @@
+import { __ } from '@wordpress/i18n';
+import {
+    // eslint-disable-next-line
+	__experimentalVStack as VStack,
+	// eslint-disable-next-line
+	__experimentalText as Text,
+    // eslint-disable-next-line
+	__experimentalHeading as Heading,
+    // eslint-disable-next-line
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+    PanelBody,
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import {
+	chevronLeft,
+} from '@wordpress/icons';
+import { GitIntegrationForm } from './git-config';
+import { GitNotInstalledError } from './git-errors';
+
+export const GitIntegrationPanel = function() {
+    const [gitConfig, setGitConfig] = useState({});
+
+    useEffect(() => {
+        apiFetch( {
+			path: '/create-block-theme/v1/get-git-config',
+			method: 'GET',
+		} ).then( ( response ) => {
+            setGitConfig(response);
+        }).catch(() => {
+            setGitConfig({});
+        });
+    });
+
+    return <PanelBody>
+        <Heading>
+            <NavigatorToParentButton icon={ chevronLeft }>
+                { __( 'Git Integration', 'create-block-theme' ) }
+            </NavigatorToParentButton>
+        </Heading>
+        <VStack>
+            {
+                !gitConfig.version ? <GitNotInstalledError /> : (
+                    !gitConfig.git_configured ? <GitIntegrationForm /> :
+                        <div>Git connected.</div>
+                )
+            }
+        </VStack>
+    </PanelBody>;
+}

src/icons/git.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export const GitIcon = (
+    // source: https://github.com/primer/octicons/blob/main/icons/git-compare-24.svg
+    // license: MIT
+    <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <Path d="M16.5 19.25a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm3.25-1.75a1.75 1.75 0 1 0 .001 3.501 1.75 1.75 0 0 0-.001-3.501Z" />
+        <Path d="M13.905 1.72a.75.75 0 0 1 0 1.06L12.685 4h4.065a3.75 3.75 0 0 1 3.75 3.75v8.75a.75.75 0 0 1-1.5 0V7.75a2.25 2.25 0 0 0-2.25-2.25h-4.064l1.22 1.22a.75.75 0 0 1-1.061 1.06l-2.5-2.5a.75.75 0 0 1 0-1.06l2.5-2.5a.75.75 0 0 1 1.06 0ZM7.5 4.75a3.25 3.25 0 1 1-6.5 0 3.25 3.25 0 0 1 6.5 0ZM4.25 6.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 4.25 6.5Z" />
+        <Path d="M10.095 22.28a.75.75 0 0 1 0-1.06l1.22-1.22H7.25a3.75 3.75 0 0 1-3.75-3.75V7.5a.75.75 0 0 1 1.5 0v8.75a2.25 2.25 0 0 0 2.25 2.25h4.064l-1.22-1.22a.748.748 0 0 1 .332-1.265.75.75 0 0 1 .729.205l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0Z" />
+    </SVG>
+);

src/plugin-sidebar.js

@@ -36,6 +36,8 @@ import {
 	chevronRight,
 	archive,
 } from '@wordpress/icons';
+import { GitIcon } from './icons/git';
+import { GitIntegrationPanel } from './git-sidebar/git-integration-panel';
 
 const CreateBlockThemePlugin = () => {
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -125,7 +127,7 @@ const CreateBlockThemePlugin = () => {
 										'create-block-theme'
 									) }
 								</Text>
-								<hr></hr>
+								<Separator />
 								<Button
 									icon={ download }
 									onClick={ handleExportClick }
@@ -138,7 +140,23 @@ const CreateBlockThemePlugin = () => {
 										'create-block-theme'
 									) }
 								</Text>
-								<hr></hr>
+								<Separator />
+								<NavigatorButton path="/git-integration" icon={ GitIcon }>
+									<Spacer />
+									<HStack>
+										<FlexItem>
+											{ __( 'Git Integration' ) }
+										</FlexItem>
+										<Icon icon={ chevronRight } />
+									</HStack>
+								</NavigatorButton>
+								<Text variant="muted">
+									{ __(
+										'Connect a git repository and commit current theme changes.',
+										'create-block-theme'
+									) }
+								</Text>
+								<Separator />
 								<NavigatorButton path="/update" icon={ edit }>
 									<Spacer />
 									<HStack justify="space-between">
@@ -154,7 +172,7 @@ const CreateBlockThemePlugin = () => {
 										'create-block-theme'
 									) }
 								</Text>
-								<hr></hr>
+								<Separator />
 								<NavigatorButton path="/create" icon={ copy }>
 									<Spacer />
 									<HStack>
@@ -181,12 +199,21 @@ const CreateBlockThemePlugin = () => {
 					<NavigatorScreen path="/create">
 						<CreateThemePanel />
 					</NavigatorScreen>
+
+					<NavigatorScreen path="/git-integration">
+						<GitIntegrationPanel />
+					</NavigatorScreen>
 				</NavigatorProvider>
 			</PluginSidebar>
 		</>
 	);
 };
 
+function Separator() {
+	return <hr style={{margin: '0.5rem 0'}} />;
+}
+
 registerPlugin( 'cbt-plugin-sidebar', {
 	render: CreateBlockThemePlugin,
 } );
+