What you are writing in your js file is not “real” Javascript Code, but an extension named “JSX” which can help you write the elements like XML-Code. Before you can “use” the block js file, you first have to “compile” it into “real” Javascript code. You can use npx and webpack for this. The Tutorial … Read more
The problem is with your selectors: attributes: { content: { type: ‘string’, source: ‘html’, selector: ‘p’, }, content2:{ type: ‘string’, source: ‘html’, selector: ‘p’, }, }, You’re only using p for both attributes. When the block looks at the saved HTML to validate it, it checks to see if the value of the selectors matches … Read more
I think you’re looking for: const featuredImageId = wp.data.select( ‘core/editor’ ) .getEditedPostAttribute( ‘featured_media’ ); to get the ID of the featured image and then for the corresponding media object: const media = featuredImageId ? wp.data.select( ‘core’).getMedia( featuredImageId ) : null; See e.g. here in the post featured image component: https://github.com/WordPress/gutenberg/blob/57c2ab37a872b63de215205458336b7fd6c9739d/packages/editor/src/components/post-featured-image/index.js#L105
When we register a block type we define how the block structure should be in the moment it is added to the editor. After the block type is added to the editor we have an actual block. The initial template prop in the InnerBlock defines which innerBlocks should be added when adding the (root) block … Read more
The only way to do this at the moment is by using the renderAppenderprop onInnerBlocks. This prop is only available in the Gutenberg plugin until WordPress 5.3 is released. The theory would be to use state in each CustomCard to track if there has been a block added, then return false from the renderAppender function … Read more
Depending on your goal, you can add custom CSS for blocks in several ways. Theme Adding it “themewide” by either using a theme’s Custom CSS area or creating a child theme could be used either to affect all copies of a particular type of block, or to target one type of block on just a … Read more
The code from the docs is JavaScript. You have to set up Webpack and build this type of JS. So, you could use something like Create-Guten-Block to set up that build process, and then replace the contents of “block.js” with that JS from the docs. (I sure wish they would improve the docs to make … Read more
You could try with the following instead to detect if rest if ( is_admin() || defined( ‘REST_REQUEST’ ) && REST_REQUEST ) { }
Enabling the Gutenberg (block) editor for a specific post type requires these criteria: The post type must be enabled in the REST API because Gutenberg uses the REST API. And for this, you need to set the show_in_rest parameter to true when registering the post type — see register_post_type(). The post type must support the … Read more
Unfortunately there is now way to alter the markup of an existing block apart from wrapping it in additional markup: It receives the original block BlockEdit component and returns a new wrapped component. Source: https://developer.wordpress.org/block-editor/developers/filters/block-filters/#editor-blockedit To achieve what you want in the editor currently the only way would be to create your own version of … Read more