How to Get a List of Formats of a Block?

admin管理员组

文章数量:1122826

StackExchange Community,

I have created a custom format using the Format API. I need a way of retrieving a list of formats being used on the currently selected block. Basically it needs to behave similarly to getActiveFormat( value, formatName ). The primary difference being that this function only retrieves the format instance of the selected text. I need a list of every instance of my custom format as the custom formats will have unique attributes that will be added when applying the custom format. For example I am looking to do the following.

const currentBlock = wp.data.select('core/block-editor').getSelectedBlock()
const formats = getActiveFormats( currentBlock )

console.log(formats)

// Expecting to log a current list of all format instances as objects

If you have created functions before it would generate a list similar to the value.formats property that is passed through the edit. Any help would be appreciated.

Additional context

Below is an example of how I am adding a the new format. Basically, the format is adding a link to a post that will be used to trigger a modal view of the post. The value object has a property called formats which contains an updated list of formats used on the block. I then use render_block to inject my modal html based on what posts are specified via the format. If I could parse a list of my custom format instances to the block attribute, this should work. The problem I am having is applying the format and then updating the block attribute using the onChange function that is passed into the edit props.

import { 
    registerFormatType, 
    getActiveFormat, 
    getActiveFormats, 
    useAnchorRef 
} from '@wordpress/rich-text';

import { default as ModalPopover } from './components/modal-popover';

const formatName = 'custom-format/modal-text-link';

function ModalEdit( props ) {
    const {
        name,
        activeAttributes,
        activeObjectAttributes,
        value,
        onChange,
        contentRef,
    } = props

    // ...removed for simplicity

    console.log( value.formats );
    // returns a current list of all formats on this block

    return (
        <>
            <RichTextToolbarButton
                icon={ <Icon size="36px" icon={ inbox } /> }
                title="Modal Link"
                onClick={ openModal }
                isActive={ isActive() }
            />
            { isOpen && (
                <ModalPopover
                    name={ formatName }
                    value={ value }
                    onClose={ closeModal }
                    onChange={ ( ...args ) => onChange( ...args ) }
                    isFormat={ true }
                    anchorRef={ anchorRef }
                    changeAttribute={ changeAttribute }
                />
            ) }
        </>
    );
}
registerFormatType( formatName, {
    title: 'Modal Text Link',
    tagName: 'a',
    className: 'modal-text-link',
    edit: ModalEdit,
} );

本文标签： How to Get a List of Formats of a Block