From 69a08eebdf9cf3ecaf706075c848c186205467e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 17 Jun 2024 21:41:30 +0200 Subject: [PATCH 1/9] migrate CustomBlockAppender to TypeScript --- .../{index.js => index.tsx} | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) rename components/custom-block-appender/{index.js => index.tsx} (50%) diff --git a/components/custom-block-appender/index.js b/components/custom-block-appender/index.tsx similarity index 50% rename from components/custom-block-appender/index.js rename to components/custom-block-appender/index.tsx index 4b1645bb..57059fce 100644 --- a/components/custom-block-appender/index.js +++ b/components/custom-block-appender/index.tsx @@ -1,20 +1,22 @@ import { Inserter } from '@wordpress/block-editor'; -import { Button } from '@wordpress/components'; +import { Button, IconType } from '@wordpress/components'; +import { FC } from 'react'; -/** +interface CustomBlockAppenderProps { + rootClientId: string; + className?: string; + buttonText?: string; + icon?: IconType; + [key: string]: any; // For additional props spread onto the Button component +} + +/* * CustomBlockAppender. * * Provide a Button component to trigger the inserter. * Any undocumented props are spread onto the Button component. - * - * @param {object} props All props sent to this component. - * @param {string} props.rootClientId Client ID of the block where this is being used. - * @param {string} props.className class names to be added to the button. - * @param {string} [props.buttonText] Text to display in the Button. - * @param {string} [props.icon] The icon to use. - * @returns {Function} The component. */ -const CustomBlockAppender = ({ +export const CustomBlockAppender: FC = ({ rootClientId, buttonText = '', icon = 'plus', @@ -25,7 +27,13 @@ const CustomBlockAppender = ({ ( + renderToggle={({ + onToggle, + disabled, + }: { + onToggle: () => void; + disabled?: boolean; + }) => (