Merge branch 'develop' into upkeep/component-post-title

10up · Apr 17, 2024 · d8cd835 · d8cd835
2 parents b806091 + 88f68d8
commit d8cd835
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 24 deletions.
diff --git a/components/content-search/SearchItem.js b/components/content-search/SearchItem.js
@@ -42,6 +42,7 @@ const ButtonStyled = styled(Button)`
 	.block-editor-link-control__search-item-header {
 		display: flex;
 		flex-direction: column;
+		align-items: flex-start;
 	}
 
 	mark {

diff --git a/components/content-search/index.js b/components/content-search/index.js
@@ -40,6 +40,14 @@ const LoadingContainer = styled.div`
 	}
 `;
 
+const StyledNavigableMenu = styled(NavigableMenu)`
+	width: 100%;
+`;
+
+const StyledSearchControl = styled(SearchControl)`
+	width: 100%;
+`;
+
 const ContentSearch = ({
 	onSelectItem,
 	placeholder,
@@ -353,8 +361,8 @@ const ContentSearch = ({
 
 	return (
 		<StyledComponentContext cacheKey="tenup-component-content-search">
-			<NavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
-				<SearchControl
+			<StyledNavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
+				<StyledSearchControl
 					__next40pxDefaultSize
 					value={searchString}
 					onChange={(newSearchString) => {
@@ -444,7 +452,7 @@ const ContentSearch = ({
 						{isLoading && currentPage > 1 && <StyledSpinner />}
 					</>
 				) : null}
-			</NavigableMenu>
+			</StyledNavigableMenu>
 		</StyledComponentContext>
 	);
 };

diff --git a/components/media-toolbar/index.js → components/media-toolbar/index.tsx b/components/media-toolbar/index.js → components/media-toolbar/index.tsx
@@ -1,8 +1,30 @@
 import { __ } from '@wordpress/i18n';
 import { MediaReplaceFlow, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import PropTypes from 'prop-types';
 import { useMedia } from '../../hooks/use-media';
+import type { Attachment } from '@wordpress/core-data';
+
+interface MediaToolbarProps {
+	/**
+	 * Callback to handle the selection of a media.
+	 */
+	onSelect: (media: Attachment) => void;
+
+	/**
+	 * Callback to handle the removal of a media.
+	 */
+	onRemove: (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+	/**
+	 * Wether or not the Remove Image button should be shown.
+	 */
+	isOptional?: boolean;
+
+	/**
+	 * The ID of the media, in this case the image.
+	 */
+	id: number;
+}
 
 /**
  * MediaToolbar
@@ -15,9 +37,7 @@ import { useMedia } from '../../hooks/use-media';
  * @param {object} props options
  * @returns {React.ReactElement} markup of the ToolbarGroup
  */
-export const MediaToolbar = (props) => {
-	const { onSelect, onRemove, isOptional = false, id } = props;
-
+export const MediaToolbar: React.FC<MediaToolbarProps> = ( { onSelect, onRemove, isOptional = false, id } ) => {
 	const hasImage = !!id;
 	const { media } = useMedia(id);
 
@@ -51,14 +71,3 @@ export const MediaToolbar = (props) => {
 		</ToolbarGroup>
 	);
 };
-
-MediaToolbar.defaultProps = {
-	isOptional: false,
-};
-
-MediaToolbar.propTypes = {
-	id: PropTypes.number.isRequired,
-	onSelect: PropTypes.func.isRequired,
-	onRemove: PropTypes.func.isRequired,
-	isOptional: PropTypes.bool,
-};
diff --git a/components/media-toolbar/readme.md b/components/media-toolbar/readme.md
@@ -1,6 +1,6 @@
 # MediaToolbar
 
-The MediaToolbar component is build to quickly add a complete media editing experience to the `BlockControls` toolbar. It shows an "Add Image" or "Replace Image" + "Remove Image" buttons that handle the full flow. Wether or not an image can be removed can be configured using the `isOptional` prop.
+The MediaToolbar component is build to quickly add a complete media editing experience to the `BlockControls` toolbar. It shows an "Add Image" or "Replace Image" + "Remove Image" buttons that handle the full flow. Whether or not an image can be removed can be configured using the `isOptional` prop.
 
 ## Usage
 

diff --git a/hooks/use-is-supported-taxonomy/index.js → hooks/use-is-supported-taxonomy/index.ts b/hooks/use-is-supported-taxonomy/index.js → hooks/use-is-supported-taxonomy/index.ts
@@ -1,7 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
-export const useIsSupportedTaxonomy = (postType, taxonomyName) => {
+export const useIsSupportedTaxonomy = (postType: string, taxonomyName: string) => {
 	return useSelect(
 		(select) => {
 			const postTypeObject = select(coreStore).getPostType(postType);
@@ -16,5 +16,5 @@ export const useIsSupportedTaxonomy = (postType, taxonomyName) => {
 			return [!!isSupportedTaxonomy, hasResolvedPostType];
 		},
 		[postType, taxonomyName],
-	);
+	) as [isSupportedTaxonomy: boolean, hasResolvedPostType: boolean];
 };
diff --git a/hooks/use-post/index.js → hooks/use-post/index.ts b/hooks/use-post/index.js → hooks/use-post/index.ts
@@ -20,8 +20,8 @@ export function usePost() {
 	const hasBlockContext = !!blockContextPostId && !!blockContextPostType;
 
 	return {
-		postId: blockContextPostId || globalPostId,
-		postType: blockContextPostType || globalPostType,
-		isEditable: hasBlockContext ? blockContextIsEditable : true,
+		postId: (blockContextPostId || globalPostId) as number | null,
+		postType: (blockContextPostType || globalPostType) as string,
+		isEditable: (hasBlockContext ? blockContextIsEditable : true) as boolean | null,
 	};
 }