Từ sau bản WordPress 5.0 được tung ra từ ngày 06/12/2018. WordPress đã thay đổi classic editor sang thành block editor.

Nó được đặt tên là Gutenberg ( block editor), và chính thức là một phần của WordPress (trình duyệt mặc định)

Gutenberg mang đến một diện mạo và cách tiếp cận hoàn toàn mới, để tạo nội dung.

Và trong bài viết này, Diều Hâu sẽ hướng dẫn bạn sử dụng Gutenber.

Dù bạn có update lên WordPress 5.0 hay không

Hay vẫn sử dụng classic editor, thì cũng đừng bỏ qua nhé !

Vì sớm muộn gì bạn cũng phải làm quen với nó.

Gutenberg là gì?

Gutenberg là tên dự án mới cho block editor mới của WordPress.

Trình soạn thảo này sẽ thay thế TinyMCE editor mặc đinh trong WordPress 5.0.

Mặc dù Gutenberg là tên gọi của trình soạn thảo mới này, nhưng giờ nó thường được gọi với các tên là “block editor” “the WordPress block editor” hay “WordPress editor”.

Bởi vì nó đã trở thành một phần của WordPress.

Vì thế bạn sẽ thấy nó được gọi là block edior nhiều hơn là Gutenberg.

Gutenberg không đơn giản chỉ là môt bản cập nhật về giao diện đơn giản.

Nó thay đổi hoàn toàn trải nghiệm, bằng cách chuyển sang sử dụng block cho nội dung.

Mặc dù trọng tâm vẫn là tạo nội dung.

Nhưng mục tiêu cuối cùng của Gutenberg block editor vẫn là “biến post không chỉ đơn giản là một nơi viết nội dung nữa, mà có thể tùy biến được”

Sau này bạn có thể xây dựng toàn bộ site bằng block bao gồm: landing page, page và post,  các nội dung khác.

Gutenberg là một phần của WordPress?

Chính xác !

Gutenberg được phát hành chính thức trên WordPress 5.0 từ ngày 05/12/2018. Nếu bạn update WordPress phiên bản 5.0, bạn sẽ thấy block editor đã trở thành trình soạn thảo mặc định.

Nếu bạn vẫn chưa update lên phiên bản mới, thì hãy update ngay đi nhé !

Kể cả bạn có không thích Gutenberg đi nữa.

Vì cập nhật mới WordPress 5.2 còn liên quan vấn đề hiệu năng và bảo mật.

Gutenberg editor hoạt động như thế nào?

Như trên mình có trình bày, Gutenberg là block editor hoạt động dựa trên các khối.

Dưới đây mình sẽ trình bày rõ ràng hơn.

Dựa trên các khối là ?

Về cơ bản, Gutenberg sẽ thay thể trình soạn thảo cũ TinyMCE editor bằng rất nhiều các khối riêng lẻ.

Các khối này này sẽ cho phép bạn, xây dựng các thiết kế phức tạp hơn classic editor.

Block là gì?

Đây là phần thú vị nhất của Gutenberg.

Block nó có thể là mọi thứ. Một vài ví dụ block có thể là:

• Text
• Image
• Video embed
• Button
• Widget (giống như bên sidebar các bạn hay thấy)
• Table
• ……

Và điều tuyệt vời hơn cho các developer, là họ có thể tạo được các block (bên thứ 3).

Họ có thể viết thành các plugin và biến việc sử dụng dễ dàng hơn.

Mỗi khối ở đây là một cá thể riêng, bạn có thể làm mọi thứ mình muốn.

Vậy Glutenberg là page builder đúng không?

Không hẳn vậy ! Nhìn qua thì có vẻ giống, nhưng hiện tại nó chưa đạt đến mức đó.

Nó sẽ giúp bạn tạo nội dung thông thường như blog post hay page, dễ dàng hơn.

Nhưng nó chưa = page builder để có thể là công cụ xây dựng website được.

Gutenberg thiếu 2 thứ quan trọng:

• Flexible column – mặc dù đã có column block cơ bản nhưng Gutenberg vẫn chưa đủ linh hoạt như các page builder.
• Drag and Drop – Gutenberg cho phép bạn sắp xếp các block bằng các kéo thả, nhưng nó cũng chưa tự do như page builder.

Okie vậy là Gutenberg không phải page builder, cho đến thời điểm hiện tại.

Nhưng nó cũng cung cấp nhiều khả năng tạo các lọai nội dung hơn cho post.

Nếu bạn muốn tạo một landing page, thì hãy cân nhắc sử dụng các page builder tốt nhất hiện nay.

Vì hiện tại Gutenberg sẽ còn mất nhiều thời gian để đạt đến level đó.

Tôi có bắt buộc phải dùng Gutenberg không? Tôi vẫn thích dùng trình soạn thảo cũ

Không ! bạn không nhất thiết phải sử dụng block editor mới.

Bạn hoàn toàn có thể disable Gutenberg kể cả đã lên phiên bản WP 5.2.

