it-swarm.com.ru

Скрыть или показать пользовательский блок Гутенберга, используя диапазон дат

Я создал пользовательский блок с атрибутом dateFrom и dateTo (который работает), но хотел бы скрыть блок в интерфейсе между этими датами.

Не уверен, что это вообще возможно?

Я не просто хочу добавить класс и спрятаться с помощью css, поскольку я не хочу, чтобы блок был видимым даже в коде. Любой совет или указание мне в правильном направлении будет принята с благодарностью.

import classnames from 'classnames'
import ResizableBox from 're-resizable'

const { isFinite, find, omit } = window.lodash;
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { 
    PanelBody, 
    DateTimePicker,
} = wp.components;
const { __experimentalGetSettings  } = wp.date;
const { Fragment } = wp.element;
const { compose,withState } = wp.compose;
const {
    InspectorControls,
    InnerBlocks,
} = wp.editor;

registerBlockType( 'block/timed-block', {
    title: __( 'Timed block' ), // Block title.
    icon: 'align-center', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'section' ),
        __( 'container' ),
    ],
    attributes: {
        dateFrom: {
            type: 'strings',
        },
        dateTo: {
            type: 'string',
        },
    },
    edit: function( {  attributes, setAttributes,className }) {

        const settings = __experimentalGetSettings();
        const is12HourTime = /a(?!\\)/i.test(
            settings.formats.time
                .toLowerCase() // Test only the lower case a
                .replace( /\\\\/g, '' ) // Replace "//" with empty strings
                .split( '' ).reverse().join( '' ) // Reverse the string and test for "a" not followed by a slash
        );

        const { 
            dateFrom,
            dateTo
        } = attributes;

        return (
            <Fragment>
                <InspectorControls>
                    <PanelBody
                        title={ __( 'Date from' ) }
                        initialOpen={ false }
                    >
                     <DateTimePicker
                            currentDate={ dateFrom }
                            onChange={ ( date ) => {
                                setAttributes( {
                                    dateFrom: date,
                                } );
                            } }
                            locale={ settings.l10n.locale }
                            is12Hour={ is12HourTime }
                        />
                    </PanelBody>
                    <PanelBody
                        title={ __( 'Date to' ) }
                        initialOpen={ false }
                    >
                    <DateTimePicker
                            currentDate={ dateTo }
                            onChange={ ( date ) => {
                                setAttributes( {
                                    dateTo: date,
                                } );
                            } }
                            locale={ settings.l10n.locale }
                            is12Hour={ is12HourTime }
                        />

                    </PanelBody>

                </InspectorControls>
                <section
                className={ className }
                >   
                    <InnerBlocks />
                </section>
            </Fragment>
        );
    },

    save: function( { attributes, className }) {
        const { 
            dateFrom,
            dateTo
        } = attributes;

            return (
                <section className={className}>
                <InnerBlocks.Content />
                </section>
            );


    },

    /**
     * wrapper props
     * @param {*} attributes 
     */
    getEditWrapperProps( attributes ) {
        return { 'data-align': 'wide' };
    },
} );

Обновление

Я попытался добавить и удалить фильтр, как показано ниже, но я не могу получить BlockName для вывода

remove_filter( 'the_content', 'do_blocks', 7 );

add_filter( 'the_content', function( $content ) {


    $blocks = gutenberg_parse_blocks( $content );
    $output = '';

    foreach ( $blocks as $block ) {


         if ( 'block/timed-block' === $block['blockName'] ) {
             $output .= '';
         } else {
            $output .= gutenberg_render_block( $block );
         }

    }
    return $output;

}, 10, 2 );
2
Jim-miraidev

Вот непроверенное предложение удалить блок HTML типа:

<!-- wp:block/timed-block {"dateFrom":"2018-11-14", "dateTo":"2018-12-18"} -->
    <section>
       ...
    </section>
<!-- /wp:block/timed-block -->

из визуализированного содержимого с использованием фильтра render_block (доступно в версии 5.0+):

add_filter( 'render_block', function( $block_content, $block ) {
    // Remove the block/timed-block from the rendered content.
    if ( 'block/timed-block' === $block['blockName'] ) {
        $block_content = '';
    }
    return $block_content;
}, 10, 2 );

Далее можно обрабатывать ограничения даты с помощью проанализированных атрибутов $block['attr']['dateFrom'] и $block['attr']['dateTo'] по мере необходимости.

Надеюсь, поможет!

2
birgire