How to troubleshoot a custom Gutenberg block error: “This block has encountered an error and cannot be previewed”

Add this additional variable to your wp-config file: define ( ‘SCRIPT_DEBUG’, true); Also, inline styling directly in react is declared differently is similar but different in many ways than pure, vanilla CSS. For example, <ul class=”home-slider content-slider lightSlider lSFade” style=”height: 0px; padding-bottom: 71.9931%;”> is written in react as: <ul className={ ‘home-slider content-slider lightSlider lSFade’} style={{ … Read more

How to avoid duplicate dependencies in Gutenberg blocks

WordPress Dependency extraction plugin @wordpress/dependency-extraction-webpack-plugin basically makes your ES6 dependency imports use WordPress scripts instead of adding them to the bundle over and over. This makes modules registered and enqueued in WordPress (including but not limited to jquery, moment and react and wp.* modules) to be properly excluded from builds. You can add additional dependencies … Read more

How to change the Default block in the block-editor away from the paragraph block?

You can use the Gutenberg Block Template it is used to have a content placeholder for your Gutenberg content. https://developer.wordpress.org/block-editor/developers/block-api/block-templates/ <?php function myplugin_register_template() { $post_type_object = get_post_type_object( ‘post’ ); $post_type_object->template = array( array( ‘core/image’ ), ); } add_action( ‘init’, ‘myplugin_register_template’ );

How to use

Actually, the LinkControl index is already there in your code.. it’s in the items.map( ( item, index ) ) — yes, that index. So just use it in your onChange callback. And presuming that your edit function starts like ( { attributes, setAttributes } ) => { …, i.e. the setAttributes is defined, you can … Read more

Get current tag list in Gutenberg save function

Attempt #1 returns objects If I understand it correctly, that’s because getEntityRecord(), upon successful request to the REST API endpoint (e.g. /wp/v2/categories/<id>), returns the term object/data which contains term properties such as name and ID. So, // Instead of: el(‘li’, null, wp.data.select(‘core’).getEntityRecord(‘taxonomy’, ‘custom_taxonomy’, tag)) // you’d use: (note the “.name”) el(‘li’, null, wp.data.select(‘core’).getEntityRecord(‘taxonomy’, ‘custom_taxonomy’, tag).name) … Read more