Update grid size and add traget=_blank

Author: ravichdev

plugin/assets/src/settings/components/integrations/api.js

@@ -90,7 +90,7 @@ const Api = () => {
 				{ ! isApiOk && (
 					<TextControl
 						className="material-settings__api-input mdc-layout-grid__cell"
-						value={ api }
+						value={ api || '' }
 						placeholder={ __( 'Google API Key', 'material-design' ) }
 						onChange={ value => {
 							setApi( value );

plugin/assets/src/settings/components/integrations/index.js

@@ -94,7 +94,7 @@ const Integrations = () => {
 							'To use Google Fonts in Material Theme, please activate your %s and enable updates',
 							'material-design'
 						),
-						`<a href="https://developers.google.com/fonts/docs/developer_api#APIKey">${ __(
+						`<a href="https://developers.google.com/fonts/docs/developer_api#APIKey" target="_blank" rel="noopener noreferrer">${ __(
 							'Google API Key',
 							'material-design'
 						) }</a>`

plugin/assets/src/settings/components/integrations/updater.js

@@ -83,7 +83,7 @@ const Updater = ( { title, lastUpdated, needsKey, checked, type } ) => {
 		<div className="material-settings__updater">
 			<div className="mdc-layout-grid">
 				<div className="mdc-layout-grid__inner">
-					<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-8 mdc-layout-grid__cell--align-middle">
+					<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--align-middle">
 						<h3 className="mdc-typography--headline6">{ title }</h3>
 
 						{ isDisabled && (
@@ -95,7 +95,7 @@ const Updater = ( { title, lastUpdated, needsKey, checked, type } ) => {
 											'To enable Google Fonts updates please %s first',
 											'material-design'
 										),
-										`<a href="https://developers.google.com/fonts/docs/developer_api#APIKey">${ __(
+										`<a href="https://developers.google.com/fonts/docs/developer_api#APIKey" target="_blank" rel="noopener noreferrer">${ __(
 											'activate Google API Key',
 											'material-design'
 										) }</a>`
@@ -114,7 +114,7 @@ const Updater = ( { title, lastUpdated, needsKey, checked, type } ) => {
 						) }
 					</div>
 
-					<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--align-middle material-settings__cell--justify-end">
+					<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 mdc-layout-grid__cell--align-middle material-settings__cell--justify-end">
 						{ ! isDisabled && (
 							<Switch
 								checked={ checked }

plugin/php/class-design-assets-rest-controller.php

@@ -82,9 +82,7 @@ public function register_routes() {
 				[
 					'methods'             => \WP_REST_Server::READABLE,
 					'callback'            => [ $this, 'get_fonts' ],
-					'permission_callback' => function( WP_REST_Request $request ) {
-						return current_user_can( 'manage_options' );
-					},
+					'permission_callback' => [ $this, 'has_permissions' ],
 				],
 				'schema' => [ $this, 'get_item_schema' ],
 			]
@@ -97,9 +95,7 @@ public function register_routes() {
 				[
 					'methods'             => \WP_REST_Server::READABLE,
 					'callback'            => [ $this, 'get_icons' ],
-					'permission_callback' => function( WP_REST_Request $request ) {
-						return current_user_can( 'manage_options' );
-					},
+					'permission_callback' => [ $this, 'has_permissions' ],
 				],
 				'schema' => [ $this, 'get_item_schema' ],
 			]
@@ -112,9 +108,7 @@ public function register_routes() {
 				[
 					'methods'             => \WP_REST_Server::CREATABLE,
 					'callback'            => [ $this, 'register_api_key' ],
-					'permission_callback' => function( WP_REST_Request $request ) {
-						return current_user_can( 'manage_options' );
-					},
+					'permission_callback' => [ $this, 'has_permissions' ],
 				],
 				'schema' => [ $this, 'get_item_schema' ],
 			]
@@ -127,15 +121,22 @@ public function register_routes() {
 				[
 					'methods'             => \WP_REST_Server::CREATABLE,
 					'callback'            => [ $this, 'toggle_auto_updates' ],
-					'permission_callback' => function( WP_REST_Request $request ) {
-						return current_user_can( 'manage_options' );
-					},
+					'permission_callback' => [ $this, 'has_permissions' ],
 				],
 				'schema' => [ $this, 'get_item_schema' ],
 			]
 		);
 	}
 
+	/**
+	 * Determine if the user has permissions to make a request.
+	 *
+	 * @return boolean
+	 */
+	public function has_permissions() {
+		return current_user_can( 'manage_options' );
+	}
+
 	/**
 	 * Get the schema, conforming to JSON Schema.
 	 *