Parth Vaswani parthnvaswani

Gutenberg Pain Points

1. No support for CSS Grid

This is a complex thing to implement, but it can be useful for creating complex layouts.

2. No support for Viewport based styles

Add controls in right sidebar to add styles based on viewport width or predefined breakpoints in theme.json

3. No support adding other elements in list block

A probable variation of the list block that allows adding inner blocks.

4. No support for negative margins

This can be useful for creating overlapping elements.

Frontend Performance Checklist

This list was created after observing that many major websites often overlook crucial performance details, relying primarily on Core Web Vitals (CWV) reports for performance assessments. While CWV reports are essential, they do not capture every aspect of frontend performance optimization. This checklist aims to fill those gaps by providing developers with a comprehensive set of best practices to ensure optimal frontend performance.

Who is this checklist for?

Web Developers: To guide them in implementing best practices for frontend performance during development.
Project Managers and QA Teams: To use as a reference for setting performance benchmarks and conducting code reviews.

When can this checklist be applied?

During Development: Integrate these practices while writing and structuring code to ensure a performance-first approach.
During PR Reviews: Use this checklist as a standard during pull request (PR) reviews to ensure new code adheres to

1. Perceivable

Text Alternatives

Images: Add alt text to all images that convey information.
Decorative Images: Use empty alt attributes (alt="") for purely decorative images.
Complex Images: Use longdesc or detailed descriptions for complex images like charts or infographics.
Icons: Provide text labels for icon-based buttons.
Linked images: Add alt text that details their URL destination, not a description of the image.

Time-Based Media

Interactivity API

Interactivity API is a new API that allows developers to create interactive blocks in WordPress. It is built on top of the Block Editor and provides a way to create blocks that can interact with each other. Before the Interactivity API, developers had to rely on custom JavaScript code to create interactive blocks.

Some configurations are required to use the Interactivity API and its scripts. As @wordpress/intereactivity provides its scripts as js module and we can only import use a module script in another module script.

Custom Interactive Block

To create a custom interactive block using the Interactivity API, you need to follow these steps:

Install PHPCS using composer:

composer g require --dev automattic/vipwpcs dealerdirect/phpcodesniffer-composer-installer -W

Note: If you do not have composer install it using brew:

brew install composer

Edit your .zshrc file and add the following line at the end:

export PATH="$HOME/.composer/vendor/bin:$PATH"

	const fs = require('fs');
	const path = require('path');


	// File to get the error files from
	const file = path.join(__dirname, 'media-import-caris-1718959862750.txt');

	// Read the file
	fs.readFile(file, 'utf8', (err, data) => {
	if (err) {

	# Image Folder
	IMAGE_FOLDER="./uploads"

	# JSON File
	JSON_FILE="./images.json"

	# JSON string
	JSON_STRING=""

	# Loop through all image files recursively in the folder and update the extension

	# Example usage: sh compress_images.sh -i=images -o=compressed_images -w=1280 -e=jpg -f=webp

	# Set default values
	width="1280"
	src="./images"
	dest="./compressed_images"
	extension="jpg"
	output_format="webp"

	function print_help {