Merge branch 'upkeep/hook-use-taxonomy' of github.com:10up/block-comp…

…onents into upkeep/hook-use-taxonomy

components/drag-handle/index.js → components/drag-handle/index.tsx

@@ -1,10 +1,13 @@
+import type { SVGProps } from 'react';
+
 /**
  * Renders an SVG drag handle.
  *
  * @param {object} props The prop object.
  * @returns {*} React JSX
  */
-export const DragHandle = (props) => (
+
+export const DragHandle: React.FC<SVGProps<SVGSVGElement>> = (props) => (
 	<svg
 		style={{ marginRight: '10px', cursor: 'grab', flexShrink: 0 }}
 		width="18"

components/is-admin/index.js → components/is-admin/index.tsx

@@ -1,19 +1,29 @@
 import { useSelect } from '@wordpress/data';
 
+interface IsAdminProps {
+	/**
+	 * Fallback component.
+	 */
+	fallback: React.ReactNode | null;
+
+	/**
+	 * Child component.
+	 */
+	children: React.ReactNode;
+}
+
 /**
  * IsAdmin
  *
  * A wrapper component that checks wether the current user has admin capabilities
  * and only returns the child components if the user is an admin. You can pass a
  * fallback component via the fallback prop.
- *
- * @param {object} props react props
- * @param {*} props.fallback fallback component
- * @param {*} props.children child components
- * @returns {*}
  */
-export const IsAdmin = ({ fallback = null, children }) => {
-	const hasAdminPermissions = useSelect(
+export const IsAdmin: React.FC<IsAdminProps> = ({
+	fallback = null,
+	children,
+}) => {
+	const hasAdminPermissions: boolean = useSelect(
 		(select) => select('core').canUser('read', 'users?roles=1'),
 		[],
 	);

components/optional/index.ts

@@ -0,0 +1,21 @@
+import { useBlockEditContext } from '@wordpress/block-editor';
+
+interface OptionalProps {
+	/**
+	 * The value to check for truthiness.
+	 */
+	value?: string | number | boolean;
+
+	/**
+	 * The children to render if the value is truthy.
+	 */
+	children: React.ReactNode;
+}
+
+export const Optional: React.FC<OptionalProps> = ({
+	value = '',
+	children,
+}) => {
+	const { isSelected } = useBlockEditContext();
+	return (isSelected || !!value) && children;
+};

hooks/use-is-plugin-active/index.ts

@@ -0,0 +1,29 @@
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { Plugin } from '@wordpress/core-data';
+
+const ACTIVE_STATUSES = ['active', 'network-active'] as const;
+
+/**
+ * Custom hook to check if a plugin is active and whether its resolution has finished.
+ *
+ * @param pluginName The name of the plugin to check.
+ * @returns A tuple containing two boolean values: the first indicating whether the plugin is active, 
+ * and the second indicating whether the resolution for the plugin has finished.
+ */
+export const useIsPluginActive = (pluginName: string) => {
+	return useSelect(
+		(select) => {
+			const storeSelectors = select(coreStore);
+			const plugin: Plugin = (storeSelectors as any).getPlugin(pluginName);
+			const hasResolvedPlugins: boolean = (storeSelectors as any).hasFinishedResolution('getPlugin', [
+				pluginName,
+			]);
+
+			const isPluginActive: boolean = ACTIVE_STATUSES.includes(plugin?.status);
+
+			return [isPluginActive, hasResolvedPlugins];
+		},
+		[pluginName],
+	) as [boolean, boolean];
+};

hooks/use-media/readme.md

@@ -18,7 +18,7 @@ function BlockEdit(props) {
     }
 
     return (
-        <img src={ media.source_url } alt={image.alt} />
+        <img src={ media.source_url } alt={ media.alt_text } />
     );
 }
 ```