Siphiwe  Harmse

Siphiwe Harmse

1627656300

How To Use Columns In WordPress Editors?

In today’s video tutorial will explain how to apply columns into your WordPress site using different ways: Gutenberg editor, WP Bakery page builder plugin editor and Elementor page builder plugin editor in a simple and easy method.

#wordpress #gutenberg

How To Use Columns In WordPress Editors?
Siphiwe  Harmse

Siphiwe Harmse

1627612500

Page Builder Plugins Usage in WordPress 5 Gutenberg

In today’s video, we will explain how to keep using your favourite WordPress drag and drop page builder plugins in WordPress 5 (Gutenberg) update, in some simple and easy methods so you can find it’s elements in the new WordPress 5 interface.

#wordpress #gutenberg

Page Builder Plugins Usage in WordPress 5 Gutenberg

How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Creating valuable blog posts takes time and effort. Besides finding the best topics to write about in your niche, it’s also important to keep readers engaged and allow them to find the information they’re looking for quickly. Now, a good way to approach this kind of user experience is by sharing a visual summary box at the end of your blog post, right before the final thoughts. With Divi’s new layout blocks, you can now effortlessly create a summary box with Divi’s built-in options.

In this tutorial, we’ll guide you through the process and you’ll be able to download the layout’s JSON file for free as well!

#gutenberg #json #divi

How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

WordPress Gutenberg 9.2

Security Fix

This [security fix] addresses a particularly nasty form of attack called a Regular Expression Denial of Service (ReDoS) attack. A ReDos attack causes a server to overload CPU usage, bringing the server to a halt.

Image Alt Text Fallback

The next notable change is to add an [alt text fallback]for when no alt text is specified. Gutenberg will use the caption as the alt text.

Support for Video Subtitles

Gutenberg 9.2 adds support for adding video subtitles, which is a pretty cool feature. The video media workspace now includes a dropdown that provides an option to add subtitles.

#wordpress #wordpress gutenberg 9.2 #gutenberg

WordPress Gutenberg 9.2

WordPress Gutenberg Improved Site Performance

Three Possible Inconveniences

1, Learning Curve
But that’s part of learning anything new. Nevertheless, because Gutenberg may likely be the future of WP, it may not be a bad thing to create a desktop instance to play around with.

2, Gutenberg is Incomplete Until June 2021
I believe the navigation menu and widget areas are still under construction for Gutenberg. Full Site Editing is not scheduled for release until June 2021.

3, Loads All CSS and JS Files
Apparently Gutenberg loads all the style and JS code on every page, including code for blocks that aren’t being used. So that may cause unnecessary bloat.

#wordpress #gutenberg

WordPress Gutenberg Improved Site Performance

WordPress Gutenberg Is Still An Unmitigated Disaster

It is difficult to believe that WordPress’ Gutenberg editor is almost two years old (released in WordPress 5.0 in December 2018). Since then, Gutenberg has seen a plethora of development and resources thrown at it, promising a revolutionary writing experience driven by blocks.

So, two years on, has Gutenberg become the beloved new writing experience in WordPress, have the wrinkles been ironed out? Nope.

Despite the amount of work developers have put into polishing Gutenberg and trying to make it a decent writing experience, many continue to avoid it at all costs.

#wordpress #disaster #gutenberg

WordPress Gutenberg Is Still An Unmitigated Disaster

How to Custom Color Palette to Gutenberg Block in WordPress

[ Gutenberg ] team doing a great job of making the editor more flexible for user’s and developer’s points of view. We can extend it by creating custom blocks or extend the existing blocks.

Default Theme Color Palettes

Gutenberg comes with some random color palettes as you can see below screenshot. But if we think from a designer’s point of view then we don’t require these random color palettes to the WordPress site.

Every design must have some unique color palette set as per their design. For example, take a look at a custom color palette that we are going to use in the Gutenberg color settings section.

#wordpress #gutenberg #custom color palette #wordpress's gutenberg block #block

How to Custom Color Palette to Gutenberg Block in WordPress
Anthony  Clark

Anthony Clark

1619340960

Gutenberg Tutorials | Better Designs with FREE TOOLS

A new series of Gutenberg Tutorials to help you make the new WordPress block editor and page builder truly useful!

