...
var btnClassName = 'button wpbc-gutenberg-open-btn';
////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// The block attribute is the only authoritative editor value. Reading the
// mounted input here races React's next commit: after the configurator
// calls setAttributes(), the old input still contains the previous value
// and would immediately overwrite the new shortcode during this render.
var _val = props.attributes.wpbc_shortcode;
if ( typeof _val == typeof undefined ) {
_val = '';
}
////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
children.push(
el( 'a',
{
className : btnClassName,
// href : 'javascript:void(0)', //FixIn: 8.7.3.17 href: '#!'
href : '#!',
data_block_id: cid,
popup_tab_index: 0, // Will be index for active tab in popup dialog
popup_shortcode_id: '',
onClick: function( event ) {
return wpbc_gutenberg_handle_configure_click( event, props.setAttributes );
},
key: 'configure_' + cid // FixIn: 8.7.3.18.
},
__( 'Configure Booking Calendar Block' )
)
);
// Visual Preview of Block
children = wpbc_gt_parse_shortcode( props.attributes.wpbc_shortcode, children , cid ); // FixIn: 8.7.3.18.
//console.log( 'WPBC children', children) ;
children.push(
el(
'input',
{
key: 'onchangewpbcinput_' + cid, // FixIn: 8.7.3.18.
value : _val, //props.attributes.wpbc_shortcode,
onChange : function ( event ) {
props.setAttributes( {wpbc_shortcode: event.target.value } );
//console.log( '%cWPBC-Gb :: o n C h a n g e !!!! Y E S !!! event for onChangeWPBCinputShortcode', 'color: orange; font-weight: bold;', event );
},
onClick: function (event) { // FixIn: 8.8.2.10.
props.setAttributes( {wpbc_shortcode: event.target.value } );
},
className: 'wpbc_gb_text_shortcode',
type : 'text',
//readOnly : 'readonly', // FixIn: 8.8.2.10.
//disabled : 'disabled', // FixIn: 8.8.2.10.
// onFocus : function ( event ){
// event.target.select();
// }
}
)
);
// Show Hided Block (after configuration) -- React update Block preview
jQuery( '.wpbc_gb_div_block' ).parent().removeClass( 'hidden' );
var wpbc_gb_div_block_css = 'wpbc_gb_div_block';
if ( '' == props.attributes.wpbc_shortcode ) {
// If no shortcode at all, then do not hide configure button
wpbc_gb_div_block_css += ' wpbc_gb_div_block_no_shortcode';
}
return el( 'div', { className: wpbc_gb_div_block_css }, children );
},
save: function( props ) {
//console.log( 'WPBC-Gb :: Saving ', props );
return el( 'div', null, props.attributes.wpbc_shortcode );
}
} );
} )(
window.wp
);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
( function( $ ) {
$( document ).on( 'click', '.wpbc_gb_block_preview_inner_title_edit', function( e ) {
//jQuery( '.wpbc-gutenberg-open-btn' ).hide();
$( this ).closest( '.wpbc_gb_div_block' ).find( '.wpbc-gutenberg-open-btn' ).trigger( 'click' ); // FixIn: 8.7.11.12.
});
/**
* Open popup window for configuration Booking Calendar shortcode
*/
$( document ).on( 'click', '.wpbc-gutenberg-open-btn', function( e ) {
e.preventDefault();
wpbc_gutenberg_open_configurator(
$( this ).attr( 'data_block_id' ),
$( this ).attr( 'popup_tab_index' ),
$( this ).attr( 'popup_shortcode_id' ),
this
);
});
/**
* Remove Update view button after clicking on it.
*/
$( document ).on( 'click', '.wpbc-gutenberg-update-preview-btn', function( e ) {
e.preventDefault();
jQuery( '.wpbc-gutenberg-update-view').remove();
//console.log( 'WPBC-Gb :: Preview button clicked. Section #' );
});
} ) ( jQuery );
/**
* Send shortcode from popup dialog into the gutenberg sections.
*
* @param shortcode_text
* @returns {boolean}
*/
function wpbc_send_text_to_gutenberg( shortcode_text ){
// Get ID of section, where to insert shortcode configuraiton
var block_section_id = jQuery( "#wpbc_text_gettenberg_section_id" ).val();
var block_editor_select;
var block_editor_dispatch;
var target_block;
var shortcode_input;
var active_set_attributes;
//console.log( 'WPBC-Gb :: wpbc_send_text_to_gutenberg' , shortcode_text, block_section_id );
if ( '' == block_section_id ) {
return false; // if no such block then just return false, its means tha inserting in Classic block - TinyMCE
}
// Use the updater from this exact block edit instance. Unlike the global
// data registry, this callback remains bound to a scoped BlockEditorProvider.
if (
block_section_id === wpbc_gutenberg_active_block_target.block_id &&
'function' === typeof wpbc_gutenberg_active_block_target.set_attributes
) {
active_set_attributes = wpbc_gutenberg_active_block_target.set_attributes;
wpbc_gutenberg_active_block_target = {
block_id: '',
set_attributes: null
};
active_set_attributes(
{ wpbc_shortcode: shortcode_text }
);
return true;
}
// Retain a verified fallback for editors that expose their block store in
// the global registry. Do not report success unless that registry owns the
// exact Booking Calendar block targeted by the configurator.
if (
wp.data &&
( 'function' === typeof wp.data.select ) &&
( 'function' === typeof wp.data.dispatch )
) {
block_editor_select = wp.data.select( 'core/block-editor' );
target_block = block_editor_select && ( 'function' === typeof block_editor_select.getBlock )
? block_editor_select.getBlock( block_section_id )
: null;
if ( target_block && ( 'booking/booking' === target_block.name ) ) {
block_editor_dispatch = wp.data.dispatch( 'core/block-editor' );
}
if ( block_editor_dispatch && ( 'function' === typeof block_editor_dispatch.updateBlockAttributes ) ) {
block_editor_dispatch.updateBlockAttributes(
block_section_id,
{ wpbc_shortcode: shortcode_text }
);
return true;
}
}
// Code to insert into Gutenberg section in our text field
shortcode_input = jQuery( 'div[data-block="' + block_section_id + '"] .wpbc_gb_text_shortcode' );
if ( ! shortcode_input.length ) {
return false;
}
shortcode_input.val( shortcode_text );
//Its does not work for automatic generating "Edit" event :((( , so we make some workarround in Edit block event
shortcode_input.trigger( 'focus' ).trigger('mousedown').trigger( 'click' ).trigger('mouseup').trigger('change');
// FixIn: 8.4.2.10.
//FixIn: 8.7.3.17 href: '#!'
//FixIn: 8.7.3.19 - chnaged
' +
// '' + wp.i18n.__( 'Click to Preview Block' ) + '