Masquer ou afficher le bloc personnalisé Gutenberg à l'aide d'une plage de dates

Question

J'ai créé un bloc personnalisé avec un attribut dateFrom et dateTo (qui fonctionne), mais j'aimerais masquer le bloc au début entre ces dates.

Vous ne savez pas si c'est même possible?

Je ne veux pas seulement ajouter une classe et me cacher avec css, car je ne veux pas que le bloc soit visible, même dans le code. Tout conseil ou me diriger dans la bonne direction serait apprécié.

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' };
    },
} );

METTRE À JOUR

J'ai essayé d'ajouter et de supprimer un filtre comme ci-dessous, mais je n'arrive pas à obtenir le nom de nom de bloc en sortie

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 );

Answer 1

Voici une suggestion non testée, pour supprimer un bloc HTML de type:

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

à partir du contenu rendu, en utilisant le filtre render_block (disponible dans les versions 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 );

On pourrait en outre gérer les contraintes de date avec les attributs analysés $block['attr']['dateFrom'] et $block['attr']['dateTo'] selon les besoins.

J'espère que ça aide!