André Amorim

Crafting Web Experiences

//

js

Go back to /notes?

  • 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’ );

  • Detect repeated element IDs on DOM

  • Converter boards do Trello para NextCloud Deck

  • 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.

  • Support board incompatibility with Litespeed

    There’s an issue with Support Board plugin and Litespeed plugin. The widget won’t show on the frontend! The reason is that litespeed is minifying a core js file of the support board plugin. To fix this, you need to add wp-content/plugins/supportboard/supportboard/js/main.js to Litespeed Cache > Page Optimization > [8] Tunning > JS Excludes.

  • Save page hits of WordPress Custom Post Types

  • 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…

  • JavaScript Wait/Sleep Function

  • Find scrollbar width depending on OS and Browser

  • Background image sized row/div

    If you want to determine a section height by it’s background image to fit it correctly, use the jQuery code below and put “.bg-sized” class into the section: