Introduction to Gutenberg editor development in WordPress

WordPress Dashboard 3


How to get started with the Gutenberg editor

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.

Step 3: [投稿]and,[新規追加]Choose. It will also open the Gutenberg editor in fullscreen mode.

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 3: The Gutenberg editor allows you to create the content of your list.

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.

Step 3: Select an image and[開く]Click the button. and you will see the image.

Similarly, if you want to display a video or provide a file to your end-user, drag and drop that block and customize it as needed.

Example 3: To embed a YouTube video block on your web page

You may need to provide video tutorials or instructions to explain your topic to your end users. The best way to do that is to upload your video to YouTube and embed it on your WordPress site. The videos are uploaded to a third-party platform, which helps reduce the load on the site.The videos also play smoothly and users can easily pause, continue, and adjust speed using YouTube’s features. You can do.

step 1: Click the plus (+) sign in the left corner.

Step 2: From the Block Category menu, scroll to Embed Blocks and select YouTube.

Step 3: Copy the video link from YouTube and paste it into the input field provided by the block. Then click Embed.

Step 4: Views are displayed on the web pages of your blog/WordPress site.


Source link

What do you think?

Leave a Reply

GIPHY App Key not set. Please check settings

    microsoft office 2021

    Get A $40 Microsoft Office 2021 Lifetime License Before This Deal Ends


    Samsung Bans Staff From Using AI Like ChatGPT, Bard After Data Leak