Crafting Web Experiences
//
Gutenberg Blocks
Block editor functions
Lists all blocks from block editor wp.data.select( ‘core/block-editor’ ).getBlocks(); wp.data.select( ‘core/block-editor’).getBlockRootClientId( clientId ) Get Parent Block Client Id Set attributes wp.data.dispatch(“core/block-editor”).updateBlockAttributes(“block_client_id”, {attr}); Get root block client id: (e.g when you are extending the query-loop) wp.data.select(“core/block-editor”).getBlockRootClientId( clientId_child_block ); Get featured image $featuredImageId = wp.data.select(“core/editor”).getEditedPostAttribute(“featured_media”); Get current post type wp.data.select(“core/editor”).getCurrentPostType(); Execute on DOM ready wp.domReady(function () {} ); …
Gutenberg Instructions/Documentation
How to create a block? npx @wordpress/create-block@latest <block-name> Generate .pot file for block translation: After translating with Poedit or the Loco Translate plugin (better sync), you need to generate the .json files for the translations to take effect in the block editor: How to create a block? Default Components: Default Blocks Repo: https://github.com/WordPress/gutenberg…ibrary/src How to Extend the…
How to get posts from REST API for a Gutenberg Block
Examples: https://ryanwelcher.com/2021/08/18/req…tyrecords https://permanenttourist.ch/2023/01/us…-rest-api
WordPress Block JS Code Standard (Prettier)
Installation Install the module $ npm install @wordpress/prettier-config –save-dev Note: This package requires Node.js version with long-term support status (check Active LTS or Maintenance LTS releases). It is not compatible with older versions. Usage Add this to your package.json file: “prettier”: “@wordpress/prettier-config” Alternatively, add this to .prettierrc file: “@wordpress/prettier-config” Or add this to .prettierrc.js file: module.exports = require( ‘@wordpress/prettier-config’ );
Customize Loop Query
https://developer.wordpress.org/refere…uery_vars Frontend: Editor: JS: Note: When defining the code on the server side, changes are not reactive in the block editor. To achieve an immediate effect, I recommend using Gutenberg’s built-in methods (see link), inside a useEffect.
Easy Native Gutenberg Block Development with a Single Component File
The Problem Gutenberg block development best practices requires two different functions(edit & save) or files(edit.js & save.js) for both editor and frontend side of a block. That mostly makes us repeating ourselves on HTML part of block to make it similar on both sides. Sample Native Card Block in Traditional Way This is the normal way to…