Merge pull request #6 from rtCamp/fix/change-settings-page-position

fix: change settings page position

Author: parthnvaswani

assets/src/css/editor.scss

@@ -114,6 +114,19 @@
 		animation: fadeIn 0.3s ease;
 	}
 
+	.onedesign-modal-tabs {
+		position: relative;
+
+		.onedesign-settings-button {
+			position: absolute;
+			top: 0;
+			right: 0;
+			background-color: #fff;
+			height: 45px;
+			width: 55px;
+		}
+	}
+
 	.onedesign-tabs {
 
 		.components-tab-panel__tabs {

assets/src/patterns-popover/components/LibraryModal.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
-import { Modal, SearchControl, TabPanel, Spinner } from '@wordpress/components';
+import { Modal, SearchControl, TabPanel, Spinner, IconButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
@@ -453,47 +453,58 @@ const LibraryModal = () => {
 								{ renderSearchResults() }
 							</div>
 
-							<TabPanel
-								className="onedesign-tabs"
-								activeClass="active-tab"
-								tabs={ tabs }
-								onSelect={ handleTabSelect }
-							>
-								{ ( tab ) => {
-									if ( tab.name === 'basePatterns' ) {
+							<div className="onedesign-modal-tabs">
+								<TabPanel
+									className="onedesign-tabs"
+									activeClass="active-tab"
+									tabs={ tabs }
+									onSelect={ handleTabSelect }
+								>
+									{ ( tab ) => {
+										if ( tab.name === 'basePatterns' ) {
+											return (
+												<BasePatternsTab
+													isLoading={ isLoading }
+													basePatterns={ filteredBasePatterns }
+													visibleCount={ visibleCount }
+													handlePatternSelection={ handlePatternSelection }
+													hasMorePatterns={ hasMorePatterns }
+													loadMorePatterns={ loadMorePatterns }
+													searchTerm={ searchTerm }
+													setSelectedPatterns={ setSelectedPatterns }
+													selectedPatterns={ selectedPatterns }
+													applySelectedPatterns={ applySelectedPatterns }
+													consumerSites={ consumerSites }
+													sitePatterns={ allConsumerSitePatterns }
+												/>
+											);
+										}
+										// based on tab name show applied patterns
 										return (
-											<BasePatternsTab
-												isLoading={ isLoading }
-												basePatterns={ filteredBasePatterns }
-												visibleCount={ visibleCount }
-												handlePatternSelection={ handlePatternSelection }
-												hasMorePatterns={ hasMorePatterns }
-												loadMorePatterns={ loadMorePatterns }
-												searchTerm={ searchTerm }
-												setSelectedPatterns={ setSelectedPatterns }
+											<AppliedPatternsTab
+												isLoadingApplied={ isLoadingApplied }
+												appliedPatterns={ getFilteredPatterns( tab ) }
+												visibleAppliedCount={ visibleAppliedCount }
 												selectedPatterns={ selectedPatterns }
-												applySelectedPatterns={ applySelectedPatterns }
-												consumerSites={ consumerSites }
-												sitePatterns={ allConsumerSitePatterns }
+												hasMoreAppliedPatterns={ hasMoreAppliedPatterns }
+												loadMoreAppliedPatterns={ loadMoreAppliedPatterns }
+												applySelectedPatterns={ removeSelectedPatterns }
+												setVisibleAppliedCount={ setVisibleAppliedCount }
+												siteInfo={ tab }
 											/>
 										);
-									}
-									// based on tab name show applied patterns
-									return (
-										<AppliedPatternsTab
-											isLoadingApplied={ isLoadingApplied }
-											appliedPatterns={ getFilteredPatterns( tab ) }
-											visibleAppliedCount={ visibleAppliedCount }
-											selectedPatterns={ selectedPatterns }
-											hasMoreAppliedPatterns={ hasMoreAppliedPatterns }
-											loadMoreAppliedPatterns={ loadMoreAppliedPatterns }
-											applySelectedPatterns={ removeSelectedPatterns }
-											setVisibleAppliedCount={ setVisibleAppliedCount }
-											siteInfo={ tab }
-										/>
-									);
-								} }
-							</TabPanel>
+									} }
+								</TabPanel>
+								{ /* Add icon button to redirect user to onedesign-settings page */ }
+								<IconButton
+									icon="admin-generic"
+									label={ __( 'Go to OneDesign Settings', 'onedesign' ) }
+									onClick={ () => {
+										window.location.href = '/wp-admin/admin.php?page=onedesign-settings';
+									} }
+									className="onedesign-settings-button"
+								/>
+							</div>
 						</div>
 					</div>
 				</Modal>

inc/classes/class-settings.php

@@ -23,7 +23,7 @@ class Settings {
 	 *
 	 * @var string
 	 */
-	const PAGE_SLUG = 'onedesign-settings';
+	const PAGE_SLUG = 'onedesign';
 
 	/**
 	 * Option name for site type.
@@ -81,7 +81,7 @@ public function add_settings_page(): void {
 			__( 'OneDesign', 'onedesign' ),
 			'manage_options',
 			self::PAGE_SLUG,
-			array( $this, 'settings_page_content' ),
+			'__return_null',
 			'dashicons-admin-generic',
 			100
 		);
@@ -98,6 +98,17 @@ public function add_settings_page(): void {
 				'__return_null'
 			);
 		}
+
+		add_submenu_page(
+			self::PAGE_SLUG,
+			__( 'Settings', 'onedesign' ),
+			__( 'Settings', 'onedesign' ),
+			'manage_options',
+			'onedesign-settings',
+			array( $this, 'settings_page_content' )
+		);
+
+		remove_submenu_page( 'onedesign', 'onedesign' );
 	}
 
 	/**
@@ -109,8 +120,10 @@ public function add_settings_page(): void {
 	 * @return void
 	 */
 	public function handle_design_library_redirect(): void {
+		$pages = array( 'design-library', 'onedesign' );
+
 		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
-		if ( ! isset( $_GET['page'] ) || 'design-library' !== $_GET['page'] ) {
+		if ( ! isset( $_GET['page'] ) || ! in_array( $_GET['page'], $pages, true ) ) {
 			return;
 		}
 
@@ -379,7 +392,7 @@ public function api_key_regenerated_notice(): void {
 	 * @return void
 	 */
 	public function enqueue_admin_scripts( string $hook ): void {
-		if ( ( 'toplevel_page_' . self::PAGE_SLUG ) !== $hook && 'onedesign_page_design-library' !== $hook ) {
+		if ( ! str_contains( $hook, self::PAGE_SLUG ) ) {
 			return;
 		}