Fix (global settings): Global Settings not showing for non-admin users (#3533)

* allow other roles to read stackable options

* allow non-admin users to read stackable options for Global Settings

* hide global settings for non-admin

* Update src/plugins/global-settings/index.js

* update request url for fetching settings

* add debug logs

* update request url for test

* update urls

* update path

* update request url

* update test url

---------

Co-authored-by: Benjamin Intal <[email protected]>

Author: kaeizen

e2e/test-utils/stackable.ts

@@ -17,7 +17,7 @@ export class StackableFixture {
 			}
 
 			const finishedCallback = async ( request: Request ) => {
-				if ( request.url().includes( 'wp/v2/settings' ) && request.method() === 'GET' ) {
+				if ( decodeURIComponent( request.url() ).includes( 'stackable/v3/settings' ) && request.method() === 'GET' ) {
 					try {
 						let settings = null
 						await test.step( 'Wait for Stackable settings to load', async () => {
@@ -38,7 +38,7 @@ export class StackableFixture {
 				}
 			}
 			const failedCallback = async ( request: Request ) => {
-				if ( request.url().includes( 'wp/v2/settings' ) && request.method() === 'GET' ) {
+				if ( decodeURIComponent( request.url() ).includes( 'stackable/v3/settings' ) && request.method() === 'GET' ) {
 					cleanup()
 					throw Error( 'Failed to get Stackable settings' )
 				}

plugin.php

@@ -216,6 +216,7 @@ function is_frontend() {
  * Block Initializer.
  */
 require_once( plugin_dir_path( __FILE__ ) . 'src/editor-settings.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/admin.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/init.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/stk-block-types.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/blocks.php' );

src/admin.php

@@ -0,0 +1,63 @@
+<?php
+/**
+ * This allows non-admin users to read Stackable Options for Global Settings in the Editor
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! class_exists( 'Stackable_Admin_Settings' ) ) {
+
+	class Stackable_Admin_Settings extends WP_REST_Settings_Controller {
+
+		/**
+		 * Constructor.
+		 *
+		 */
+		public function __construct() {
+			$this->namespace = 'stackable/v3';
+			$this->rest_base = 'settings';
+			add_action( 'rest_api_init', array( $this, 'register_routes' ) );
+		}
+
+		public function register_routes() {
+			register_rest_route(
+				$this->namespace,
+				'/' . $this->rest_base,
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_item' ),
+					'args'                => array(),
+					'permission_callback' => array( $this, 'retrieve_item_permissions_check' ),
+				)
+			);
+		}
+
+		public function retrieve_item_permissions_check( $request ) {
+			return current_user_can( 'edit_posts' );
+		}
+
+		/**
+		 * Retrieves only the Stackable registered options
+		 *
+		 * @return array Array of registered options.
+		 */
+		protected function get_registered_options() {
+			$rest_options = parent::get_registered_options();
+
+			$rest_options = array_filter(
+				$rest_options,
+				function( $key ) {
+					return strpos( $key, 'stackable' ) === 0;
+				},
+				ARRAY_FILTER_USE_KEY
+			);
+
+			return $rest_options;
+		}
+	}
+
+	new Stackable_Admin_Settings();
+}

src/plugins/global-settings/index.js

@@ -18,13 +18,17 @@ import {
 	isContentOnlyMode,
 	settings,
 } from 'stackable'
+import { currentUserHasCapability } from '~stackable/util'
 
 /** WordPress dependencies
  */
 import { registerPlugin } from '@wordpress/plugins'
 import { __ } from '@wordpress/i18n'
 import { applyFilters, addAction } from '@wordpress/hooks'
-import { dispatch, select } from '@wordpress/data'
+import { useEffect, useState } from '@wordpress/element'
+import {
+	dispatch, select, useSelect,
+} from '@wordpress/data'
 import { PanelBody } from '@wordpress/components'
 
 // Action used to toggle the global settings panel.
@@ -40,13 +44,26 @@ addAction( 'stackable.global-settings.toggle-sidebar', 'toggle', () => {
 } )
 
 const GlobalSettings = () => {
+	const [ userCanManageOptions, setUserCanManageOptions ] = useState( false )
+	const id = useSelect( select => select( 'core' ).getCurrentUser()?.id )
+
+	useEffect( () => {
+		const checkCapabilities = async () => {
+			const capabilities = await currentUserHasCapability( 'manage_options' )
+			setUserCanManageOptions( capabilities )
+		}
+
+		checkCapabilities()
+	}, [ id ] )
 	// For older WP versions (<6.6), wp.editor.PluginSidebar is undefined,
 	// use wp.editSite.PluginSidebar and wp.editPost.PluginSidebar as fallback
 	const PluginSidebar = window.wp.editor.PluginSidebar || window.wp.editSite?.PluginSidebar || window.wp.editPost?.PluginSidebar
 
+	const globalSettingsInspector = applyFilters( 'stackable.global-settings.inspector', null )
+
 	return (
 		<>
-			{ PluginSidebar &&
+			{ PluginSidebar && userCanManageOptions &&
 				<PluginSidebar
 					name="sidebar"
 					title={ __( 'Stackable Settings', i18n ) }
@@ -60,7 +77,7 @@ const GlobalSettings = () => {
 							<a href="https://docs.wpstackable.com/article/465-how-to-style-the-different-block-hover-states?utm_source=wp-settings-global-settings&utm_campaign=learnmore&utm_medium=wp-dashboard" target="_docs">{ __( 'Learn more', i18n ) }</a> */ }
 						</p>
 					</PanelBody>
-					{ applyFilters( 'stackable.global-settings.inspector', null ) }
+					{ globalSettingsInspector }
 				</PluginSidebar>
 			}
 		</>

src/util/admin.js

@@ -6,7 +6,8 @@ import { sortBy } from 'lodash'
 /**
  * WordPress dependencies
  */
-import { loadPromise, models } from '@wordpress/api'
+import { loadPromise } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 
 // Collect all the blocks and their variations for enabling/disabling and sort
 // them by type.
@@ -52,12 +53,13 @@ let fetchingPromise = null
  */
 export const fetchSettings = () => {
 	if ( ! fetchingPromise ) {
-		fetchingPromise = loadPromise.then( () => {
-			const settings = new models.Settings()
-			return settings.fetch().then( response => {
-				fetchingPromise = null
-				return response
+		fetchingPromise = loadPromise.then( async () => {
+			const response = await apiFetch( {
+				path: '/stackable/v3/settings/',
+				method: 'GET',
 			} )
+			fetchingPromise = null
+			return response
 		} )
 	}