Merge pull request #85 from Codeinwp/onboarding

Add Templates for Onboarding
Codeinwp · Dec 14, 2023 · 52e5202 · 52e5202
2 parents cc1a50d + 5d8cfe3
commit 52e5202
Show file tree

Hide file tree

Showing 20 changed files with 712 additions and 20 deletions.
diff --git a/assets/css/src/welcome-notice.scss b/assets/css/src/welcome-notice.scss
@@ -4,11 +4,12 @@
 .raft-welcome-notice {
 	position: relative;
 	padding-bottom: 0;
+	border-left: 1px solid #c3c4c7;
 
 	.notice-content {
 		display: flex;
 		width: 100%;
-		gap: 20px;
+		gap: 48px;
 
 		@media (--desktop) {
 			flex-direction: column-reverse;
@@ -31,6 +32,7 @@
 
 	.notice-title {
 		line-height: 1.5;
+		max-width: 700px;
 
 		span {
 			font-weight: 600;
@@ -83,6 +85,7 @@
 		display: block;
 		max-height: 300px;
 		max-width: 60%;
+		padding: 30px 0;
 
 		@media (--desktop) {
 			max-width: 80%;

diff --git a/assets/img/welcome-notice.png b/assets/img/welcome-notice.png
diff --git a/assets/js/src/welcome-notice.js b/assets/js/src/welcome-notice.js
@@ -8,6 +8,7 @@ function handleWelcomeNotice( $ ) {
 		installing,
 		done,
 		activationUrl,
+		onboardingUrl,
 		ajaxUrl,
 		nonce,
 		otterRefNonce,
@@ -47,6 +48,11 @@ function handleWelcomeNotice( $ ) {
 		installSpinner.removeClass( 'hidden' );
 		installBtn.attr( 'disabled', true );
 
+		if ( otterStatus === 'active' ) {
+			window.location.href = onboardingUrl;
+			return;
+		}
+
 		if ( otterStatus === 'installed' ) {
 			await activateOtter();
 			return;

diff --git a/inc/Admin.php b/inc/Admin.php
@@ -33,6 +33,7 @@ public function setup_otter_notice() {
 		add_action( 'admin_notices', array( $this, 'render_welcome_notice' ), 0 );
 		add_action( 'wp_ajax_raft_dismiss_welcome_notice', array( $this, 'remove_welcome_notice' ) );
 		add_action( 'wp_ajax_raft_set_otter_ref', array( $this, 'set_otter_ref' ) );
+		add_action( 'activated_plugin', array( $this, 'after_otter_activation' ) );
 	}
 
 	/**
@@ -70,6 +71,14 @@ public function render_welcome_notice() {
 						admin_url( 'plugins.php' ) 
 					) 
 				),
+				'onboardingUrl' => esc_url(
+					add_query_arg(
+						array(
+							'onboarding' => 'true',
+						),
+						admin_url( 'site-editor.php' )
+					) 
+				),
 				'activating'    => __( 'Activating', 'raft' ) . '&hellip;',
 				'installing'    => __( 'Installing', 'raft' ) . '&hellip;',
 				'done'          => __( 'Done', 'raft' ),
@@ -86,23 +95,30 @@ public function render_welcome_notice() {
 
 		$notice_html .= '<h1 class="notice-title">';
 		/* translators: %s: Otter Blocks */
-		$notice_html .= sprintf( __( 'Power up your website building experience with %s!', 'raft' ), '<span>Otter Blocks</span>' );
+		$notice_html .= sprintf( __( 'Power-up your website building experience with %s: Seamless theme setup, advanced blocks and extra functionality for your site.', 'raft' ), '<strong>Otter Blocks</strong>' );
 
 		$notice_html .= '</h1>';
 
-		$notice_html .= '<p class="description">' . __( 'Otter is a Gutenberg Blocks page builder plugin that adds extra functionality to the WordPress Block Editor (also known as Gutenberg) for a better page building experience without the need for traditional page builders.', 'raft' ) . '</p>';
+		$notice_html .= '<p class="description">' . __( 'Otter is a Gutenberg Blocks page builder plugin that adds new blocks and functionality to your theme, while optimising your page building experience. Now with Otter\'s new theme onboarding wizard, you can experience a streamlined and intuitive setup of your Raft theme in minutes.', 'raft' ) . '</p>';
 
 		$notice_html .= '<div class="actions">';
 
 		/* translators: %s: Otter Blocks */
 		$notice_html .= '<button id="raft-install-otter" class="button button-primary button-hero">';
 		$notice_html .= '<span class="dashicons dashicons-update hidden"></span>';
 		$notice_html .= '<span class="text">';
-		$notice_html .= 'installed' === $otter_status ?
+
+		if ( 'active' === $otter_status ) {
+			/* translators: %s: Otter Blocks */
+			$notice_html .= __( 'Try it out!', 'raft' );
+		} elseif ( 'installed' === $otter_status ) {
 			/* translators: %s: Otter Blocks */
-			sprintf( __( 'Activate %s', 'raft' ), 'Otter Blocks' ) :
+			$notice_html .= sprintf( __( 'Activate %s', 'raft' ), 'Otter Blocks' );
+		} else {
 			/* translators: %s: Otter Blocks */
-			sprintf( __( 'Install & Activate %s', 'raft' ), 'Otter Blocks' );
+			$notice_html .= sprintf( __( 'Install & Activate %s', 'raft' ), 'Otter Blocks' );
+		}
+
 		$notice_html .= '</span>';
 		$notice_html .= '</button>';
 
@@ -162,9 +178,18 @@ public function set_otter_ref() {
 	 * @return bool
 	 */
 	private function should_show_welcome_notice(): bool {
-		// Already using Otter.
+		// Already using Otter & has finished onboarding.
 		if ( is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) {
-			return false;
+			if ( class_exists( '\ThemeIsle\GutenbergBlocks\Plugins\FSE_Onboarding' ) ) {
+				$status = get_option( \ThemeIsle\GutenbergBlocks\Plugins\FSE_Onboarding::OPTION_KEY, array() );
+				$slug   = get_stylesheet();
+
+				if ( ! empty( $status[ $slug ] ) ) {
+					return false;
+				}
+			} else {
+				return false;
+			}
 		}
 
 		// Notice was dismissed.
@@ -224,10 +249,56 @@ private function should_show_welcome_notice(): bool {
 	private function get_otter_status(): string {
 		$status = 'not-installed';
 
+		if ( is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) {
+			return 'active';
+		}
+
 		if ( file_exists( ABSPATH . 'wp-content/plugins/otter-blocks/otter-blocks.php' ) ) {
 			return 'installed';
 		}
 
 		return $status;
 	}
+
+	/**
+	 * Run after Otter Blocks activation.
+	 *
+	 * @param string $plugin Plugin name.
+	 *
+	 * @return void
+	 */
+	public function after_otter_activation( $plugin ) {
+		if ( 'otter-blocks/otter-blocks.php' !== $plugin ) {
+			return;
+		}
+
+		if ( ! class_exists( '\ThemeIsle\GutenbergBlocks\Plugins\FSE_Onboarding' ) ) {
+			return;
+		}
+
+		$status = get_option( \ThemeIsle\GutenbergBlocks\Plugins\FSE_Onboarding::OPTION_KEY, array() );
+		$slug   = get_stylesheet();
+
+		if ( ! empty( $status[ $slug ] ) ) {
+			return;
+		}
+
+		// Dismiss after two days from activation.
+		$activated_time = get_option( 'raft_install' );
+
+		if ( ! empty( $activated_time ) && time() - intval( $activated_time ) > ( 2 * DAY_IN_SECONDS ) ) {
+			update_option( Constants::CACHE_KEYS['dismissed-welcome-notice'], 'yes' );
+			return;
+		}
+
+		$onboarding = add_query_arg(
+			array(
+				'onboarding' => 'true',
+			),
+			admin_url( 'site-editor.php' )
+		);
+
+		wp_safe_redirect( $onboarding );
+		exit;
+	}
 }
diff --git a/inc/Core.php b/inc/Core.php
@@ -87,6 +87,74 @@ public function setup() {
 			)
 		);
 
+		add_theme_support(
+			'otter-onboarding',
+			array(
+				'templates'      => array(
+					'archive'    => array(
+						'archive-boxed' => array(
+							'file'  => RAFT_DIR . 'library/archive/archive-boxed.php',
+							'title' => __( 'Archive Boxed', 'raft' ),
+						),
+						'archive-cards' => array(
+							'file'  => RAFT_DIR . 'library/archive/archive-cards.php',
+							'title' => __( 'Archive Cards', 'raft' ),
+						),
+						'archive-row'   => array(
+							'file'  => RAFT_DIR . 'library/archive/archive-row.php',
+							'title' => __( 'Archive Row', 'raft' ),
+						),
+					),
+					'single'     => array(
+						'single-post-centered' => array(
+							'file'  => RAFT_DIR . 'library/single/single-post-centered.php',
+							'title' => __( 'Single Post Centered', 'raft' ),
+						),
+						'single-post-columns'  => array(
+							'file'  => RAFT_DIR . 'library/single/single-post-columns.php',
+							'title' => __( 'Single Post Columns', 'raft' ),
+						),
+						'single-post-cover'    => array(
+							'file'  => RAFT_DIR . 'library/single/single-post-cover.php',
+							'title' => __( 'Single Post Cover', 'raft' ),
+						),
+					),
+					'front-page' => array(
+						'front-page-alt'   => array(
+							'file'  => RAFT_DIR . 'library/front-end/front-page-2.php',
+							'title' => __( 'Homepage 2', 'raft' ),
+						),
+						'front-page-alt-2' => array(
+							'file'  => RAFT_DIR . 'library/front-end/front-page-3.php',
+							'title' => __( 'Homepage 3', 'raft' ),
+						),
+					),
+				),
+				'page_templates' => array(
+					'about-page'     => array(
+						'file'     => RAFT_DIR . 'library/templates/about-page.php',
+						'title'    => __( 'About Page', 'raft' ),
+						'template' => 'template-plain',
+					),
+					'contact-page'   => array(
+						'file'     => RAFT_DIR . 'library/templates/contact-page.php',
+						'title'    => __( 'Contact Page', 'raft' ),
+						'template' => 'template-plain',
+					),
+					'portfolio-page' => array(
+						'file'     => RAFT_DIR . 'library/templates/portfolio-page.php',
+						'title'    => __( 'Portfolio Page', 'raft' ),
+						'template' => 'template-plain',
+					),
+					'services-page'  => array(
+						'file'     => RAFT_DIR . 'library/templates/services-page.php',
+						'title'    => __( 'Services Page', 'raft' ),
+						'template' => 'template-plain',
+					),
+				),
+			)
+		);
+
 		remove_theme_support( 'core-block-patterns' );
 
 		register_nav_menus( array( 'primary' => esc_html__( 'Primary Menu', 'raft' ) ) );
@@ -118,33 +186,34 @@ public function add_editor_styles() {
 	 */
 	public function strings( $strings = array() ) {
 		$strings = array(
-			
+
 			// Generic patterns.
 			'hero_title'              => __( 'Block Based Themes Made simple', 'raft' ),
 			'raft_feature_1'          => __( 'Style Variations', 'raft' ),
 			'raft_feature_2'          => __( 'Built-in Patterns', 'raft' ),
 			'raft_feature_3'          => __( 'Powered by Blocks', 'raft' ),
 			'page_title'              => __( 'This is a page title', 'raft' ),
 			'about_page_title'        => __( 'About our Team', 'raft' ),
+			'about_me'                => __( 'About me', 'raft' ),
 			'services_page_title'     => __( 'Explore our Services', 'raft' ),
 			'section_title'           => __( 'This is section title', 'raft' ),
 			'subtitle'                => __( 'Subtitle', 'raft' ),
 			'section_description'     => __( 'A short section description', 'raft' ),
 			'paragraph_text'          => __( 'This is placeholder text, feel free to replace it with your unique content as it\'s included here just to provide you with a better understanding of how your text will fit in the layout. Explore the various patterns and templates as you create your personalized web experience.', 'raft' ),
 			'short_text'              => __( 'Just some placeholder text', 'raft' ),
-			
+
 			// Feature patterns.
 			'feature_section_title'   => __( 'Showcase your Features and Services', 'raft' ),
 			'feature_title'           => __( 'This is feature title', 'raft' ),
 			'feature_description'     => __( 'A placeholder description that you can replace with your own content.', 'raft' ),
 			'button_text'             => __( 'Button Text', 'raft' ),
 			'button_text_2'           => __( 'Get Started', 'raft' ),
-			
+
 			// Team patterns.
 			'team_section_title'      => __( 'Our Team', 'raft' ),
 			'team_member'             => __( 'Team member name', 'raft' ),
 			'member_role'             => __( 'Company role', 'raft' ),
-			
+
 			// Pricing patterns.
 			'pricing_section_title'   => __( 'A pricing section. Join premium!', 'raft' ),
 			'plan_title'              => __( 'Plan title', 'raft' ),
@@ -156,7 +225,7 @@ public function strings( $strings = array() ) {
 			'contact_section_title'   => __( 'Contact details', 'raft' ),
 			'follow'                  => __( 'Follow us', 'raft' ),
 			'contact_details'         => __( 'Contact detail example', 'raft' ),
-			
+
 			// FAQ patterns.
 			'faq_section_title'       => __( 'Frequently Asked Questions', 'raft' ),
 			'faq_title'               => __( 'Just a frequent question', 'raft' ),
@@ -175,15 +244,18 @@ public function strings( $strings = array() ) {
 			'search_placeholder'      => __( 'Search for a keyword...', 'raft' ),
 			'404'                     => __( '404', 'raft' ),
 			'page_not_found'          => __( 'Unfortunately the page was not found.', 'raft' ),
-
+			'categories'              => __( 'Categories', 'raft' ),
+			'read_also'               => __( 'Read also…', 'raft' ),
+
 			// Content Patterns.
 			'content_title'           => __( 'A generic content title', 'raft' ),
 			'content_subtitle'        => __( 'A content subtitle', 'raft' ),
-
+			'lorem_ipsum_subtitle'    => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit', 'raft' ),
+
 			// Testimonial patterns.
 			'testimonial'             => __( '"...Absolutely one of the best services out there, very professional and easy-going experience, highly recommended..."', 'raft' ),
 			'testimonial_name'        => __( 'Jason Doe', 'raft' ),
-			
+
 			// CTA patterns.
 			'cta_title'               => __( 'Get started today, get in touch!', 'raft' ),
 			'raft_cta_title'          => __( 'Create your new website today, with Raft!', 'raft' ),

diff --git a/inc/patterns/loop-rows.php b/inc/patterns/loop-rows.php
@@ -45,7 +45,7 @@
 
 						<!-- wp:post-title {"textAlign":"left","isLink":true,"fontSize":"medium"} /-->
 
-						<!-- wp:read-more {"content":"Continue reading","style":{"elements":{"link":{"color":{"text":"var:preset|color|raft-accent"}}}},"textColor":"raft-accent"} /-->
+						<!-- wp:read-more {"content":"' . esc_html( $raft_strings['continue_reading'] ) . '","style":{"elements":{"link":{"color":{"text":"var:preset|color|raft-accent"}}}},"textColor":"raft-accent"} /-->
 					</div>
 					<!-- /wp:column -->
 				</div>