I have created a custom block with a dateFrom and dateTo attribute (which work), but would like to hide the block on the front end between these dates.
Not sure if this is even possible?
I don't just want to add a class and hide with css, as i don't want the block to be visible, even in the code. Any advise or pointing me in right direction would be appreciated.
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,
} = wpponents;
const { __experimentalGetSettings } = wp.date;
const { Fragment } = wp.element;
const { compose,withState } = wppose;
const {
InspectorControls,
InnerBlocks,
} = wp.editor;
registerBlockType( 'block/timed-block', {
title: __( 'Timed block' ), // Block title.
icon: 'align-center', // Block icon from 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' };
},
} );
UPDATE
I have tried to add and remove filter as below, but i can't seem to get the BlockName to output
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 );
I have created a custom block with a dateFrom and dateTo attribute (which work), but would like to hide the block on the front end between these dates.
Not sure if this is even possible?
I don't just want to add a class and hide with css, as i don't want the block to be visible, even in the code. Any advise or pointing me in right direction would be appreciated.
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,
} = wpponents;
const { __experimentalGetSettings } = wp.date;
const { Fragment } = wp.element;
const { compose,withState } = wppose;
const {
InspectorControls,
InnerBlocks,
} = wp.editor;
registerBlockType( 'block/timed-block', {
title: __( 'Timed block' ), // Block title.
icon: 'align-center', // Block icon from Dashicons → https://developer.wordpress/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' };
},
} );
UPDATE
I have tried to add and remove filter as below, but i can't seem to get the BlockName to output
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 );
Here's an untested suggestion, to remove an HTML block of type:
<!-- wp:block/timed-block {"dateFrom":"2018-11-14", "dateTo":"2018-12-18"} -->
<section>
...
</section>
<!-- /wp:block/timed-block -->
from the rendered content, using the render_block filter (available in 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 );
One could further handle date constrains with the parsed attributes $block['attr']['dateFrom'] and $block['attr']['dateTo'] as needed.
Hope it helps!
do_blockfilter, that might have been renamedrender_block. Match the corresponding block, peek into the date attributes and remove the block from the rendered content if it matches the correct condition? – birgire Commented Nov 14, 2018 at 21:17