Follow react rules of hooks

assets/js/gutenberg-plugin.js

@@ -153,24 +153,34 @@ const DistributorIcon = () => (
  * Add the Distributor panel to Gutenberg
  */
 const DistributorPlugin = () => {
-	// Ensure the user has proper permissions
-	if (
-		dtGutenberg.noPermissions &&
-		1 === parseInt( dtGutenberg.noPermissions )
-	) {
-		return null;
-	}
-
 	// eslint-disable-next-line no-shadow, react-hooks/rules-of-hooks -- permission checks are needed.
 	const postType = useSelect( ( select ) =>
 		select( 'core/editor' ).getCurrentPostType()
 	);
 
-	// eslint-disable-next-line no-shadow, react-hooks/rules-of-hooks -- permission checks are needed.
+	// eslint-disable-next-line no-shadow -- permission checks are needed.
 	const postStatus = useSelect( ( select ) =>
 		select( 'core/editor' ).getCurrentPostAttribute( 'status' )
 	);
 
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const distributorTopMenu = document.querySelector(
+		'#wp-admin-bar-distributor'
+	);
+
+	// eslint-disable-next-line no-shadow -- permission checks are needed.
+	const post = useSelect( ( select ) =>
+		select( 'core/editor' ).getCurrentPost()
+	);
+
+	// Ensure the user has proper permissions
+	if (
+		dtGutenberg.noPermissions &&
+		1 === parseInt( dtGutenberg.noPermissions )
+	) {
+		return null;
+	}
+
 	// Ensure we are on a supported post type
 	if (
 		dtGutenberg.supportedPostTypes &&
@@ -179,14 +189,6 @@ const DistributorPlugin = () => {
 		return null;
 	}
 
-	const distributorTopMenu = document.querySelector(
-		'#wp-admin-bar-distributor'
-	);
-
-	// eslint-disable-next-line no-shadow, react-hooks/rules-of-hooks -- permission checks are needed.
-	const post = useSelect( ( select ) =>
-		select( 'core/editor' ).getCurrentPost()
-	);
 	// Make the post title and status available to the top menu.
 	dt.postTitle = post.title;
 	dt.postStatus = post.status;