inc2734 / unitone

34 stars 4 forks source link

カバーブロックのバリエーションの isActive を設定したい #263

Closed inc2734 closed 5 months ago

inc2734 commented 8 months ago

下記やってみたけど失敗。isActivetrue になるタイミングもあるみたいだけど、常にそうなるわけではないっぽい?ために、実際の表示のときには反映されない。

// block/cover/index.js

import { store as blockEditorStore } from '@wordpress/block-editor';
import { createHigherOrderComponent } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { addFilter } from '@wordpress/hooks';

const setIsActiveVariation = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        if ( 'unitone/cover' !== props.name ) {
            return <BlockListBlock { ...props } />;
        }

        const innerBlocks = useSelect(
            ( select ) => {
                return (
                    select( blockEditorStore ).getBlock( props.clientId )
                        ?.innerBlocks || []
                );
            },
            [ props.clientId ]
        );

        const newProps = { ...props };

        if ( 0 < innerBlocks.length ) {
            const innerBlockTypes = innerBlocks.map( ( innerblock ) => {
                return innerblock.attributes?.position;
            } );

            let coverVariation;
            switch ( innerBlockTypes.toString() ) {
                case [ 'top' ].toString():
                    coverVariation = 'cover-top';
                    break;
                case [ 'center' ].toString():
                    coverVariation = 'cover-center';
                    break;
                case [ 'bottom' ].toString():
                    coverVariation = 'cover-bottom';
                    break;
                case [ 'top', 'center' ].toString():
                    coverVariation = 'cover-top-center';
                    break;
                case [ 'top', 'bottom' ].toString():
                    coverVariation = 'cover-top-bottom';
                    break;
                case [ 'center', 'bottom' ].toString():
                    coverVariation = 'cover-center-bottom';
                    break;
                case [ 'top', 'center', 'bottom' ].toString():
                    coverVariation = 'cover-top-center-bottom';
                    break;
            }

            newProps.attributes = {
                ...newProps.attributes,
                __unstableUnitoneSupports: {
                    ...newProps.attributes?.__unstableUnitoneSupports,
                    coverVariation: coverVariation,
                },
            };
        }

        return <BlockListBlock { ...newProps } />;
    };
}, 'setIsActiveVariation' );

addFilter(
    'editor.BlockListBlock',
    'unitone/cover/set-is-active-variation',
    setIsActiveVariation
);
// blocks/cover/variations.js

export default [
    {
        name: 'cover-top',
        title: __( 'Cover (Top)', 'unitone' ),
        isDefault: false,
        isActive: ( blockAttributes ) =>
            'cover-top' ===
            blockAttributes?.__unstableUnitoneSupports?.coverVariation,