block-editor

useBlockProps() nests wrapper with class name inside block wrapper in the editor

I was bitten by this as well, and it caused me much frustration. I had exactly the same nested block duplication problem that you described above. I was able to solve this issue by specifying an apiVersion for my custom block. E.g.: registerBlockType(“custom-cafe-theme/custom-column”,{ apiVersion: 2, // or 3 title: “Custom Column”, attributes: { imgID: { … Read more

what is the function of the view.js file?

The filename is not really relevant. You should check block.json to see where the file is actually being used. I would guess that it’s being used for the viewScript property, in which case you can check its purpose by looking for the documentation for that property, rather than anything about “view.js” alone. As noted in … Read more

Gutenberg Static blocks: viewScript doesn’t import css for frontend?

I didn’t declare the viewStyle for frontend and thus the css wasn’t being enqueued. { “viewStyle”: [ “file:./view.css”, “example-view-style” ] } build/view.css had all the needed css for swiper – it just wasn’t being declared with viewStyle https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-style . view.css: /*!*******************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/swiper/swiper-bundle.css ***! \*******************************************************************************************************************************************************************************************/ /** * Swiper 11.0.7 * Most modern mobile touch … Read more

Override base Gutenberg block default spacing in child theme’s theme.json

Use a Global Styles Filter to override the style: add_filter( ‘wp_theme_json_data_default’, function ( $theme_json ){ $new_data = array( ‘version’ => 2, ‘styles’ => [ ‘blocks’ => [ ‘core/embed’ => [ ‘spacing’ => [ ‘margin’ => [ ‘top’ => ‘2rem’ ] ] ] ] ] ); return $theme_json->update_with( $new_data ); }); An alternative that may also … Read more

Get the email of the author of the currently being edited post in Gutenberg frontend

Here’s how can you get the ID and email address of the author of the currently being edited post: // Get the post author’s ID. let postAuthorId = wp.data.select( ‘core/editor’ ).getCurrentPostAttribute( ‘author’ ); /* or you can also use this: let postAuthorId = wp.data.select( ‘core/editor’ ).getEditedPostAttribute( ‘author’ ); */ // Get the post author’s email. … Read more

How to build BOTH non-block components and blocks present in the /src directory using @wordpress/scripts

I’m pasting the answer I got from a developer in the Gutenberg repository. Just add a webpack.config.js file at the root of your project with the following contents: const defaultConfig = require( ‘@wordpress/scripts/config/webpack.config’ ); module.exports = { …defaultConfig, entry: { …defaultConfig.entry(), index: ‘./src/index.js’, }, }; This will build all the blocks in /src/blocks/ folder and … Read more

+ More