Learn how to use a range of tools and plugins to make the Gutenberg editor for WordPress much more powerful and useful. With these tutorials and tools, you can take Gutenberg to the next level and make it a tool that is actually useful for building your WordPress websites.

In this first video, we’ll be looking at 2 free plugins.

✅ GenerateBlocks: https://generateblocks.com

✅ Block Navigation: https://wordpress.org/plugins/block-n…

Subscribe : https://www.youtube.com/channel/UCiTDv6q1XYwZnAm2EYN8wKw

#wordpress #gutenberg

Gutenberg Tutorials | Better Designs with FREE TOOLS
Enoch Barcenas

Enoch Barcenas

1594891727

Setting up Your First Gutenberg Project

Learn how to set up the development environment for WordPress’ React-based Gutenberg editor, as well has how to create a new project from scratch.

Gutenberg is the React-based WordPress editor. It comes in two versions: the Gutenberg plugin, which has a fast development cycle, churning out new features every two weeks; and the integration to WordPress core (called simply the WordPress editor), which consolidates the new features every three to four months.

Gutenberg is based on blocks, which are high-level components intended to provide a single piece of functionality accessible via the editor, currently to create content — but, in the not-so-distant future, to build the site, too. Blocks make it easy to save the content into the database and, being based in React, enable rich user interactions.

Since functionality is provided via plugins, WordPress has seen the emergence of plugins bundling several blocks together. However, since its latest release (version 8.4, from end of June 2020), Gutenberg integrates a block directory within the editor, which enables us to install a block on the fly while editing the blog post:

Installing A Block From The WP Block DIrectory

Block directory.

The block directory works with single-block plugins only. Hence, producing our plugins providing only one block improves the chances of its being installed by the user:

  • Multi-block plugins: Installable through the plugin directory
  • Single-block plugins: Installable through the plugin directory and the block directory

In this article, we will learn how to create a new project for single-block plugins and for multiple-block plugins, and how to set up the development environment effortlessly.

Scaffolding a single-block plugin

There are several tools to automate the process of setting up the project. These come with a predefined configuration that works for the majority of cases, and it can be customized for the exceptional cases, involving webpack (to bundle the JavaScript files for distribution), Babel (to compile modern JavaScript code into legacy code that can run in older browsers), ESLint (to analyze the JavaScript code), and a few others dependencies.

