• Resuelto Albin

    (@albinvlc)


    Hola

    Quiero utilizar RichText como el core/paragrah y que aparezcan los bloques disponibles cuando se escribe «/» pero no encuentro en la documentación cómo hacerlo ni veo cómo lo hacen ellos.

    He estado mirando https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/paragraph

    ¿Qué habría que añadir aquí?

    
    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',
    			id:        block_id,
    		});
    
    		return <RichText.Content { ...blockProps } value={ attributes.content } />;
    	}
    
    } );
    

    Muchas gracias,
    – Albin

Viendo 1 respuesta (de un total de 1)
Viendo 1 respuesta (de un total de 1)
  • El debate ‘Como mostrar los bloques disponbiles al pulsar «/»’ está cerrado a nuevas respuestas.