Nếu bạn đã sử dụng WordPress được một vài năm, thì bạn còn nhớ khi những người ở WordPress tung ra trình chỉnh sửa Gutenberg trong WordPress 5.0 vào năm 2018.

Trình chỉnh sửa mặc định mới này là một cuộc đại tu lớn để chỉnh sửa cả bài đăng và trang trên trang web của bạn. Nó đã biến hộp văn bản lớn mà chủ sở hữu trang web đã quen thuộc thành một nền tảng chỉnh sửa dựa trên khối rất khác.

Một số chủ sở hữu trang web ghét nó đến mức họ tránh nâng cấp lên WordPress 5.0 và ở lại với trình chỉnh sửa mặc định cổ điển càng lâu càng tốt. Các chủ sở hữu trang web khác đã chấp nhận sự thay đổi này vì sự đơn giản và dễ sử dụng của nó.

Nếu bạn đang thực hiện chuyển đổi và tò mò những gì sẽ xảy ra, hướng dẫn WordPress Gutenberg này sẽ hướng dẫn bạn qua các tính năng chính mà bạn cần biết và hiểu. Điều này sẽ làm cho quá trình chuyển đổi của bạn trở nên dễ dàng nhất có thể.

Điều gì sẽ xảy ra trong WordPress Gutenberg

Điều chính cần biết về trình soạn thảo Gutenberg là nó dựa trên khối. Điều này có nghĩa là bất kỳ thứ gì bạn cần thêm đều được quản lý thông qua các khối. Các khối trong Gutenberg bao gồm (nhưng không giới hạn):

• Đoạn văn
• Tiêu đề
• Hình ảnh
• Danh sách
• Trích dẫn
• Mã số
• Định dạng sẵn
• Pullquote
• Bàn

Ngoài ra còn có một số khối nâng cao khác hiếm khi được sử dụng. Bạn có thể thấy các khối bổ sung nếu bạn cài đặt các plugin WordPress mới^{(new WordPress plugins)} vào trình chỉnh sửa.

Thêm khối đơn giản bằng cách chọn biểu tượng + ở bên phải bên dưới khối gần đây nhất mà bạn đã thêm.

Việc chọn bất kỳ khối nào từ cửa sổ bật lên sẽ thêm khối đó làm phần tiếp theo trong trang hoặc bài đăng của bạn. 

Trước khi đến với các khối này, hãy bắt đầu lại từ đầu và tạo một bài đăng mới bằng cách sử dụng Gutenberg trong WordPress .

Tạo bài đăng và thêm khối

Thêm một bài đăng vẫn không thay đổi so với phiên bản WordPress cuối cùng . Chỉ cần^(Just) chọn Bài đăng^(Posts) từ thanh điều hướng bên trái và chọn Thêm mới^{(Add New)} bên dưới nó. 

Thao tác này sẽ mở cửa sổ chỉnh sửa bài đăng. Đây cũng là nơi mọi thứ trở nên khác biệt. Bạn sẽ thấy trình chỉnh sửa WordPress Gutenberg^{(Gutenberg WordPress)} mặc định . 

Thêm các mục khối^{(Block Items)} trong Gutenberg Editor

Bạn có thể nhập tiêu đề cho bài đăng của mình trong trường tiêu đề. Sau đó chọn biểu tượng + ở bên phải để thêm khối đầu tiên.

Khối đoạn văn^{(Paragraph Blocks)}

Khối đầu tiên phổ biến nhất mà mọi người thêm vào sau tiêu đề là khối đoạn văn. Để thực hiện việc này, hãy chọn Đoạn^(Paragraph) từ cửa sổ bật lên. 

Thao tác này sẽ chèn một trường khối nơi bạn có thể bắt đầu nhập đoạn đầu tiên của bài đăng của mình. Định dạng cho khối Đoạn văn tuân theo ^(Paragraph)phông chữ mặc định^{(the default font)} cho khối đoạn văn trên trang web của bạn. 

Dưới đây là một số mẹo để thêm khối đoạn văn trong trình chỉnh sửa Gutenberg .

• Đoạn văn của bạn có thể dài bao nhiêu tùy thích. Văn bản sẽ tự động chuyển sang dòng tiếp theo, giống như trong trình chỉnh sửa cổ điển.
• Nếu bạn nhấn Enter , trình soạn thảo Gutenberg sẽ tự động tạo một khối đoạn văn mới, tuy nhiên, nó trông giống như một đoạn văn thứ hai với dấu ngắt đoạn.
• Đánh dấu bất kỳ văn bản nào trong đoạn sẽ hiển thị cửa sổ định dạng nơi bạn có thể thay đổi định dạng cho văn bản đó hoặc sửa đổi khối thành danh sách hoặc một số loại khối khác.
• Chọn ba dấu chấm và chọn Xóa khối^{(Remove block)} để xóa một khối đoạn văn và thay thế khối đó bằng một khối khác.

Khối hình ảnh^{(Image Blocks)}

Nếu bạn chọn khối Hình ảnh^(Image) , bạn sẽ thấy hộp Hình ảnh^(Image) nơi bạn có thể chọn nút Tải lên^(Upload) để tải hình ảnh lên bài đăng từ máy tính của bạn. Chọn liên kết Thư viện phương tiện^{(Media Library)} để sử dụng hình ảnh từ thư viện phương tiện hiện có của bạn hoặc Chèn từ URL^{(Insert from URL)} để liên kết đến hình ảnh từ một trang web khác.

Thao tác này sẽ chèn hình ảnh vào bài viết mà bạn đã thêm khối Hình ảnh^(Image) mới . Bạn sẽ nhận thấy rằng bạn có thể nhập chú thích cho hình ảnh ngay dưới chính hình ảnh đó.

Bạn có thể sử dụng các tùy chọn định dạng tương tự trên văn bản phụ đề giống như trên văn bản đoạn văn thông thường.

Liệt kê các khối^{(List Blocks)}

Khi bạn thêm một khối mới và chọn Danh sách^(List) , nó sẽ chèn khối danh sách vào thời điểm đó trong bài viết.

Nó sẽ hiển thị một dấu đầu dòng, nhưng khi bạn nhập và nhấn Enter , mỗi dấu đầu dòng mới sẽ xuất hiện khi bạn cần.

Định dạng danh sách cũng tuân theo kiểu và kích thước phông chữ như được xác định bởi chủ đề của bạn^{(your theme)} , vì vậy đừng ngạc nhiên nếu phông chữ trong danh sách của bạn trông khác với các khối đoạn văn của bạn.

Bạn có thể đánh dấu văn bản trong khối danh sách và bạn sẽ thấy các tùy chọn định dạng cho văn bản này nếu bạn muốn thay đổi nó. Bạn không thể thay đổi kiểu phông chữ ở đây, nhưng bạn có thể in đậm, in nghiêng, thêm siêu liên kết hoặc thay đổi hoàn toàn kiểu khối.

Các khối khác^{(Other Blocks)}

Nếu bạn muốn xem tất cả các khối có sẵn, hãy chọn + để thêm một khối, sau đó chọn Duyệt qua tất cả^{(Browse all)} để xem toàn bộ danh sách.

Danh sách này thực sự khá dài. Mọi thứ bạn nhớ có sẵn trong trình chỉnh sửa cổ điển thông qua hệ thống menu của nó sẽ được đưa vào đây. Chúng bao gồm các khối thường được sử dụng khác như:

• Những cái bàn
• Tệp và phương tiện
• Video
• Thẻ "Thêm"
• Ngắt trang và dấu phân cách
• Các tiện ích như biểu tượng xã hội, đám mây thẻ, lịch^(calendar) và các tiện ích plugin WordPress
• Nhúng^(Embed) mã cho các trang web xã hội, trang web truyền thông như YouTube và Spotify , v.v.

Các tính năng khác của Gutenberg

Bạn không cần phải gắn bó với các khối bạn đã thêm vào bất cứ nơi nào bạn thêm chúng. Bạn có thể cuộn lại trong bài đăng của mình và chọn biểu tượng + giữa bất kỳ khối hiện có nào. Điều này sẽ cho phép bạn chèn các khối mới vào giữa các khối hiện có.