Bằng plugin Classic Editor, hoặc đọc bài ở dưới nhé.

Hướng dẫn disable Gutenberg và giữ trình soạn thảo Classic trong WordPress

Tôi có thể sử dụng mọi theme với Gutenberg chứ?

Hiên nó đã trở thành một phần của WP, nên bạn hoàn toàn yên tâm sử dụng vơi mọi theme WordPress.

Nhưng để chọn theme nào tương thích hoàn hảo với Gutenberg.

Sẽ là một câu truyện khác:

• Theme đó sẽ phải tích hơp sẵn các block mới
• Nó sẽ phải giống kiểu live editor được thì càng tốt.

Sau này mình sẽ đi sâu hơn vì chủ đề này sau.

Hướng dẫn sử dụng Gutenberg – Block Editor

Nếu bạn đã sẵn sàng sử dụng Gutenberg mới. Thì đây sẽ là phần dành cho bạn.

Tôi sẽ hướng dẫn bạn các sử dung block editor mới này như nào.

Giúp bạn tận dụng những tính năng mới trên WordPress 5.0

Khám phá nhanh giao diện của block editor

Trước khi bắt đầu thêm các block, hãy cùng Diều Hâu ngó qua xem giao diện mới này có gì nhé !

• A, C: Cho phép bạn add block mới
• B: Nút undo/redo
• D: Xem trước bài viết, bên cạnh là nút đăng bài
• E: Sẽ xuất hiện các setting cho bài viết như: category, tag, permalink, featured image…
• F: Sau khi bạn chọn bất kỳ block nào, nút này cho bạn nhiều tùy chỉnh sâu hơn trên block đó.
• G: Ở đây bạn sẽ chỉnh được các chế độ view trên trình soạn thảo này.

Thêm Block mới

Giờ tôi sẽ hướng dẫn bạn add new block để soạn thảo trên block editor.

