Course Card block example.

course-card-block.js

/**
 * WordPress dependencies
 */
import {
	InspectorControls,
	MediaUpload,
	useBlockProps,
} from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import { __ } from '@wordpress/i18n';
import {
	BaseControl,
	Button,
	PanelBody,
	Placeholder,
	TextareaControl,
	TextControl,
} from '@wordpress/components';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
 * @param          props.attributes
 * @param          props.setAttributes
 * @param {Object} props               Block properties
 * @return {WPElement} Element to render.
 */
export default function Edit( { attributes, setAttributes } ) {
	const blockProps = useBlockProps();

	return (
		<>
			<div { ...blockProps }>
				<InspectorControls key="setting">
					<PanelBody title={ __( 'Settings', 'plugin-name-core' ) }>
						<TextControl
							label={ __( 'Name', 'plugin-name-core' ) }
							value={ attributes.name ?? '' }
							onChange={ ( value ) =>
								setAttributes( { name: value } )
							}
						/>
						<TextareaControl
							label={ __( 'Description', 'plugin-name-core' ) }
							value={ attributes.description ?? '' }
							onChange={ ( value ) =>
								setAttributes( { description: value } )
							}
						/>
						<TextareaControl
							label={ __( 'Skills', 'plugin-name-core' ) }
							help={ __(
								'What skills will a student learn?',
								'plugin-name-core'
							) }
							value={ attributes.skills ?? '' }
							onChange={ ( value ) =>
								setAttributes( { skills: value } )
							}
						/>
						<TextControl
							label={ __( 'Time', 'plugin-name-core' ) }
							help={ __(
								'Average time it takes to complete this course.',
								'plugin-name-core'
							) }
							value={ attributes.time ?? '' }
							onChange={ ( value ) =>
								setAttributes( { time: value } )
							}
						/>
						<TextControl
							label={ __( 'Button Link', 'plugin-name-core' ) }
							help={ __(
								'Link address for the button.',
								'plugin-name-core'
							) }
							value={ attributes.button_url ?? '' }
							onChange={ ( value ) =>
								setAttributes( { button_url: value } )
							}
						/>
						<TextControl
							label={ __( 'Button Text', 'plugin-name-core' ) }
							value={ attributes.button_text ?? '' }
							onChange={ ( value ) =>
								setAttributes( { button_text: value } )
							}
						/>
						<MediaUpload
							onSelect={ ( media ) => {
								setAttributes( { image_id: media.id } );
							} }
							multiple={ false }
							render={ ( { open } ) => (
								<BaseControl>
									<BaseControl.VisualLabel>
										{ __( 'Logo', 'plugin-name-core' ) }
									</BaseControl.VisualLabel>
									<div
										style={ {
											display: 'flex',
											gap: '8px',
										} }
									>
										{ ! attributes.image_id ? (
											<Button
												variant="primary"
												onClick={ open }
											>
												{ __(
													'Upload',
													'plugin-name-core'
												) }
											</Button>
										) : (
											<Button
												variant="primary"
												onClick={ open }
											>
												{ __(
													'Replace',
													'plugin-name-core'
												) }
											</Button>
										) }

										{ ! attributes.image_id ? (
											''
										) : (
											<Button
												variant="secondary"
												onClick={ () =>
													setAttributes( {
														image_id: 0,
													} )
												}
											>
												{ __(
													'Remove',
													'plugin-name-core'
												) }
											</Button>
										) }
									</div>
								</BaseControl>
							) }
						/>
					</PanelBody>
				</InspectorControls>
				{ ! Object.keys( attributes ).length ? (
					<Placeholder
						label={ __( 'Course Card', 'plugin-name-core' ) }
						instructions={ __(
							'Add details in the card settings to see them previewed.',
							'plugin-name-core'
						) }
					/>
				) : (
					<ServerSideRender
						block="plugin-name-core/course-card"
						attributes={ attributes }
					/>
				) }
			</div>
		</>
	);
}