Buduję prosty dynamiczny blok niestandardowy, który wyświetla listę postów niestandardowego typu postu.

JS:

import metadata from './block.json';

import './style.scss';

const { name } = metadata;

export const settings = {

    edit: (props => {
        const {
            attributes: { number },
            setAttributes,
        } = props;

        const blockProps = useBlockProps();

        const { posts, hasPostsResolved } = useSelect(select => {
            const query = {
                order: 'desc',
                orderby: 'date',
                status: 'publish',
                per_page: number,
                _embed: true
            };
            return {
                posts: select('core').getEntityRecords('postType', 'exhibit', query),
                hasPostsResolved: select('core').hasFinishedResolution('getEntityRecords', ['postType', 'exhibit', query]),
            }
        }, [number]);

        const setNumber = value => {
            setAttributes({ number: parseInt(value) });
        };

        const displayPosts = (posts) => {
            return (
                posts.map((post, index) => {
                    return (
                        <article id={`post-${post.id}`} className="wp-block-my-exhibit-list__post" key={index}>
                            <header class="wp-block-my-exhibit-list__post-header">
                                <h2 className="wp-block-my-exhibit-list__post-title">
                                    {
                                        post.title.rendered ?
                                            decodeEntities(post.title.rendered) :
                                            __('(no title)', 'my-domain')
                                    }
                                </h2>
                                <div class="wp-block-my-exhibit-list__post-meta">
                                    <div class="wp-block-my-exhibit-list__post-event-dates">
                                        {post.meta._my_start_date ? dateI18n('d.m', post.meta._my_start_date) : ''}
                                        -
                                        {post.meta._my_end_date ? dateI18n('d.m.Y', post.meta._my_end_date) : ''}
                                    </div>
                                </div>
                            </header>
                        </article>
                    )
                })
            )
        };

        return (
            <>
                <InspectorControls>
                    <PanelBody title={__('Settings', 'my-domain')}>
                        <RangeControl
                            label={__('Number of exhibits to show:', 'my-domain')}
                            value={number}
                            onChange={setNumber}
                            min={1}
                            max={20}
                        />
                    </PanelBody>
                </InspectorControls>
                <div {...blockProps}>
                    {!hasPostsResolved &&
                        <Spinner />
                    }
                    {hasPostsResolved && posts?.length === 0 &&
                        <p>
                            {__('No posts found', 'my-domain')}
                        </p>
                    }
                    {hasPostsResolved && posts?.length > 0 &&
                        <>
                            <div class="wp-block-my-exhibit-list__posts">
                                {displayPosts(posts)}
                            </div>
                        </>
                    }
                </div>
            </>
        );

    }),

};

registerBlockType(name, settings);

Włączyłem podstawowe elementy sterujące typografią za pośrednictwem pliku block.json plik:

{
    "$schema": "
    "apiVersion": 3,
    "name": "my/exhibit-list",
    "title": "Exhibit List",
    "description": "Display a list of exhibits.",
    "textdomain": "my-domain",
    "category": "widgets",
    "attributes": {
        "number": {
            "type": "integer",
            "default": 10
        }
    },
    "supports": {
        "spacing": {
            "margin": true,
            "padding": true
        },
        "typography": {
            "fontSize": true,
            "__experimentalFontFamily": true
        }
    },
    "editorScript": "file:./index.js",
    "style": "file:./style-index.css"
}

Po włączeniu kontroli typografii mogę ustawić rodzinę i rozmiar czcionki w CAŁYM bloku. Moje pytanie brzmi: czy istnieje sposób na oddzielne sterowanie typografią dla tytułów (.wp-block-my-exhibit-list__post-title) i dla meta (.wp-block-my-exhibit-list__post-meta)?

Jeśli tak to jak?