How to list the available blocks when pressing ?/?

Hello

I want to develop my own default block and make it work as the core/paragrah, so I am using a RichText and I would like to list the available blocks when the user type “/”. But I can’t find in the documentation how to do it nor I see how Gutenberg does it.

I’ve been looking at https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/paragraph but I don′t see how do they implement that feature.

What should be added here?

const { registerBlockType, createBlock, replaceBlocks } = wp.blocks;
const { Component, Fragment, useRef, useEffect } = wp.element;
const { BlockControls, InspectorControls, RichText, useBlockProps } = wp.blockEditor;
const { PanelBody, TextControl, SelectControl, ToggleControl, ToolbarGroup } = wp.components;

registerBlockType( 'melange/inserter', {
	apiVersion: 2,
	category:    'melange',
	title:       'Testing inserter',
	description: 'Testing inserter.',
	attributes: {
		content: {
			'type': 'string',
			'source': 'html',
			'selector': 'p',
			'default': '',
		},
	},

	edit: function(props) {
		const { attributes, setAttributes, onRemove, onReplace, mergeBlocks, clientId } = props;

		var ref = useRef();

		const blockProps = useBlockProps({
			ref: ref,
		});

		return <>
			<RichText
				identifier = "content"
				tagName    = "p"
				value      = { attributes.content }
				onChange   = { newContent => setAttributes({ content: newContent }) }
				onMerge    = { mergeBlocks }
				onReplace  = { onReplace }
				onRemove   = { onRemove }
				onSplit    = { ( value, isOriginal ) => {
			//	console.log('onSplit', value, isOriginal);
					let newAttributes;
					if(isOriginal || value) {
						newAttributes = { ...attributes, content: value, };
					} else {
						newAttributes = { ...attributes, content: '', };
					}
					const block = createBlock('melange/customtext', newAttributes );
					if(isOriginal) block.clientId = clientId;
					return block;
				} }
				placeholder = "Escribe..."
				allowedFormats = {['core/bold', 'core/italic', 'core/link']}
				{ ...blockProps }
			/>
		</>;
	},

	save: function ({ attributes }) {

		const blockProps = useBlockProps.save({
			tagName:   'p',
		});

		return <RichText.Content { ...blockProps } value={ attributes.content } />;
	}

} );

Thanks a lot,
– Albin

• This topic was modified 2 years ago by Albin.