Click và biểu tưởng [mks_icon icon=”fa-plus-circle” color=”#000000″ type=”fa”], và chọn loại nội dung bạn muốn

Tôi sẽ giới thiệu đến bạn một vài block cơ bản, được sử dụng nhiều nhất.

Như ở trên bạn có thấy chữ Most Used:

Gồm các dạng như:

• paragraph
• image
• heading
• gallery
• list
• quoute

Gutenberg có rất nhiều các block, và được chia thành từng phần:

• Inline elements: ở đây chỉ có inline image
• Common blocks: giống như most use vậy, đây là nhưng block thường dùng
• Formatting: các loại block cho các định dạng khác (HTML, quote, table, code)
• Layout elements: cho phép bạn chia layout thành 2 cột 3 cột, phân chia bài viết.
• Widgets: các loại shortcode, latest post hay category, thậm chí hiển thị các widget ngay trong gutenberg
• Embeds: nhúng các lọa nội dung từ bên ngoài như: Facebook, Youtube…

Tạo giao diện cơ bản với Gutenberg

Nếu bạn chỉ muốn tạo một nội dung đơn giản, kiểu blog post sẽ cần:

• Paragraph
• Image
• List
• quote
• Embed Youtube video

Đây sẽ là cách để thực hiện:

Bạn có viết trực tiếp nó ở trong trình soạn thảo mới.

Hoặc nếu thích bạn có thể viết trên Google Doc và paste vào đây.

Nó sẽ tự động convert sang thành các block.

Chèn các định dạng cơ bản trong Gutenberg

Một trong những định đạng khá phổ biến sau text, đó là image

Để chèn image vào post với block editor.

Bạn chỉ cần add block mới chọn Image, ở bất kỳ đâu ngay cả giữa 2 text block.

Và block hình ảnh mới sẽ được chèn vào giữa.

Nhấn nút Upload để tải ảnh lên hoặc kéo thả ảnh vào ô này là được.

Bên phải sẽ là cài tùy chọn cho hình ảnh (alt text, image size..)

Bạn có thể làm tương tự như thế với quote.

Chèn video từ Youtube, chọn block thuộc phần Embed » Youtube

Điền link video youtube vào và video sẽ hiện ở đây.

Chia các cột bằng gutenberg

Trong block editor cho phép bạn chịa layout thành các cột.

Add new block » Layout Elements » Columns

Nó sẽ chia thành 2 cột riêng biệt, trong 2 cột này bạn có thể tiếp tục chèn bất cứ block nào.

Nếu bạn muốn chia thành 3, 4 cột thì có có thể chọn block columns 1 lần nữa.

Sau khi hoàn thành xong bài, bạn co thể bấm publish để đăng nhé.

Cách tùy chỉnh các block

Có rất nhiều các block, nên trong hướng dẫn này mình sẽ tập trung vài một cái cơ bản.

Hướng dẫn các bạn cách tùy chỉnh chúng.

Bạn có thể dễ dàng tùy chỉnh content trong block. Chỉ cần click trực tiếp vào và gõ.

Bạn có thể định dạng được content này bằng các nút ở trên như: Căn lề trái, phải, giữa, in nghiêng, in đậm.

Ngoài ra bạn cũng có thể thay đổi màu, style, backgroud color bằng menu bên phải.

Trong style sẽ cho phép bạn chọn các kiểu button, như vuông hay bo tròn cạnh.

Cách di chuyển các block

Có 2 cách để di chuyển các block đó là bấm mũi tên [mks_icon icon=”fa-chevron-up” color=”#000000″ type=”fa”]  [mks_icon icon=”fa-chevron-down” color=”#000000″ type=”fa”]

Hoặc giữ và kéo thả block lên xuống. Bạn phải click chuột và giữ vào 6 dấu chấm nhé !

Okie vậy là giờ bạn đã nắm được cách sử dụng cơ bản với block editor mới.

Sẽ mất một khoảng thời gian để ban làm quen.

Nhưng sau khi bạn thành thạo trình soạn thảo mới. Bạn sẽ thấy Gutenberg linh hoạt hơn classic edtior rất nhiều.

Một số thủ thuật sử dụng Gutenberg

Dưới đây là một số thủ thuật nâng cao khi bạn đã quen với Gutenberg.

Nó sẽ giúp bạn thao tác nhanh hơn, tiết kiệm thời gian hơn.

Tạo nhanh block với bàn phím

Ngoài cách bấm nút [mks_icon icon=”fa-plus-circle” color=”#000000″ type=”fa”] để tạo block.

Còn một cách khác nhanh hơn để tạo block đó là phím tắt.

Bạn chỉ cần sử dụng cú pháp: /tên-block

Một hộp gợi ý sẽ hiện lên liên quan đến từ khóa bạn tìm

Tính năng rất tiện và tiết kiệm thời gian đó.

Chỉnh sửa source code trực tiếp

Bạn có thể chỉnh sửa source code trực tiếp bằng bấm vào menu 3 dấu chấm ở góc phải

Và chọn Code Editor.

Kích hoạt full màn hình, cố định thanh toolbar

Trình soạn thảo mới block editor, cho phép bạn tùy chỉnh một vài chế độ View:

• Top Toolbar: thanh công cụ sẽ xuất hiện ở trên đầu khung soạn thảo văn bản
• Spotlight Mode: chỉ tập trung vào một block bạn đang edit (các block khác sẽ mờ)
• Fullscreen Mode: chế độ full màn hình

Sử dụng các keyboard shorcut để tiết kiệm thời gian

Trên Gutenberg có những phím tắt riêng cho trình soạn thảo này.

Mình cũng đã giới thiệu chi tiết ở bài:

Bấm tổ hợp phím: Shift + Alt + H bảng phím tắt sẽ hiện lên nhé.

Tạo các block có thể tái sử dụng lại

Nếu bạn có các block phải sử dụng nhiều lần, bạn có thể save chúng lại.

Và tái sử dụng trong lần tiếp theo, đặt tên cho chúng.

Lần sau bạn có thể chèn vào post như các block khác.

Các bước:

• Chọn block bạn muốn lưu lại
• Click dấu 3 chấm
• Chọn Add to Reusable Blocks

Sử dụng các plugin hỗ trợ block editor

Hiện đã có một số bên thứ 3 phát triển các block dành cho Gutenberg.

Nó sẽ có nhiều block và tính năng để bạn tùy biến.

Mình sẽ giới thiệu các bạn trong bài sắp tới nhé.

Vậy còn những nội dung cũ thì sao?

Câu hỏi đặt ra là “Sau khi tôi chuyển sang dùng block editor thì các nội dung cũ có ảnh hưởng không?”

Không cần lo lắng – Mọi nội dung của bạn vẫn được giữ nguyên.

Khi bạn cập nhật lên WordPress 5.0 trở lên, nó sẽ tự động chuyển tất cả nội dung cũ của bạn vào một classic block duy nhất.

Về cơ bản đây là TinyMCE (trình soạn thảo cũ) được nhúng vào block

Để thực hiện edit các nội dung cũ này có mấy cách sau:

• Để nguyên nó trong classic block và edit như trình soạn thảo cũ.
• Chọn dấu 3 chấm và chọn convert to blocks. Nó sẽ chia nội dung của bạn thành các block riêng lẻ, rồ từ đó bạn làm edit với các block đó.

Gutenberg trong tương lai sẽ có gì mới?

Mặc dù Gutenberg hiện đã trở thành một phần của WordPress. Nhưng dự án này vẫn đang trong thời gian tiếp tục phát triển.

Hiện tại đội ngũ phát triển đang tiến hành thay thế widget bằng block editor.

Cũng như cho phép bạn tạo các navigation menu bằng block.

Trong phiên bản hiện tại chưa có những tính năng này.

Nhưng nó vẫn đang được các developer cài tiến và cập nhật sắp tới.

Cho nên lời khuyên của mình là, các bạn nên sớm tiếp cận và làm quen với Gutenberg nhé !

Sắp tới chắc chắn sẽ còn rất nhiều thứ hay ho 😀