Merge pull request #199 from wp-graphql/fix/wp-org-feedback

refactor: misc fixes for WordPress.org submission
wp-graphql · Sep 9, 2024 · 99b5b59 · 99b5b59
2 parents c4fc08a + e53625f
commit 99b5b59
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 48 deletions.
diff --git a/ACTIONS_AND_FILTERS.md b/ACTIONS_AND_FILTERS.md
@@ -14,8 +14,13 @@
 
 ## JavaScript Actions
 
-- `wpgraphqlide_destroyed`
-- `wpgraphqlide_rendered` ([graphiql_rendered](https://www.wpgraphql.com/docs/customizing-wpgraphiql#graphiql_rendered))
+- `wpgraphql-ide.init`
+- `wpgraphql-ide.rendered` ([graphiql_rendered](https://www.wpgraphql.com/docs/customizing-wpgraphiql#graphiql_rendered))
+- `wpgraphql-ide.destroyed`
+- `wpgraphql-ide.afterRegisterToolbarButton`
+- `wpgraphql-ide.registerToolbarButtonError`
+- `wpgraphql-ide.afterRegisterActivityBarPanel`
+- `wpgraphql-ide.registerActivityBarPanelError`
 
 ## JavaScript Filters
 

diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "wp-env": "wp-env"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.27.1",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@playwright/test": "^1.41.2",
@@ -63,7 +64,6 @@
     "sort-package-json": "^2.7.0"
   },
   "dependencies": {
-    "@changesets/cli": "^2.27.1",
     "@graphiql/react": "^0.22.2",
     "@graphiql/toolkit": "^0.9.1",
     "@wordpress/components": "^27.0.0",

diff --git a/readme.txt b/readme.txt
@@ -18,6 +18,23 @@ GraphQL IDE for WPGraphQL
 
 == Frequently Asked Questions ==
 
+= Where can I find the non-compressed JavaScript and CSS source code? =
+
+The non-compressed source code for the JavaScript and CSS files is available in the following directories:
+
+- **Scripts**: [src/ directory](https://github.com/wp-graphql/wpgraphql-ide/tree/main/src)
+- **Styles**: [styles/ directory](https://github.com/wp-graphql/wpgraphql-ide/tree/main/styles)
+
+You can view or download the source code directly from the GitHub repository.
+
+= What are some of the major dependencies used in the plugin? =
+
+The WPGraphQL IDE plugin includes several important dependencies. You can learn more about these libraries at the following links:
+
+- **GraphQL.js**: [https://github.com/graphql/graphql-js](https://github.com/graphql/graphql-js)
+- **GraphiQL**: [https://github.com/graphql/graphiql](https://github.com/graphql/graphiql)
+- **Vaul**: [https://github.com/emilkowalski/vaul](https://github.com/emilkowalski/vaul)
+
 == Screenshots ==
 
 == Changelog ==

diff --git a/src/access-functions.js b/src/access-functions.js
@@ -21,11 +21,11 @@ export function registerDocumentEditorToolbarButton(
 			config,
 			priority
 		);
-		hooks.doAction( 'afterRegisterToolbarButton', name, config, priority );
+		hooks.doAction( 'wpgraphql-ide.afterRegisterToolbarButton', name, config, priority );
 	} catch ( error ) {
 		console.error( `Failed to register button: ${ name }`, error );
 		hooks.doAction(
-			'registerToolbarButtonError',
+			'wpgraphql-ide.registerToolbarButtonError',
 			name,
 			config,
 			priority,
@@ -42,7 +42,7 @@ export function registerActivityBarPanel( name, config, priority = 10 ) {
 			priority
 		);
 		hooks.doAction(
-			'afterRegisterActivityBarPanel',
+			'wpgraphql-ide.afterRegisterActivityBarPanel',
 			name,
 			config,
 			priority
@@ -53,7 +53,7 @@ export function registerActivityBarPanel( name, config, priority = 10 ) {
 			error
 		);
 		hooks.doAction(
-			'registerActivityBarPanelError',
+			'wpgraphql-ide.registerActivityBarPanelError',
 			name,
 			config,
 			priority,
@@ -74,15 +74,15 @@ export function registerActivityBarPanel( name, config, priority = 10 ) {
 // 			priority
 // 		);
 // 		hooks.doAction(
-// 			'afterRegisterActivityBarUtilityButton',
+// 			'wpgraphql-ide.afterRegisterActivityBarUtilityButton',
 // 			name,
 // 			config,
 // 			priority
 // 		);
 // 	} catch ( error ) {
 // 		console.error( `Failed to register button: ${ name }`, error );
 // 		hooks.doAction(
-// 			'registerActivityBarUtilityButtonError',
+// 			'wpgraphql-ide.registerActivityBarUtilityButtonError',
 // 			name,
 // 			config,
 // 			priority,

diff --git a/src/components/AppWrapper.jsx b/src/components/AppWrapper.jsx
@@ -88,22 +88,22 @@ export function AppWrapper() {
 		/**
 		 * Perform actions on component mount.
 		 *
-		 * Triggers a custom action 'wpgraphqlide_rendered' when the App component mounts,
+		 * Triggers a custom action 'wpgraphql-ide.rendered' when the App component mounts,
 		 * allowing plugins or themes to hook into this event. The action passes
 		 * the current state of `drawerOpen` to any listeners, providing context
 		 * about the application's UI state.
 		 */
-		doAction( 'wpgraphqlide_rendered' );
+		doAction( 'wpgraphql-ide.rendered' );
 
 		/**
 		 * Cleanup action on component unmount.
 		 *
-		 * Returns a cleanup function that triggers the 'wpgraphqlide_destroyed' action,
+		 * Returns a cleanup function that triggers the 'wpgraphql-ide.destroyed' action,
 		 * signaling that the App component is about to unmount. This allows for
 		 * any necessary cleanup or teardown operations in response to the App
 		 * component's lifecycle.
 		 */
-		return () => doAction( 'wpgraphqlide_destroyed' );
+		return () => doAction( 'wpgraphql-ide.destroyed' );
 	}, [] );
 
 	return <RenderAppWrapper />;

diff --git a/wpgraphql-ide.php b/wpgraphql-ide.php
@@ -253,7 +253,7 @@ function register_wpadminbar_menus(): void {
 		$wp_admin_bar->add_node(
 			[
 				'id'    => 'wpgraphql-ide',
-				'title' => '<div id="' . esc_attr( WPGRAPHQL_IDE_ROOT_ELEMENT_ID ) . '"><span class="ab-icon"></span>' . $app_context['drawerButtonLabel'] . '</div>',
+				'title' => '<div id="' . esc_attr( WPGRAPHQL_IDE_ROOT_ELEMENT_ID ) . '"><span class="ab-icon"></span>' . esc_html( $app_context['drawerButtonLabel'] ) . '</div>',
 				'href'  => '#',
 			]
 		);
@@ -262,8 +262,8 @@ function register_wpadminbar_menus(): void {
 		$wp_admin_bar->add_node(
 			[
 				'id'    => 'wpgraphql-ide',
-				'title' => '<span class="ab-icon"></span>' . $app_context['drawerButtonLabel'],
-				'href'  => admin_url( 'admin.php?page=graphql-ide' ),
+				'title' => '<span class="ab-icon"></span>' . esc_html( $app_context['drawerButtonLabel'] ),
+				'href'  => esc_url( admin_url( 'admin.php?page=graphql-ide' ) ),
 			]
 		);
 	}
@@ -290,8 +290,8 @@ function register_dedicated_ide_menu(): void {
 
 	add_submenu_page(
 		'graphiql-ide',
-		__( 'GraphQL IDE', 'wpgraphql-ide' ),
-		__( 'GraphQL IDE', 'wpgraphql-ide' ),
+		esc_html__( 'GraphQL IDE', 'wpgraphql-ide' ),
+		esc_html__( 'GraphQL IDE', 'wpgraphql-ide' ),
 		'manage_graphql_ide',
 		'graphql-ide',
 		__NAMESPACE__ . '\\render_dedicated_ide_page'
@@ -534,8 +534,7 @@ function get_app_context(): array {
  * @param array<int, mixed> $notices The array of notices to render.
  */
 function graphql_admin_notices_render_notices( array $notices ): void {
-	echo '
-    <style>
+	$custom_css = '
         body.graphql_page_graphql-ide #wpbody .wpgraphql-admin-notice {
             display: block;
             position: absolute;
@@ -550,8 +549,16 @@ function graphql_admin_notices_render_notices( array $notices ): void {
         body.graphql_page_graphql-ide #wpgraphql-ide-root {
             height: calc(100vh - var(--wp-admin--admin-bar--height) - ' . count( $notices ) * 45 . 'px);
         }
-    </style>
     ';
+
+	/**
+	 * Register and enqueue the custom CSS is needed in order to properly add inline styles.
+	 * This is needed because of the way graphql_admin_notices_render_notices is called, outside of the normal enqueue process.
+	 */
+	// phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
+	wp_register_style( 'wpgraphql-ide-admin-notices', false );
+	wp_enqueue_style( 'wpgraphql-ide-admin-notices' );
+	wp_add_inline_style( 'wpgraphql-ide-admin-notices', $custom_css );
 }
 
 /**
@@ -563,13 +570,20 @@ function graphql_admin_notices_render_notices( array $notices ): void {
  * @param int                  $count The count of notices.
  */
 function graphql_admin_notices_render_notice( string $notice_slug, array $notice, bool $is_dismissable, int $count ): void {
-	echo '
-    <style>
+	$custom_css = '
         body.graphql_page_graphql-ide #wpbody #wpgraphql-admin-notice-' . esc_attr( $notice_slug ) . ' {
             top: ' . esc_attr( ( $count * 45 ) . 'px' ) . ';
         }
-    </style>
     ';
+
+	/**
+	 * Register and enqueue the custom CSS is needed in order to properly add inline styles.
+	 * This is needed because of the way graphql_admin_notices_render_notices is called, outside of the normal enqueue process.
+	 */
+	// phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
+	wp_register_style( 'wpgraphql-ide-admin-notice', false );
+	wp_enqueue_style( 'wpgraphql-ide-admin-notice' );
+	wp_add_inline_style( 'wpgraphql-ide-admin-notice', $custom_css );
 }
 
 /**
@@ -761,28 +775,28 @@ function rename_reorder_submenu_items(): void {
  * @return string The SVG logo markup.
  */
 function graphql_logo_svg(): string {
-	return <<<XML
-        <svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="80" cy="80" r="64" fill="url(#paint0_radial_30_2860)"/>
-            <g filter="url(#filter0_d_30_2860)">
-            <path d="M81.5239 72.2556C84.2608 72.2556 86.4795 70.0369 86.4795 67.3C86.4795 64.5632 84.2608 62.3445 81.5239 62.3445C78.787 62.3445 76.5684 64.5632 76.5684 67.3C76.5684 70.0369 78.787 72.2556 81.5239 72.2556Z" fill="white"/>
-            <path d="M118.588 90.4878C116.007 90.05 113.769 92.0116 113.736 94.5018C113.711 96.5294 112.592 98.4291 110.696 99.1476C107.17 100.49 103.825 97.9046 103.825 94.5555V67.5931C103.825 56.1994 95.3755 46.3915 84.0521 45.1403C71.8903 43.794 61.3928 52.3011 59.5262 63.6741C59.5262 63.6823 59.5179 63.6906 59.5096 63.6906C49.4457 65.8875 42 74.8365 42 85.4703V103.665C42 105.933 43.8377 107.77 46.1049 107.77H55.3718C57.6348 107.77 59.3527 105.92 59.3445 103.657C59.3321 100.213 62.8505 97.5742 66.4805 99.1518C68.2314 99.9157 69.2638 101.716 69.2556 103.624C69.2473 105.912 71.1015 107.766 73.3852 107.766H82.4952C84.7624 107.766 86.6 105.928 86.6 103.661V85.4951C86.6 84.8302 86.472 84.1612 86.1623 83.5748C85.3777 82.0757 83.8538 81.2291 82.2515 81.3159C82.0162 81.3283 81.7725 81.3365 81.5289 81.3365C73.7982 81.3365 67.4964 75.0471 67.4881 67.3164C67.4881 67.3123 67.4881 67.304 67.4881 67.2999L67.55 66.4657C68.058 59.5362 73.4678 53.8455 80.3973 53.3004C88.6483 52.6479 95.5737 59.181 95.5737 67.2958V94.3407C95.5737 100.663 100.666 106.779 106.926 107.638C114.954 108.741 121.863 102.575 121.999 94.7867C122.036 92.7137 120.641 90.8305 118.596 90.4837L118.588 90.4878ZM78.3367 89.7238V99.0981C78.3367 99.3252 78.1508 99.511 77.9237 99.511H77.1432C76.9697 99.511 76.8169 99.3995 76.7591 99.2343C74.9421 94.1053 70.0402 90.4258 64.3 90.4258C58.5598 90.4258 53.658 94.1095 51.8409 99.2343C51.7831 99.3995 51.6303 99.511 51.4527 99.511H50.6722C50.4451 99.511 50.2593 99.3252 50.2593 99.0981V85.4703C50.2593 79.4823 54.0048 74.3409 59.3279 72.3298C59.5592 72.2431 59.8111 72.3835 59.8689 72.623C61.9874 81.2333 69.1276 87.8985 77.9898 89.315C78.188 89.348 78.3367 89.5173 78.3367 89.7197V89.7238Z" fill="white"/>
-            </g>
-            <defs>
-            <filter id="filter0_d_30_2860" x="34" y="37" width="96" height="78.7703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-            <feOffset/>
-            <feGaussianBlur stdDeviation="4"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.141176 0 0 0 0 0.278431 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_30_2860"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_30_2860" result="shape"/>
-            </filter>
-            <radialGradient id="paint0_radial_30_2860" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(45) scale(181.019)">
-            <stop stop-color="#0ECAD4"/>
-            <stop offset="1" stop-color="#7A45E5"/>
-            </radialGradient>
-            </defs>
-        </svg>
-XML;
+	$svg  = '<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">';
+	$svg .= '<circle cx="80" cy="80" r="64" fill="url(#paint0_radial_30_2860)"/>';
+	$svg .= '<g filter="url(#filter0_d_30_2860)">';
+	$svg .= '<path d="M81.5239 72.2556C84.2608 72.2556 86.4795 70.0369 86.4795 67.3C86.4795 64.5632 84.2608 62.3445 81.5239 62.3445C78.787 62.3445 76.5684 64.5632 76.5684 67.3C76.5684 70.0369 78.787 72.2556 81.5239 72.2556Z" fill="white"/>';
+	$svg .= '<path d="M118.588 90.4878C116.007 90.05 113.769 92.0116 113.736 94.5018C113.711 96.5294 112.592 98.4291 110.696 99.1476C107.17 100.49 103.825 97.9046 103.825 94.5555V67.5931C103.825 56.1994 95.3755 46.3915 84.0521 45.1403C71.8903 43.794 61.3928 52.3011 59.5262 63.6741C59.5262 63.6823 59.5179 63.6906 59.5096 63.6906C49.4457 65.8875 42 74.8365 42 85.4703V103.665C42 105.933 43.8377 107.77 46.1049 107.77H55.3718C57.6348 107.77 59.3527 105.92 59.3445 103.657C59.3321 100.213 62.8505 97.5742 66.4805 99.1518C68.2314 99.9157 69.2638 101.716 69.2556 103.624C69.2473 105.912 71.1015 107.766 73.3852 107.766H82.4952C84.7624 107.766 86.6 105.928 86.6 103.661V85.4951C86.6 84.8302 86.472 84.1612 86.1623 83.5748C85.3777 82.0757 83.8538 81.2291 82.2515 81.3159C82.0162 81.3283 81.7725 81.3365 81.5289 81.3365C73.7982 81.3365 67.4964 75.0471 67.4881 67.3164C67.4881 67.3123 67.4881 67.304 67.4881 67.2999L67.55 66.4657C68.058 59.5362 73.4678 53.8455 80.3973 53.3004C88.6483 52.6479 95.5737 59.181 95.5737 67.2958V94.3407C95.5737 100.663 100.666 106.779 106.926 107.638C114.954 108.741 121.863 102.575 121.999 94.7867C122.036 92.7137 120.641 90.8305 118.596 90.4837L118.588 90.4878ZM78.3367 89.7238V99.0981C78.3367 99.3252 78.1508 99.511 77.9237 99.511H77.1432C76.9697 99.511 76.8169 99.3995 76.7591 99.2343C74.9421 94.1053 70.0402 90.4258 64.3 90.4258C58.5598 90.4258 53.658 94.1095 51.8409 99.2343C51.7831 99.3995 51.6303 99.511 51.4527 99.511H50.6722C50.4451 99.511 50.2593 99.3252 50.2593 99.0981V85.4703C50.2593 79.4823 54.0048 74.3409 59.3279 72.3298C59.5592 72.2431 59.8111 72.3835 59.8689 72.623C61.9874 81.2333 69.1276 87.8985 77.9898 89.315C78.188 89.348 78.3367 89.5173 78.3367 89.7197V89.7238Z" fill="white"/>';
+	$svg .= '</g>';
+	$svg .= '<defs>';
+	$svg .= '<filter id="filter0_d_30_2860" x="34" y="37" width="96" height="78.7703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">';
+	$svg .= '<feFlood flood-opacity="0" result="BackgroundImageFix"/>';
+	$svg .= '<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>';
+	$svg .= '<feOffset/>';
+	$svg .= '<feGaussianBlur stdDeviation="4"/>';
+	$svg .= '<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.141176 0 0 0 0 0.278431 0 0 0 0.1 0"/>';
+	$svg .= '<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_30_2860"/>';
+	$svg .= '<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_30_2860" result="shape"/>';
+	$svg .= '</filter>';
+	$svg .= '<radialGradient id="paint0_radial_30_2860" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(45) scale(181.019)">';
+	$svg .= '<stop stop-color="#0ECAD4"/>';
+	$svg .= '<stop offset="1" stop-color="#7A45E5"/>';
+	$svg .= '</radialGradient>';
+	$svg .= '</defs>';
+	$svg .= '</svg>';
+
+	return $svg;
 }