Support » Developing with WordPress » How to list the available blocks when pressing «/»

  • Resolved Albin

    (@albinvlc)


    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 weeks ago by Albin.
Viewing 5 replies - 1 through 5 (of 5 total)
  • darerodz

    (@darerodz)

    Hi @albinvlc!

    I’m just taking a look at your issue. What’s your use case for, exactly? If you want to limit the list of available blocks or list your own, you can do so using block filters (e.g. Removing blocks, Hidding blocks from the inserter).

    You can also specify which blocks are allowed inside certain block types defining parent or ancestor on their block.json. If you need to do so on already-defined block types, you can modify them with the blocks.registerBlockType filter.

    Let me know if it helps!

    PS: The inserter is not a block but an internal part of the editor, defined here: https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/inserter

    Thread Starter Albin

    (@albinvlc)

    Hi @darerodz

    Think about a new Post, you only have an empty core/paragraph block, then you type “/” and a list of available blocks is shown in a pop-up, to let you choose which one insert.

    That’s exactly what I want to do in my block. When the user has the focus on my RichText and types “/”, how do I show that pop-up?

    Thanks for taking a look at my issue.
    – Albin

    Hi again, @albinvlc

    I haven’t found what makes the Paragraph block open the inserter. However, other blocks (e.g., Heading) use an experimental “support” property named __experimentalSlashInserter which seems to be what you’re looking for.

    You’d have to add this code in your block definition right after attributes:

    
    supports: {
    	__experimentalSlashInserter: true,
    },
    

    Hope that works for you.

    • This reply was modified 1 week, 6 days ago by darerodz.
    • This reply was modified 1 week, 6 days ago by darerodz.
    Thread Starter Albin

    (@albinvlc)

    Hello @darerodz

    Many thanks because it works, it does what I need.

    I didn´t pay attention to __experimentalWhatever because I think that this feature exists since the very beginning and I expected to find some other way to make it work. Some kind of component wrapping or attribute like onSlash or … who knows.

    In fact, I would sleep better if I found another way (not experimental) to implement this feature but, as it works, I am happy and looking forward to continue my development.

    – Albin

    • This reply was modified 1 week, 5 days ago by Albin.

    Glad it worked, @albinvlc! Would you mind marking this topic as resolved? 🙂

    PS: You are right; there should be another way to do that, as the Paragraph block is not using that experimental “support” to open the block inserter. I couldn’t find how it is, though; probably it’s something very coupled with the editor and not intended to be used by developers.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.