Bạn cũng không bị mắc kẹt với vị trí của các khối của mình. Trong trình chỉnh sửa WordPress cổ điển , không phải lúc nào cũng dễ dàng di chuyển những thứ như hình ảnh sang các phần khác trong bài đăng của bạn mà đôi khi không làm rối loạn mã nền.

Trong Gutenberg , các yếu tố di chuyển như hình ảnh đơn giản như chọn khối và sau đó chọn mũi tên lên hoặc xuống trong thanh menu bật lên để di chuyển khối lên hoặc xuống trong bài đăng.

Mỗi lần bạn chọn mũi tên, nó sẽ trượt vị trí đó theo bất kỳ hướng nào bạn đã chọn.

Sử dụng Trình chỉnh sửa Glutenberg^{(Glutenberg Editor)} trong WordPress

Khu vực đăng bài không phải là nơi duy nhất để thêm các khối mới. Bạn sẽ nhận thấy có một menu biểu tượng rất đơn giản ở đầu trình chỉnh sửa, nơi bạn cũng có thể sử dụng biểu tượng + để thêm khối.

Các biểu tượng khác trong menu này cho phép bạn truy cập nhanh vào các tính năng khác của Gutenberg .

• Biểu tượng cây bút Chỉnh sửa^(Edit) cho phép bạn chuyển sang chế độ chọn để dễ dàng chọn các khối hơn. Bấm đúp vào^{(Double-click)} một khối để quay lại chế độ Chỉnh sửa^(Edit) .
• Các biểu tượng Hoàn tác^(Undo) hoặc Làm lại^(Redo) (mũi tên cong trái và phải) sẽ hoàn tác hoặc làm lại chỉnh sửa cuối cùng của bạn.
• Biểu tượng i (Chi tiết) hiển thị cho bạn số lượng ký tự, từ, tiêu đề, đoạn văn và khối trong bài đăng của bạn.
• Biểu^(Outline) tượng Dàn bài cho phép bạn nhanh chóng điều hướng đến các khối trong bài đăng của mình dựa trên thứ tự của chúng trong dàn bài đăng của bạn.

Đối với nhiều người, trình soạn thảo Gutenberg trong WordPress phải làm quen. Nhưng sau khi trải nghiệm việc tạo, chỉnh sửa và thao tác các khối phần tử trong bài đăng của bạn dễ dàng như thế nào, bạn sẽ thấy rằng quá trình tạo bài đăng và trang của mình nhanh hơn và hiệu quả hơn.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordPress for quite a few years, then you remember when the folks at WordPress rolled oυt the Gutenberg editor in WordPress 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 Phải có plugin để cài đặt WordPress mới

• Cách chuyển từ trình soạn thảo WordPress cổ điển sang Gutenberg

• Cách ẩn Quick Links trên trang New tab bằng Edge bằng Registry Editor

• Cách di chuyển WordPress site từ máy chủ này sang máy chủ khác

• Cách cài đặt & Cài đặt WordPress trên Microsoft Azure

• Cách sao chép một trang trong WordPress

• Cách cập nhật PHP trong WordPress

• 10 Plugin WordPress cần thiết cho một trang web doanh nghiệp nhỏ

• Cách sử dụng WP Super Cache trên blog WordPress

• Cách thay đổi URL đăng nhập WordPress của bạn để bảo mật tốt hơn

• Hiển thị đoạn trích trên trang chủ của WordPress blog

• WordPress hiển thị HTTP Error khi tải lên hình ảnh

• Cách bảo vệ các trang bằng mật khẩu trên trang web WordPress của bạn

• Cách tìm thông tin đăng nhập quản trị viên WordPress của bạn

• Cách thực hiện kiểm tra phân tách hiệu quả trong WordPress

• Cách tăng tốc trang web WordPress trong 11 bước

• Cách cài đặt trang web thử nghiệm WordPress trên máy tính của bạn

• Định dạng bài viết blog tốt nhất để nhận được điểm của bạn

• Đánh giá sách: Xây dựng trang web của riêng bạn: Hướng dẫn truyện tranh về HTML, CSS và Wordpress

• Cách tạo cửa sổ bật lên phiếu giảm giá của riêng bạn trong WordPress