Introduction to Gutenberg editor development in WordPress

To get started with Gutenberg editor development, log in to WordPress and follow the steps below to access the editor.

step 1: Open your WordPress dashboard.

Step 2: In the menu on the left panel[投稿]Click Options.

Gutenberg’s interface exposes multiple blocking options, tools, and web page editing mechanisms. To view block elements, click the plus (+) icon button in the upper left corner.

Click on the Toggle Block Inserter (plus icon button) and Gutenberg offers different blocks for different purposes, such as:

You can insert paragraphs, headings, lists, quotes, code, tables and even verses into your web pages by inserting blocks associated with the text.

Media blocks help you upload images, files, videos, audios and even covers to your WordPress site.

Use design blocks for buttons, rows, stacks, columns, groups, page breaks, spacing, tables of contents, and more.

With the help of widget blocks, you can display calendar, category list, custom HTML, latest posts, RSS, page list, search, social sharing icons, archive, search and more.

These blocks are Post Title, Author, Avatar, Post List, Site Tagline, Query Loop, Navigation, Categories, Post Excerpt, Comments, Read More, Term Description, Search Result Title, Time to Read Useful for configuring components such as

Embed blocks allow you to connect to YouTube, Twitter, SoundCloud, WordPress, Spotify, Flickr, Vimeo, Reddit, Screencast, Speaker Deck, Tik Tok, and similar platforms.

Additionally, as highlighted below,[ツール]You can switch modes by clicking the icon. Gutenberg offers two main ways to block: Edit and Select.

You can move blocks from one position to another using the select option. You can also use the edit option to customize that particular block. Additionally, to switch modes using the keyboard, use escape to select a particular block and enter to go to the edit option.

Additionally, if you run into problems,[ツール]You can undo and redo using the arrow icons next to the options.

Let’s see an example of adding and customizing various blocks using the WordPress Gutenberg Editor.

Example 1: Add List

step 1: Click the Toggle Block Inserter (the button with the plus icon).

Step 2: Below the Text block component, drag and drop a List block onto the screen.

Step 4: Add content to the list and place it wherever you want on your web page.

Lists are treated as separate blocks and can be placed anywhere on a web page. It can also be deleted and changed at any time.

Example 2: Uploading an image to a web page

Use the Media block to upload images to your WordPress webpage. You can follow the steps below to perform similar actions on your site.

step 1: [画像]or double-click[メディア ブロック]Drag and drop image blocks from the category options into the editing area.

Once the block is dropped, you will be offered three options for uploading your image:

• Upload from your local machine.
• Uploading from media library.
• Use the image URL.

Which image upload method you use is entirely up to you. Here we use the upload button option.

Step 2: Click the upload button to open a dialog box and select an image from your local machine.