The available tools are:

  • The WP CLI [scaffold](https://github.com/wp-cli/scaffold-command#wp-scaffold-block) command
  • The [create-guten-block](https://github.com/ahmadawais/create-guten-block) package
  • The [@wordpress/create-block](https://developer.wordpress.org/block-editor/packages/packages-create-block/) package

@wordpress/create-block is the official solution, maintained by the team developing Gutenberg. As such, we can expect that it will always be up to date with the project’s requirements. For instance, at the same time Gutenberg 8.4 was released, @wordpress/create-block was updated to generate the required metadata to support the block directory.

This tool is largely inspired by create-react-app: it is a Node.js process that leverages npm to install the required dependencies. To scaffold the new block, we execute in the command line:

npm init @wordpress/block [options] [slug]

The slug is the block slug used for identification, and it will also give the name to the plugin. Options are, well, optional, but it is recommended to provide the following ones (otherwise, it uses default generic options):

  • --namespace <value> – internal namespace for the block name
  • --title <value> – display title for the block
  • --short-description <value> – short description for the block
  • --category <name> – under what category the block is displayed

Running the command creates a new directory with the slug as its name (in this case, todo-list):

Running The Create Block Command

Scaffolding a new block through @wordpress/create-block. (Image from developer.wordpress.org)

The directory will contain all the files required by the plugin and the block:

todo-list/
├──build/
│ ├── index.asset.php
│ ├── style.css
│ ├── style-index.css
│ └── index.js
├── src/
│ └── index.js
├── .gitignore
├── .editorconfig
├── block.json
├── package.json
├── package-lock.json
├── todo-list.php
└── readme.txt
  • block.json contains the metadata required by the block directory
  • readme.txt contains the information required by the plugin directory
  • todo-list.php (following the provided slug) is the plugin’s main file
  • package.json defines all the JavaScript dependencies by the block
  • src/index.js is the entry to the block
  • build/index.js is the compiled JavaScript code
  • build/style.css and build/style-index.css are the compiled CSS files, containing the styles extracted from Sass files

With the project created, we can step on the directory in the terminal, and execute the following commands:

  • npm start – starts the build for development
  • npm run build – builds the code for production
  • npm run format:js – formats JavaScript files
  • npm run lint:css – lints CSS files
  • npm run lint:js – lints JavaScript files
  • npm run packages-update – updates WordPress packages to the latest version

#gutenberg #wordpress #react #javascript #web-development

Setting up Your First Gutenberg Project
Agnes  Sauer

Agnes Sauer

1593307860

How to Create Custom WordPress Editor Blocks in 2020

The WordPress block editor (previously titled Gutenberg) includes a new way to add content to your WordPress posts, pages and soon all content on your WordPress site. It marks WordPress’ move into the page builder space.

The base set of default blocks is pretty robust, but what if you wanted to create your own custom block for laying out content? In the past you would use something like Advanced Custom Fields (ACF) or shortcodes. These days, custom blocks are where it’s at.

I’ve been working with React full-time for the past year, rebuilding WP Migrate DB Pro’s frontend. React is on my mind, and given that the WordPress editor is also written in React, I thought it would be a good idea to see what it would take to create a custom block. So let’s get into it!

Getting started

We’re going to go over what it takes to go from nothing to a relatively basic, custom Gutenberg block. The documentation for the block editor is still kind of all over the place but there is some decent information in the “Block Editor Handbook”. Unfortunately I didn’t find it all that easy to parse, so we’ll go over some of the steps I went through to get set up.

One thing I would recommend before diving head first into creating a Gutenberg block, for now at least, is to get a solid understanding of React and modern JavaScript. If you’re not familiar with things like JSX you could use the ES5 syntax, but you’d be best suited to use the modern syntax in the long run.

It’s fairly straightforward these days to get set up with the WP CLI ‘scaffold’ command. This command will set up a WordPress theme or plugin with a ‘blocks’ folder that contains the PHP and base CSS and JavaScript required to create a custom block. The only drawback that I noticed is that the JavaScript uses the old ES5 syntax rather than modern ESNext. Modern JavaScript allows us to write more concise code and use JSX in our custom block code.

#article #link #gutenberg #wordpress blocks #wordpress

How to Create Custom WordPress Editor Blocks in 2020
Vern  Greenholt

Vern Greenholt

1593252370

How to Use Block Variations in WordPress

WordPress 5.4 was released not so long ago and, along with other improvements and bug fixes, it introduced a feature called Block Variations. I had a chance to use it on one of my recent projects and am so pleasantly surprised with how smart this feature is. I actually think it hasn’t received the attention it deserves, which is why I decided to write this article.

What is a Block Variation?

Block Variations allow developers to define instances of existing blocks. An example that you’ll see below is a quote block. Perhaps your site has three variations of how to display a quote on your site. A Block Variation can be created for each one so that they are all styled differently. This sounds awfully familiar with how Block Styles, but the concept of variations goes a bit further than that, as we’ll see.

How are Block Variations different from Block Styles?

Fair question. Block variations appear in the inserter as separate blocks with unique names and (optionally) icons and can have pre-filled custom attributes, and inner blocks.

Block Styles are designed to alter the look of the block. In fact, a Block Style is a fancy way of adding a custom class to a block using the Block options in the post editor.

The difference is clear when you consider how each one is used in the post editor. Let’s say we register a new Block Style called “Fancy Quote.” We do that by extending the core “Quote” block like this example from the Block Editor Handbook:

wp.blocks.registerBlockStyle(
  'core/quote',
  {
    name: 'fancy-quote',
    label: 'Fancy Quote'
  },
);

This adds a .is-style-fancy-quote class to the Quote block settings in the post editor.

Screenshot of the Block options in the WordPress post editor highlighting the options for a quote block. A "Fancy Quote" option is listed under Styles and the custom class name is in an Additional CSS Classes field.We

Now have a Fancy Quote option in the Block options under “Styles” and the class for it filled in for us.

Even though it sort of sounds like it would do the same thing (which it technically can), a Block Variation can be used to pre-fill custom attributes (including custom classes) and inner blocks. They’re actually registered as separate blocks.

Let’s take a closer look at the API and what block variations can do.

#article #gutenberg #wordpress #wordpress blocks

How to Use Block Variations in WordPress