Merge b0b9421 into 9c71d2d

plugin/assets/css/src/gsm/content.css

@@ -25,4 +25,9 @@
 		text-align: left;
 		width: 105px;
 	}
+
+	& .mdc-button--offsite .mdc-button__icon {
+		transform: rotate(-140deg);
+		transform-origin: initial;
+	}
 }

plugin/assets/css/src/wizard/content.css

@@ -41,4 +41,9 @@
 	& .material-wizard__card img {
 		width: 100%;
 	}
+
+	& .mdc-button--offsite .mdc-button__icon {
+		transform: rotate(-140deg);
+		transform-origin: initial;
+	}
 }

plugin/assets/src/getting-started/components/content/content.js

@@ -18,3 +18,4 @@ export * from './wizard';
 export * from './overview';
 export * from './customize';
 export * from './updates';
+export * from './learn';

plugin/assets/src/getting-started/components/content/index.js

@@ -30,7 +30,7 @@ import {
 import Notice from '../../../wizard/components/notice';
 import TabContext from '../../context';
 import { ACTIONS } from '../../constants';
-import { Wizard, Overview, Customize, Updates } from './content';
+import { Wizard, Overview, Customize, Updates, Learn } from './content';
 
 const Content = () => {
 	const { state, dispatch } = useContext( TabContext );
@@ -95,6 +95,7 @@ const Content = () => {
 			{ 'CUSTOMIZE' === activeTab && <Customize handleClick={ handleClick } /> }
 			{ 'OVERVIEW' === activeTab && <Overview handleClick={ handleClick } /> }
 			{ 'UPDATES' === activeTab && <Updates handleClick={ handleClick } /> }
+			{ 'LEARN' === activeTab && <Learn handleClick={ handleClick } /> }
 		</div>
 	);
 };

plugin/assets/src/getting-started/components/content/learn-content.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import Button from '../../../wizard/components/navigation/button';
+
+export const LearnContent = ( { materialUrl, newsLetterUrl } ) => {
+	return (
+		<Fragment>
+			<p>
+				{ __(
+					'Learn about the concepts behind material Design',
+					'material-design'
+				) }
+			</p>
+
+			<div className="material-gsm__content-actions">
+				<Button
+					style="mdc-button--raised mdc-button--offsite"
+					text={ __( 'Visit material.io', 'material-design' ) }
+					trailingIcon="arrow_downward"
+					link={ materialUrl }
+					target="_blank"
+				/>
+			</div>
+
+			<p>
+				{ __(
+					'Sign up to get updates and news about material design via email',
+					'material-design'
+				) }
+			</p>
+
+			<div className="material-gsm__content-actions">
+				<Button
+					style="mdc-button--raised mdc-button--offsite"
+					text={ __( 'Subscribe to Newsletter', 'material-design' ) }
+					trailingIcon="arrow_downward"
+					link={ newsLetterUrl }
+					target="_blank"
+				/>
+			</div>
+		</Fragment>
+	);
+};

plugin/assets/src/getting-started/components/content/learn.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import getConfig from '../../get-config';
+import { LearnContent } from './learn-content';
+
+export const Learn = () => {
+	return (
+		<Fragment>
+			<div className="material-gsm__content mdc-layout-grid__cell mdc-layout-grid__cell--span-9">
+				<h2 className="material-gsm__content-title mdc-typography--headline2">
+					{ __( 'Learn More about Material Design', 'material-design' ) }
+				</h2>
+				<LearnContent
+					materialUrl={ getConfig( 'materialUrl' ) }
+					newsLetterUrl={ getConfig( 'newsLetterUrl' ) }
+				/>
+
+				<div style={ { height: '20px' } }></div>
+			</div>
+		</Fragment>
+	);
+};

plugin/assets/src/getting-started/components/navigation/index.js

@@ -31,11 +31,19 @@ import Tab from './tab';
 const Navigation = () => {
 	const { dispatch } = useContext( TabContext );
 
+	let activeTab = 'CUSTOMIZE';
+	const hash = document.location.hash
+		? document.location.hash.split( '#' )[ 1 ]
+		: 'false';
+	if ( TABS[ hash.toUpperCase() ] ) {
+		activeTab = hash.toUpperCase();
+	}
+
 	useEffect( () => {
 		// Change initial tab if content and theme are already installed.
 		if ( 'ok' === getConfig( 'themeStatus' ) ) {
 			dispatch( { type: ACTIONS.SET_THEME_OK } );
-			dispatch( { type: ACTIONS.GOTO_STEP, payload: { value: 'CUSTOMIZE' } } );
+			dispatch( { type: ACTIONS.GOTO_STEP, payload: { value: activeTab } } );
 			dispatch( {
 				type: ACTIONS.MARK_COMPLETE,
 				payload: { value: [ 'WIZARD' ] },
@@ -45,7 +53,7 @@ const Navigation = () => {
 
 		if ( 'ok' === getConfig( 'contentStatus' ) ) {
 			dispatch( { type: ACTIONS.SET_DEMO_OK } );
-			dispatch( { type: ACTIONS.GOTO_STEP, payload: { value: 'CUSTOMIZE' } } );
+			dispatch( { type: ACTIONS.GOTO_STEP, payload: { value: activeTab } } );
 			dispatch( {
 				type: ACTIONS.MARK_COMPLETE,
 				payload: {

plugin/assets/src/getting-started/constants.js

@@ -41,4 +41,5 @@ export const TABS = {
 	CUSTOMIZE: __( 'Customize your Theme', 'material-design' ),
 	OVERVIEW: __( 'Build with Material Blocks', 'material-design' ),
 	UPDATES: __( 'Updates', 'material-design' ),
+	LEARN: __( 'Learn More', 'material-design' ),
 };

plugin/assets/src/getting-started/context.js

@@ -39,6 +39,7 @@ const tabs = Object.keys( TABS );
  * Default state of the world
  *
  */
+
 const initialState = {
 	activeTab: 'CUSTOMIZE',
 	completed: [ 'WIZARD' ],

plugin/assets/src/wizard/components/content/work.js

@@ -24,6 +24,7 @@ import { __ } from '@wordpress/i18n';
  */
 import Card from './card';
 import getConfig from '../../../admin/get-config';
+import { LearnContent } from '../../../getting-started/components/content/learn-content';
 
 /**
  * Congrats and how we work screen
@@ -45,6 +46,10 @@ const Work = () => {
 						'material-design'
 					) }
 				</p>
+				<LearnContent
+					materialUrl={ getConfig( 'materialUrl' ) }
+					newsLetterUrl={ getConfig( 'newsLetterUrl' ) }
+				/>
 			</Card>
 		</div>
 	);

plugin/assets/src/wizard/components/navigation/button.js

@@ -85,10 +85,10 @@ const Button = props => {
  * @param {*} props Inherited props
  */
 export const Link = props => {
-	const { style, text, leadingIcon, trailingIcon, link } = props;
+	const { style, text, leadingIcon, trailingIcon, link, target } = props;
 
 	return (
-		<a href={ link } className={ `mdc-button ${ style }` }>
+		<a href={ link } className={ `mdc-button ${ style }` } target={ target }>
 			{ leadingIcon && (
 				<i
 					className="material-icons mdc-button__icon leading-icon"

plugin/php/class-admin.php

@@ -30,6 +30,10 @@
  */
 class Admin extends Module_Base {
 
+	const NEWSLETTER_URL = 'https://services.google.com/fb/forms/materialdesignnewsletter?utm_source=WordPress';
+
+	const MATERIAL_URL = 'https://material.io/design/material-theming/overview.html#material-theming';
+
 	/**
 	 * Initiate the class and hooks.
 	 */
@@ -210,6 +214,8 @@ public function enqueue_assets() {
 					'redirect'      => esc_url( admin_url( 'themes.php' ) ),
 					'themeStatus'   => esc_html( $this->plugin->theme_status() ),
 					'contentStatus' => esc_html( $has_demo_content ? 'ok' : 'install' ),
+					'newsLetterUrl' => self::NEWSLETTER_URL,
+					'materialUrl'   => self::MATERIAL_URL,
 				]
 			);
 
@@ -221,6 +227,8 @@ public function enqueue_assets() {
 					'nonce'          => wp_create_nonce( 'wp_rest' ),
 					'themeStatus'    => esc_html( $this->plugin->theme_status() ),
 					'assetsRestPath' => esc_url( $this->plugin->assets_rest_controller->get_base_path() ),
+					'newsLetterUrl'  => self::NEWSLETTER_URL,
+					'materialUrl'    => self::MATERIAL_URL,
 				]
 			);
 		}
@@ -262,6 +270,8 @@ public function enqueue_assets() {
 					'restPath'         => esc_url( $this->plugin->onboarding_rest_controller->get_base_path() ),
 					'assetsRestPath'   => esc_url( $this->plugin->assets_rest_controller->get_base_path() ),
 					'themeStatus'      => esc_html( $this->plugin->theme_status() ),
+					'newsLetterUrl'    => self::NEWSLETTER_URL,
+					'materialUrl'      => self::MATERIAL_URL,
 				]
 			);
 		}

plugin/php/class-plugin.php

@@ -180,6 +180,7 @@ public function init() {
 		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_front_end_assets' ], 100 );
 		add_action( 'wp_head', [ $this, 'frontend_inline_css' ], 1 );
 		add_action( 'admin_head', [ $this, 'frontend_inline_css' ], 1 );
+		add_action( 'plugin_row_meta', [ $this, 'get_plugin_row_meta' ], 10, 2 );
 	}
 
 	/**
@@ -281,4 +282,32 @@ public function theme_status() {
 
 		return 'ok';
 	}
+
+	/**
+	 * Updates the plugin row meta with links to review plugin and get support.
+	 *
+	 * @param string[]|mixed $meta        An array of the plugin's metadata, including the version, author, author URI,
+	 *                                    and plugin URI.
+	 * @param string         $plugin_file Path to the plugin file relative to the plugins directory.
+	 *
+	 * @return string[]|mixed Plugin row meta.
+	 */
+	public function get_plugin_row_meta( $meta, $plugin_file ) {
+		if ( plugin_basename( realpath( __DIR__ . '/../material-design.php' ) ) !== $plugin_file ) {
+			return $meta;
+		}
+		if ( ! is_array( $meta ) ) {
+			return $meta;
+		}
+		$redirect_to = 'admin.php?page=material-settings#learn';
+
+
+		$additional_meta = [
+			'<a href="' . esc_url( admin_url( $redirect_to ) ) . '" target="_blank" rel="noreferrer noopener">' . esc_html__( 'Learn more', 'material-design' ) . '</a>',
+			'<a href="https://wordpress.org/support/plugin/material-design/" target="_blank" rel="noreferrer noopener">' . esc_html__( 'Contact support', 'material-design' ) . '</a>',
+			'<a href="https://wordpress.org/support/plugin/material-design/reviews/#new-post" target="_blank" rel="noreferrer noopener">' . esc_html__( 'Leave review', 'material-design' ) . '</a>',
+		];
+
+		return array_merge( $meta, $additional_meta );
+	}
 }