Đi sâu vào Gutenberg WordPress Editor mới nhất (2022)

Khi trình chỉnh sửa khối WordPress, hay Gutenberg, ra mắt vào tháng 12 năm 2018, chúng tôi không biết điều gì sẽ xảy ra. Chắc chắn, chúng tôi đã có nhiều thời gian để chơi với phiên bản beta của nó, nhưng chúng tôi không thể dự đoán việc khởi chạy thực tế sẽ diễn ra suôn sẻ như thế nào hoặc người dùng và nhà phát triển háo hức đón nhận trình chỉnh sửa mới như thế nào.

Chúng tôi đã thấy trình biên tập Gutenberg trải qua sự phát triển vượt bậc trong hơn hai năm kể từ lần đầu tiên chúng tôi xuất bản bài đăng này. Nó được chuyển từ việc ra mắt sản phẩm khả thi (MVP) tối thiểu sang một dự án hoàn thiện hơn nhằm tiến gần hơn đến mục tiêu tạo ra trải nghiệm Chỉnh sửa trang web đầy đủ thống nhất cho WordPress.

Để giải thích cho những thay đổi này, chúng tôi đã truy cập lại trình chỉnh sửa Gutenberg để đưa bạn qua diện mạo mới của nó, bao gồm cả nơi nó sẽ sớm ra mắt tiếp theo.

Trình chỉnh sửa khối Gutenberg là gì?

Gutenberg, còn được gọi là “trình chỉnh sửa khối WordPress” hoặc chỉ là “trình chỉnh sửa WordPress”, là trình chỉnh sửa nội dung WordPress được giới thiệu trong WordPress 5.0, được phát hành vào ngày 6 tháng 12 năm 2018.

Nếu bạn chưa nghe đến thuật ngữ đó, thì đó là trình chỉnh sửa mặc định mà tất cả các trang web WordPress sử dụng trừ khi bạn đã vô hiệu hóa nó một cách cụ thể. Nó trông giống như thế này:

Sự khác biệt lớn giữa trình chỉnh sửa Gutenberg WordPress và trình chỉnh sửa WordPress trước đây (hiện được gọi là “trình chỉnh sửa cổ điển” hoặc “trình chỉnh sửa TinyMCE”) là một cách tiếp cận dựa trên khối mới để tạo nội dung.

Với Gutenberg, mọi thành phần trong nội dung của bạn là một khối, cho phép dễ dàng thao tác nội dung. Mỗi đoạn văn là một khối, mỗi hình ảnh là một khối, mỗi nút là một khối – bạn hiểu rồi!

Các nhà phát triển bên thứ ba cũng có thể tạo các khối tùy chỉnh, giúp kết thúc mối quan hệ của WordPress với các mã ngắn. Giả sử bạn muốn nhúng một biểu mẫu liên hệ. Thay vì cần phải thêm mã ngắn (ví dụ: [[your-form-shortcode] `) như bạn đã làm trước đây, giờ đây bạn có thể chỉ cần đưa vào khối plugin biểu mẫu của mình.

Ngoài ra, bạn cũng có thể sử dụng các khối để tạo bố cục phức tạp hơn, như thiết lập thiết kế nhiều cột hoặc nhóm các khối để tạo một phần gắn kết.

Khi chúng tôi tìm hiểu sâu hơn về việc chỉ cho bạn cách sử dụng trình chỉnh sửa khối, bạn sẽ hiểu rõ hơn về cách bạn có thể sử dụng khối để cải thiện cách bạn tạo nội dung.

Gutenberg không chỉ là một biên tập viên nội dung

Một điều quan trọng cần hiểu là dự án Gutenberg hướng tới mục tiêu không chỉ là một trình biên tập nội dung.

Vào tháng 7 năm 2021, Gutenberg vẫn chỉ là một biên tập viên nội dung (phần lớn). Nhưng mục tiêu dài hạn của Gutenberg là chuyển nó sang một thứ gọi là Chỉnh sửa toàn bộ trang web .

Ý tưởng với Chỉnh sửa toàn bộ trang web là bạn sẽ có thể thiết kế 100% trang web của mình bằng trình chỉnh sửa Gutenberg. Ví dụ: thay vì bị giới hạn ở các tùy chọn tiêu đề đi kèm với chủ đề WordPress của bạn, bạn sẽ có thể sử dụng Gutenberg để thiết kế tiêu đề tùy chỉnh bằng trình chỉnh sửa khối.

Loại chức năng này vẫn chưa có sẵn, nhưng nó đang được triển khai và chúng tôi có một số dự án “bằng chứng về khái niệm” mà chúng tôi sẽ cung cấp cho bạn ở gần cuối bài đăng này.

Ưu và nhược điểm của Gutenberg so với các lựa chọn thay thế phổ biến

Bây giờ chúng tôi đã có thể sử dụng trình chỉnh sửa khối WordPress trong hơn hai năm, chúng tôi có một ý tưởng tốt về một số ưu và nhược điểm của Gutenberg so với các giải pháp khác.

Có hai lựa chọn thay thế chính mà bạn có để tạo nội dung trên WordPress:

• Trình soạn thảo WordPress TinyMCE: Đây là trình soạn thảo cổ điển mà WordPress đã sử dụng trước WordPress 5.0.
• Plugin trình tạo trang : Đây là các plugin của bên thứ ba bổ sung thiết kế trực quan, kéo và thả cho WordPress.

Nói chung, trình soạn thảo TinyMCE cổ điển cung cấp trải nghiệm giống như Bộ xử lý Word rút gọn hơn, trong khi trình tạo trang cung cấp trải nghiệm thiết kế trực quan, kéo và thả linh hoạt hơn nhiều.

Nếu chúng tôi đặt hàng cả ba trình chỉnh sửa dựa trên tính linh hoạt trong thiết kế của họ, thì nó sẽ diễn ra như sau:

Trình soạn thảo TinyMCE cổ điển (kém linh hoạt nhất) <Gutenberg <Trình tạo trang (linh hoạt nhất)

Bây giờ, hãy nói về một số ưu và nhược điểm của trình chỉnh sửa khối Gutenberg so với các lựa chọn thay thế.

Gutenberg vs Classic Editor: Ưu và nhược điểm

Đầu tiên chúng ta hãy so sánh Gutenberg và trình soạn thảo TinyMCE cổ điển.

Ưu điểm :

• Gutenberg cung cấp một nền thiết kế trực quan hơn
• Bạn không cần sử dụng mã ngắn để nhúng nội dung – bạn sẽ có được một hệ thống khối thống nhất

Nhược điểm :

• Một số người cảm thấy viết bằng Gutenberg hơi khó sử dụng vì mỗi đoạn văn là một khối riêng biệt. Đối với các bài viết dài, có thể khó thao tác văn bản. Bạn có thể thích viết trong một trình soạn thảo khác và dán văn bản vào Gutenberg khi bạn hoàn thành.
• Mặc dù hiệu suất của Gutenberg đã được cải thiện đáng kể, nhưng nó vẫn có thể bị tụt hậu trên các bài đăng lớn, điều này ít xảy ra với trình chỉnh sửa cổ điển.

Nếu bạn nghĩ rằng trình soạn thảo TinyMCE cổ điển phù hợp với nhu cầu của bạn hơn, bạn có thể tắt hoàn toàn trình soạn thảo Gutenberg.

Gutenberg vs Page Builders: Ưu và nhược điểm

Bây giờ, chúng ta hãy xem cách Gutenberg chống lại các plugin trình tạo trang của bên thứ ba.

Ưu điểm :

• Gutenberg là một tính năng cốt lõi, có nghĩa là bạn không phải lo lắng về các vấn đề tương thích.
• Bởi vì đó là một tính năng cốt lõi, tất cả các nhà phát triển có thể xây dựng hỗ trợ Gutenberg vào các plugin của họ, cải thiện khả năng tương thích.
• Gutenberg xuất ra mã gọn hơn, nhẹ hơn. Tất cả mọi thứ đều bình đẳng, một thiết kế được tạo bằng Gutenberg thường sẽ tải nhanh hơn so với cùng một thiết kế được thực hiện bằng một trình tạo trang.

Nhược điểm :

• Gutenberg không cung cấp tính năng chỉnh sửa trực quan thích hợp như một trình tạo trang. Nó dễ tiếp cận hơn so với trình chỉnh sửa cổ điển, nhưng vẫn không liền mạch 100% như trình tạo trang.
• Trình tạo trang vẫn cung cấp cho bạn các tùy chọn thiết kế và bố cục linh hoạt hơn.
• Hầu hết các trình tạo trang cung cấp chuyển động kéo và thả linh hoạt và linh hoạt hơn nhiều.

Suy nghĩ về sự so sánh

Đối với đa số người dùng, Gutenberg đạt điểm tốt về tính linh hoạt.

Hầu hết mọi người không cần sự linh hoạt của trình tạo trang cho nội dung của họ, đặc biệt là đối với các bài đăng trên blog. Nhưng đồng thời, thật tuyệt khi nhanh chóng thiết lập một thiết kế nhiều cột hoặc chèn một nút, điều mà trình chỉnh sửa cổ điển không thực hiện dễ dàng.

Vì vậy, với suy nghĩ đó, hãy cùng tìm hiểu cách bạn có thể bắt đầu sử dụng Gutenberg.

Cách sử dụng Gutenberg WordPress Block Editor

Bây giờ bạn đã biết một chút về trình chỉnh sửa khối Gutenberg, hãy cùng tìm hiểu cách bạn có thể sử dụng nó để bắt đầu tạo nội dung.

Chúng tôi sẽ bắt đầu với giao diện giới thiệu và dần dần phát triển các cách nâng cao hơn để sử dụng trình chỉnh sửa và cải thiện quy trình làm việc của bạn.

Giao diện trình chỉnh sửa khối Gutenberg

Khi bạn mở trình chỉnh sửa, nó sẽ ẩn thanh bên của bảng điều khiển WordPress và cung cấp cho bạn trải nghiệm toàn màn hình:

Có ba phần chính đối với trình chỉnh sửa:

• Nội dung : Nội dung của bạn chiếm hầu hết màn hình. Bạn sẽ thấy bản xem trước trực quan về giao diện của nó trên giao diện người dùng của trang web. Nó không chính xác 100%, nhưng bạn nên có một ý tưởng khá tốt về thiết kế cuối cùng.
• Thanh công cụ trên cùng: Thanh công cụ ở trên cùng giúp bạn chèn các khối mới, hoàn tác / làm lại và truy cập các cài đặt quan trọng khác
• Thanh bên: Thanh bên chứa hai tab. Tab Bài đăng cho phép bạn định cấu hình cài đặt cấp độ bài đăng như danh mục, thẻ, hình ảnh nổi bật, v.v. Tab Chặn hiển thị cài đặt cho khối mà bạn đã chọn – sẽ có thêm thông tin về điều này sau.

Để tạo trải nghiệm viết phong phú hơn, bạn có thể ẩn thanh bên bằng cách nhấp vào biểu tượng “bánh răng” ở góc trên bên phải. Để khôi phục thanh bên, tất cả những gì bạn cần làm là nhấp lại vào biểu tượng “bánh răng”:

Ví dụ: đây là giao diện trình chỉnh sửa trông như thế nào nếu bạn đang sử dụng chủ đề mặc định Twenty Twenty-One mới:

Thêm khối

Để thêm đoạn văn bản thông thường vào bài đăng của bạn, bạn có thể chỉ cần nhấp và nhập. Mỗi khi bạn nhấn enter, trình chỉnh sửa sẽ tự động tạo một khối đoạn văn mới.

Đối với các loại nội dung khác, bạn sẽ cần phải chèn một khối mới. Bạn sẽ sử dụng các khối cho hình ảnh, nút, video nhúng, v.v.

Để thêm một khối mới, bạn có thể nhấp vào một trong các biểu tượng “dấu cộng” trong giao diện. Đó là biểu tượng trình chèn khối chính ở góc trên cùng bên trái, nhưng bạn cũng sẽ thấy các biểu tượng khác bên trong giao diện mở ra một giao diện trình chèn khối nhỏ hơn:

Để bắt đầu, hãy đặt con trỏ chuột vào nơi bạn muốn chèn khối mới. Ví dụ: để thêm một khối mới bên dưới nút, bạn có thể nhấp vào bên dưới nút và sau đó nhấp vào biểu tượng + .

Bạn sẽ thấy một bảng điều khiển bên hiển thị tất cả các khối có sẵn, được chia thành các danh mục khác nhau. Bạn có thể tìm kiếm một khối cụ thể hoặc chỉ cần chọn một tùy chọn từ danh sách. Khi di chuột qua một khối, bạn sẽ thấy mô tả về chức năng của khối đó và bản xem trước.

Để chèn khối, bạn chỉ cần nhấp vào nó. Ví dụ: để chèn một hình ảnh thông thường, bạn chỉ cần nhấp vào khối hình ảnh:

Sau đó, bạn có thể làm theo lời nhắc để tải lên hoặc chọn một hình ảnh hiện có từ Thư viện phương tiện của bạn.

Các tùy chọn định dạng cần thiết

Để thực hiện các lựa chọn định dạng cơ bản cho các khối của bạn, bạn sẽ nhận được một thanh công cụ nổi xuất hiện khi bạn nhấp vào bất kỳ khối nào.

Nếu bạn đang định dạng văn bản thông thường, đây là nơi bạn có thể:

• Thêm chữ in đậm hoặc in nghiêng
• Chèn liên kết
• Thay đổi căn chỉnh
• Thêm định dạng, như mã nội dòng, gạch ngang và đăng ký

Ví dụ: giả sử bạn muốn chèn một liên kết vào nội dung của mình. Trước tiên, bạn sẽ chọn văn bản cụ thể mà bạn muốn liên kết – trong ví dụ của chúng tôi, đó là “Đối với các loại nội dung khác”. Sau đó, bạn có thể nhấp vào biểu tượng liên kết trên thanh công cụ để mở các tùy chọn chèn liên kết:

Định cấu hình cài đặt khối nâng cao

Tất cả các khối mà bạn chèn đều đi kèm với các cài đặt bổ sung trong thanh bên. Một số khối có thể cung cấp cho bạn một vài cài đặt, trong khi những khối khác cung cấp cho bạn một số tùy chọn để kiểm soát thiết kế, bố cục, chức năng, v.v.

Để mở cài đặt của khối, hãy nhấp vào khối trong trình chỉnh sửa để chọn khối đó. Sau đó, chuyển đến tab Chặn trong thanh bên để xem cài đặt của nó.

Dưới đây, bạn có thể thấy cài đặt cho khối nút, là một trong những khối linh hoạt hơn. Bạn có thể thay đổi màu sắc, làm cho nó rộng hơn và nhiều hơn nữa.

Khi bạn thực hiện các thay đổi đối với cài đặt của khối, bạn sẽ ngay lập tức thấy những thay đổi đó được phản ánh trong trình chỉnh sửa.

Một lần nữa, mỗi khối sẽ có các cài đặt dành riêng cho khối đó. Ví dụ: nếu bạn mở cài đặt cho đoạn văn bản thông thường, bạn chỉ nhận được một số tùy chọn kiểu chữ và màu sắc cơ bản. Dưới đây, bạn có thể thấy rằng chúng tôi đã có thể áp dụng nền màu để làm nổi bật một số văn bản:

Sắp xếp lại các khối

Ngoài việc chỉ sử dụng sao chép và dán (mà bạn có thể làm đối với văn bản giống như bất kỳ trình soạn thảo nào khác), Gutenberg cung cấp cho bạn hai cách chính để sắp xếp lại các khối.

Đầu tiên, nếu bạn muốn di chuyển một khối lên hoặc xuống một vài vị trí, bạn có thể sử dụng mũi tên lên hoặc xuống trên thanh công cụ nổi.

Để di chuyển nhiều, bạn có thể sử dụng kéo và thả. Để kéo và thả một khối, bạn cần nhấp vào biểu tượng “sáu chấm” ở bên trái của các mũi tên.

Khi bạn nhấp và giữ chuột vào biểu tượng đó, bạn có thể kéo khối vào bất kỳ đâu trên trang:

Nhúng nội dung từ các nguồn khác

Gutenberg đi kèm với các khối chuyên dụng để nhúng nội dung từ các nguồn của bên thứ ba như YouTube, Vimeo, Soundcloud, v.v. Bạn có thể tìm thấy tất cả các tùy chọn này trong phần Nhúng của trình chèn khối.

Ví dụ: để nhúng một video YouTube, tất cả những gì bạn cần làm là:

1. Thêm khối YouTube chuyên dụng.
2. Dán URL trực tiếp đến video.
3. Nhấp vào Nhúng .

Sau đó, bạn sẽ thấy bản xem trước của video được nhúng trong trình chỉnh sửa.

Tạo bố cục nhiều cột hoặc nhóm

Như chúng tôi đã đề cập trước đó, một trong những lợi thế đáng kể của trình chỉnh sửa khối so với trình chỉnh sửa TinyMCE cũ hơn là bạn có thể tạo các bố cục phức tạp hơn mà không cần dựa vào mã tùy chỉnh hoặc mã ngắn.

Trình chỉnh sửa khối đi kèm với hai khối mặc định để giúp bạn thực hiện việc này:

• Cột : Tạo bố cục nhiều cột.
• Nhóm: Nhóm nhiều khối. Ví dụ: bạn có thể sử dụng điều này để đặt màu nền cho toàn bộ phần hiển thị phía sau nhiều khối.

Cả hai khối này đều hoạt động trên nguyên tắc “lồng” các khối, có nghĩa là bạn sẽ đặt một hoặc nhiều khối bên trong một khối khác.

Chúng tôi sẽ chỉ cho bạn một ví dụ bằng cách sử dụng khối cột, nhưng nguyên tắc cơ bản tương tự cũng áp dụng cho khối nhóm.

Giả sử bạn muốn tạo một bố cục hai cột trong đó cột bên trái có một số đoạn văn bản thông thường và cột bên phải có một nút.

Để bắt đầu, bạn sẽ sử dụng trình chèn khối để thêm khối cột. Điều đó sẽ hiển thị lời nhắc nơi bạn có thể chọn bố cục ưa thích của mình:

Chúng tôi sẽ chọn bố cục 50/50 hai cột cho ví dụ này. Cùng với đó, bạn sẽ thấy hai hộp có kích thước bằng nhau với + biểu tượng bên trong. Để chèn nội dung, bạn có thể nhấp vào biểu tượng + đó để mở giao diện trình chèn khối:

Khi bạn đã thêm khối đầu tiên vào một cột, bạn có thể nhấn vào biểu tượng + để chèn các khối bổ sung. Hoặc, bạn có thể kéo và thả một khối từ bên ngoài cấu trúc cột vào trong cột.

10 lời khuyên hữu ích của Gutenberg để làm việc hiệu quả hơn

Bây giờ bạn đã hiểu cơ bản về cách hoạt động của Gutenberg, hãy cùng xem qua một số mẹo và thủ thuật có giá trị sẽ giúp bạn sử dụng trình chỉnh sửa khối hiệu quả hơn.

1. Sử dụng / (Dấu gạch chéo chuyển tiếp) để Chèn khối nhanh

Nếu bạn cần chèn nhiều khối, việc mở trình chèn khối theo cách thủ công có thể hơi tẻ nhạt. Rất may, khi bạn bắt đầu học tên của các khối phổ biến mà bạn cần sử dụng, có một cách nhanh hơn nhiều để chèn các khối chỉ bằng bàn phím của bạn – / (dấu gạch chéo lên).

Nếu bạn nhấn “Enter” để bắt đầu một khối đoạn văn mới, bạn có thể chèn nhanh một khối bằng cách nhập dấu gạch chéo lên, theo sau là tên của khối mà bạn muốn chèn.

Khi bắt đầu nhập, bạn sẽ thấy danh sách tất cả các khối phù hợp với truy vấn của mình. Sau đó, bạn có thể sử dụng các mũi tên trên bàn phím để điều hướng các khối và nhấn “Enter” để chọn khối mà bạn muốn chèn.

Đây là một ví dụ về việc sử dụng tính năng chèn nhanh để thêm một khối hình ảnh:

2. Chèn hình ảnh bằng cách kéo chúng từ màn hình của bạn

Nếu bạn đang chèn nhiều hình ảnh, trình chỉnh sửa khối bao gồm một tính năng tiết kiệm thời gian khác cho phép bạn loại bỏ nhu cầu thêm khối hình ảnh trước khi tải lên hình ảnh.

Thay vào đó, bạn chỉ có thể kéo tệp hình ảnh trực tiếp từ màn hình đến vị trí bạn muốn thêm tệp vào bài đăng của mình. Khi bạn kéo tệp hình ảnh qua nội dung trang web của mình, bạn sẽ thấy một đường màu xanh lam đánh dấu nơi hình ảnh hiển thị.

Sau khi bạn phát hành tệp, WordPress sẽ tự động tải tệp lên và chèn một khối hình ảnh vào vị trí thích hợp:

3. Sử dụng một số định dạng đánh dấu

Nếu bạn là người yêu thích cú pháp Markdown để tạo nội dung, bạn sẽ rất vui khi biết rằng trình chỉnh sửa khối hỗ trợ một số hạn chế sử dụng markdown – chủ yếu là với các tiêu đề.

Ví dụ: nếu bạn muốn chèn một khối tiêu đề với thẻ H3, bạn có thể nhập ba thẻ bắt đầu bằng # (`###`) sau đó nhấn phím cách. Trình chỉnh sửa sẽ tự động chuyển đổi thành H3 và sau đó bạn có thể tiếp tục nhập tiêu đề:

Giả sử bạn muốn hỗ trợ Markdown nâng cao hơn nữa. Trong trường hợp đó, bạn có thể cài đặt một plugin miễn phí như EditorsKit, plugin này cũng cho phép bạn sử dụng Markdown để in đậm, in nghiêng và gạch ngang – chúng ta sẽ nói thêm về các plugin Gutenberg sau trong bài đăng này.

4. Ghim Thanh công cụ Định dạng vào Đầu Trình chỉnh sửa

Nếu bạn không thích cách công cụ định dạng “nổi” bên trên một khối, thì trình chỉnh sửa khối sẽ bao gồm một tính năng cho phép bạn ghim nó bên dưới thanh công cụ trên cùng:

5. Sao chép một khối và tất cả cài đặt của nó

Trình chỉnh sửa khối cho phép bạn sao chép và dán văn bản giống như bạn làm trong bất kỳ trình chỉnh sửa nào – “ Ctrl + C ” hoặc nhấp chuột phải và chọn Sao chép .

Tuy nhiên, bạn không thể sử dụng phương pháp này để sao chép và dán toàn bộ một khối trong khi vẫn giữ nguyên cài đặt của nó. Thay vào đó, bạn sẽ cần:

1. Chọn khối.
2. Nhấp vào biểu tượng ba chấm trên thanh công cụ của khối.
3. Chọn Sao chép .

Khi bạn đã sao chép khối theo cách này, bạn có thể dán nó như bạn thường làm – tức là “ Ctrl + V ” hoặc nhấp chuột phải và chọn Dán .

6. Nhanh chóng chọn đúng khối bằng Chế độ xem danh sách khối

Đối với hầu hết các khối, bạn có thể chỉ cần nhấp vào trình chỉnh sửa để chọn khối. Tuy nhiên, điều này có thể trở nên phức tạp nếu bạn bắt đầu sử dụng các khối “lồng nhau”, chẳng hạn như chèn các khối bên trong các cột hoặc khối nhóm.

Trình chỉnh sửa bao gồm tùy chọn Chế độ xem danh sách, bạn có thể mở tùy chọn này từ thanh công cụ trên cùng để giải quyết vấn đề này. Chế độ xem danh sách sẽ hiển thị cho bạn mọi khối, bao gồm cả các khối lồng nhau được thụt vào.

Bạn có thể chọn một khối bằng cách nhấp vào khối đó trong danh sách và trình chỉnh sửa cũng sẽ đánh dấu khối khi bạn di chuột qua khối đó trong danh sách.

Trong ví dụ dưới đây, bạn có thể thấy:

• Khối cột cha chính
• Các khối lồng nhau cho mỗi cột
• Một khối nhóm lồng nhau bên trong một cột
• Một khối tiêu đề lồng nhau bên trong khối Nhóm

Để chọn khối chính, bạn chỉ có thể mở chế độ xem danh sách và chọn nó từ danh sách:

7. Mở Trình chỉnh sửa mã (dành cho các Khối riêng lẻ hoặc Bài đăng hoàn chỉnh)

Một trong những ưu điểm của trình chỉnh sửa khối Gutenberg là nó cho phép bạn định cấu hình nhiều kiểu và tùy chọn bố cục mà không cần dùng đến mã. Tuy nhiên, bạn vẫn có thể gặp một số trường hợp muốn truy cập mã trực tiếp cho những người dùng nâng cao hơn.

Để giúp bạn làm điều đó, trình chỉnh sửa Gutenberg đi kèm với một số tùy chọn khác nhau.

Đầu tiên, bạn có thể chỉnh sửa mã của chỉ một khối riêng lẻ, hữu ích cho các chỉnh sửa nhỏ như chèn một lớp CSS. Để thực hiện việc này, hãy mở menu thả xuống từ thanh công cụ của khối và chọn Chỉnh sửa dưới dạng HTML :

Việc chọn tùy chọn này sẽ biến bản xem trước trực quan thành trình chỉnh sửa mã chỉ cho khối đó mà không ảnh hưởng đến bản xem trước trực quan của các khối khác:

Thứ hai, trình chỉnh sửa bao gồm một khối HTML tùy chỉnh mà bạn có thể sử dụng để nhúng các đoạn mã HTML đầy đủ. Tất cả những gì bạn làm là thêm khối và dán mã của bạn.

Cuối cùng, bạn cũng có thể mở trình chỉnh sửa mã đầy đủ cho toàn bộ tài liệu bằng cách sử dụng menu thả xuống ở góc trên cùng bên phải hoặc phím tắt: Ctrl + Shift + Alt + M.

Hãy nhớ rằng, khi bạn mở trình chỉnh sửa mã đầy đủ, bạn cũng sẽ thấy đánh dấu định dạng khối từ Gutenberg, vì vậy có thể hơi phức tạp để điều hướng:

8. Tìm hiểu các phím tắt

Trình chỉnh sửa khối bao gồm rất nhiều phím tắt cho phép bạn thực hiện các tác vụ phổ biến. Bạn nên dành thời gian tìm hiểu chúng vì chúng sẽ giúp bạn làm việc hiệu quả hơn và giúp bạn tránh được nhiều cú nhấp chuột lặp đi lặp lại.

Dưới đây là một số phím tắt phổ biến nhất – nếu bạn đang sử dụng máy Mac, bạn sẽ muốn chuyển “Ctrl” bằng “Command (⌘)”:

• Mở Chế độ xem danh sách khối – Shift + Alt + O
• Lưu các thay đổi của bạn – Ctrl + S
• Hoàn tác (các) thay đổi cuối cùng của bạn – Ctrl + Z
• Làm lại lần hoàn tác cuối cùng của bạn – Ctrl + Shift + Z
• Sao chép (các) khối đã chọn – Ctrl + Shift + D
• Xóa (các) khối đã chọn – Shift + Alt + Z
• Chèn một khối mới trước (các) khối đã chọn – Ctrl + Alt + T
• Chèn một khối mới sau (các) khối đã chọn – Ctrl + Alt + Y

Bạn cũng có thể mở toàn bộ bảng gian lận của tất cả các phím tắt khi bạn đang ở trong trình chỉnh sửa. Để thực hiện việc này, bạn có thể sử dụng phím tắt – Shift + Alt + H – hoặc nhấp vào biểu tượng menu “ba chấm dọc” ( ⋮ ) ở góc trên bên phải của trình chỉnh sửa và chọn Phím tắt từ menu thả xuống.

9. Dọn dẹp giao diện của bạn bằng cách ẩn các khối

Trình chỉnh sửa khối thêm nhiều khối theo mặc định, nhưng bạn có thể sẽ không sử dụng tất cả chúng. Để giúp bạn dọn dẹp giao diện, trình chỉnh sửa bao gồm một tính năng được gọi là Trình quản lý khối cho phép bạn tắt và ẩn các khối mà bạn không sử dụng:

10. Thêm Anchors cho Jump Links

Cuối cùng, mẹo hữu ích cuối cùng của chúng tôi là tính năng liên kết liên kết HTML chuyên dụng của trình soạn thảo khối, cho phép bạn tạo liên kết nhảy đến các phần cụ thể trong nội dung của bạn (ví dụ: đối với mục lục).

Trong trình chỉnh sửa cổ điển, bạn phải thêm các neo HTML bằng cách sử dụng mã theo cách thủ công. Nhưng với Gutenberg, bạn chỉ có thể nhập văn bản cho liên kết nhảy của mình trong trường liên kết HTML trong khu vực Nâng cao của cài đặt khối bất kỳ:

Tìm hiểu thêm các khái niệm về trình chỉnh sửa khối nâng cao hơn

Tại thời điểm này, chúng tôi đã trình bày khá chi tiết về cách hoạt động của trình chỉnh sửa và một số mẹo để làm việc hiệu quả hơn. Bây giờ bạn đã có kiến thức cơ bản đó, chúng ta hãy xem xét hai chiến thuật nâng cao hơn một chút:

• Các mẫu khối
• Các khối có thể tái sử dụng

Các mẫu khối

Một mẫu khối về cơ bản là một khuôn mẫu. Đó là một tập hợp các khối được sắp xếp thành một bố cục. Nó có thể là một cái gì đó nhỏ, như một sự sắp xếp của các nút. Nó thậm chí có thể là một mẫu cho toàn bộ phần, hoặc thậm chí toàn bộ trang.

WordPress đi kèm với các mẫu khối tích hợp riêng và các nhà phát triển plugin bên thứ ba cũng có thể thêm mẫu khối của riêng họ.

Bạn có thể chèn các mẫu mới từ tab Mẫu của trình chèn khối chính:

Khi bạn chèn mẫu khối, bạn hoàn toàn có thể chỉnh sửa tất cả các khối tạo nên mẫu đó, giống như khi bạn thêm các khối theo cách thủ công.

Hiện tại, trình soạn thảo Gutenberg cốt lõi không cho phép bạn tạo các mẫu khối của mình (trừ khi bạn biết cách viết mã). Tuy nhiên, bạn có thể khắc phục điều này bằng plugin Block Pattern Builder miễn phí của Justin Tadlock. Với plugin được kích hoạt, bạn có thể tạo thiết kế của mình bằng Gutenberg và sau đó lưu thiết kế đó dưới dạng mẫu.

Để bắt đầu, hãy chuyển đến Mẫu khối > Thêm mới để tạo một mẫu mới bằng trình chỉnh sửa. Đảm bảo xuất bản nó khi bạn hoàn thành:

Khi bạn đã hoàn thành việc đó, bạn sẽ có thể chèn mẫu khối của mình giống như bất kỳ mẫu nào khác – hãy tìm nó trong phần Chưa được phân loại:

Nhóm cốt lõi của WordPress cũng đã khởi chạy một thư viện mẫu khối chính thức tại WordPress.org. Bạn có thể chèn chúng vào trình chỉnh sửa bằng cách sử dụng sao chép và dán. Chỉ cần nhấp vào nút Sao chép trên trang web của thư viện mẫu khối và sau đó dán nó vào trình chỉnh sửa.

Khối có thể tái sử dụng

Các khối có thể tái sử dụng là một tập hợp của một hoặc nhiều khối mà bạn có thể chèn vào dưới dạng một nhóm. Chúng tương tự như các mẫu khối, nhưng có một điểm khác biệt chính:

Trong khi một mẫu khối là mẫu bắt đầu mà bạn sẽ chỉnh sửa trong mỗi trường hợp, một khối có thể sử dụng lại sẽ giống nhau trong mọi trường hợp mà bạn đưa vào.

Nếu bạn cập nhật khối có thể sử dụng lại, những thay đổi đó sẽ tự động áp dụng cho tất cả các phiên bản hiện có.

Ví dụ: bạn có thể sử dụng một khối có thể tái sử dụng để tạo lời kêu gọi hành động (CTA) mà bạn muốn giống nhau trong tất cả nội dung của mình. Sau đó, nếu bạn muốn cập nhật CTA, bạn chỉ cần cập nhật khối có thể sử dụng lại một lần để thay đổi nó trên toàn bộ trang web.

Để tạo một khối có thể sử dụng lại trong trình chỉnh sửa Gutenberg WordPress, hãy nhấp và kéo để chọn một hoặc nhiều khối. Sau đó, nhấp vào tùy chọn Thêm vào khối có thể tái sử dụng . (Plugin mà chúng tôi đã đề cập ở trên cũng cho phép bạn tạo một mẫu khối theo cách này.)

Sau đó, các khối của bạn sẽ được nhóm lại – bạn có thể đặt tên cho khối có thể sử dụng lại của mình trong cài đặt của khối có thể tái sử dụng trong thanh bên.

Bây giờ, bạn sẽ có thể chèn khối có thể tái sử dụng đó bằng cách tìm kiếm tên của nó. Bạn có thể sử dụng `/` để chèn nhanh khối:

Nếu bạn thay đổi khối có thể sử dụng lại, bạn sẽ nhận được tùy chọn để xuất bản những thay đổi đó khi cập nhật bài đăng. Và nếu bạn quyết định xuất bản các thay đổi của khối có thể sử dụng lại, những thay đổi đó sẽ tự động áp dụng cho mọi trường hợp của khối có thể sử dụng lại:

Mở rộng trình chỉnh sửa khối bằng plugin

Cho đến nay, chúng tôi đã tập trung vào các tính năng của trình chỉnh sửa khối cốt lõi, với một vài ngoại lệ.

Tuy nhiên, một trong những điều tuyệt vời về trình chỉnh sửa khối là bạn có thể sử dụng các plugin để mở rộng nó, giống như bạn có thể làm với phần còn lại của trang web WordPress của mình.

Bạn có thể sử dụng các plugin cho một số việc khác nhau:

• Thêm khối nội dung mới: Các plugin có thể thêm các khối mới mà bạn có thể sử dụng trong thiết kế của mình. Đây là trường hợp sử dụng phổ biến nhất cho các plugin Gutenberg vào lúc này.
• Thêm mẫu / mẫu khối mới: Một số plugin sử dụng hệ thống mẫu khối cốt lõi, trong khi những plugin khác đã tạo hệ thống mẫu của riêng họ.
• Thay đổi giao diện / tính năng của trình chỉnh sửa: Bạn có thể sử dụng các plugin để sửa đổi chính trình chỉnh sửa. Ví dụ: bạn có thể thêm hỗ trợ Markdown tốt hơn.

Ngoài các plugin được xây dựng riêng cho Gutenberg, nhiều plugin WordPress khác cũng có thể sử dụng trình chỉnh sửa khối.

Ví dụ: nếu bạn đang sử dụng plugin biểu mẫu liên hệ, plugin có thể cung cấp cho bạn một khối chuyên dụng mà bạn có thể sử dụng để nhúng biểu mẫu của mình. Điều này cũng tương tự đối với nhiều loại plugin khác.

Khi bạn nắm vững kiến thức cơ bản về trình chỉnh sửa, bạn nên khám phá các plugin này để xem liệu bạn có tìm thấy plugin nào có thể cải thiện trải nghiệm của mình không.

Dưới đây là một số tùy chọn phổ biến nhất tại thời điểm chúng tôi đang viết bài đăng này:

• Bổ trợ cuối cùng cho Gutenberg
• Khối Kadence
• GenerateBlock
• Có thể xếp chồng lên nhau
• Getwid

Bạn có thể xem thêm trong phần plugin hỗ trợ khối WordPress.org.

Gutenberg WordPress Editor và Full Site Edit

Như chúng tôi đã đề cập ở phần đầu của bài đăng này, dự án Gutenberg hướng tới mục tiêu không chỉ là một trình biên tập nội dung.

Kế hoạch dài hạn là để WordPress chuyển sang chế độ Chỉnh sửa toàn bộ trang web . Nó có nghĩa chính xác như những gì nó nói – mục tiêu là cuối cùng bạn sẽ có thể chỉnh sửa tất cả các phần của trang web của mình bằng trình chỉnh sửa Gutenberg. Và điều đó bao gồm đầu trang, chân trang, thanh bên, v.v. của trang web của bạn.

Không giống như sự ra mắt của trình chỉnh sửa khối trong WordPress 5.0, Chỉnh sửa trang web đầy đủ thực hiện một cách tiếp cận lặp đi lặp lại. Nó sẽ là sự bổ sung dần dần các tính năng, trong đó mỗi bản phát hành mới được xây dựng dựa trên những bản trước đó.

Ví dụ: bắt đầu trong WordPress 5.8, bây giờ bạn sẽ sử dụng trình chỉnh sửa khối để quản lý các widget trên trang web của mình. Bạn cũng sẽ có quyền truy cập vào một số khối tập trung vào chủ đề mới như Biểu trưng trang web, Điều hướng, Vòng truy vấn (cho phép bạn tạo mẫu cho các bài đăng trong danh sách), v.v.

Nhưng trong khi Chỉnh sửa toàn trang chính thức vẫn đang được tiến hành, một số nhà phát triển chủ đề gan dạ đã bắt đầu phát hành các chủ đề dựa trên khối, cung cấp cho chúng tôi một số ví dụ khá hay về cách Chỉnh sửa toàn trang có thể hoạt động.

Ngoài ra, bạn có thể truy cập một số tính năng Chỉnh sửa trang web đầy đủ thử nghiệm trong phiên bản plugin của Gutenberg.

Vì vậy, chúng ta hãy xem xét hai điều:

1. Các tính năng chỉnh sửa toàn bộ trang web cốt lõi hiện có mà chúng tôi có từ WordPress 5.8
2. Chỉnh sửa toàn bộ trang web “đầy đủ” có thể hoạt động như thế nào dựa trên các tính năng thử nghiệm

Sử dụng các khối thay vì các widget

Kể từ WordPress 5.8, bây giờ bạn sẽ sử dụng các khối để kiểm soát thanh bên và chân trang của mình thay vì các widget (theo mặc định – bạn có thể tắt tính năng này nếu muốn).

Khi đi tới Giao diện > Tiện ích , bạn sẽ có thể quản lý nội dung của từng khu vực tiện ích bằng trình chỉnh sửa khối.

Bạn có thể thấy rằng mỗi khu vực tiện ích có một trình chỉnh sửa riêng biệt, bạn có thể mở trình chỉnh sửa này bằng cách nhấp vào nút bật tắt của đàn accordion. Bạn cũng có thể di chuyển các khối giữa các khu vực tiện ích con khác nhau bằng cách nhấp vào biểu tượng mũi tên có móc ở gần trên cùng:

Sử dụng các khối chủ đề mới

WordPress 5.8 cũng thêm các khối chủ đề chuyên dụng mới cho phép bạn chèn nội dung động vào trang web của mình. Các khối này cũng sẽ đóng một vai trò quan trọng khi bạn thiết kế các mẫu cho chủ đề của mình trong các bản phát hành trong tương lai.

Ví dụ: giả sử bạn muốn nhúng danh sách nội dung gần đây nhất của mình vào một trang. Bây giờ, bạn có thể chỉ cần thêm khối Vòng lặp truy vấn và bạn sẽ có thể tự động chèn nội dung từ một loại bài đăng cụ thể (ví dụ: bài đăng trên blog), bao gồm lọc theo danh mục, tác giả, từ khóa, v.v.

Bên trong khối Vòng lặp truy vấn, bạn có thể lồng các khối chủ đề khác để kiểm soát mẫu cho nội dung hiển thị ở đó. Ví dụ: bạn có thể hiển thị ngày của mỗi bài đăng bằng cách thêm khối Ngày đăng vào mẫu của mình.

Với khối Vòng lặp truy vấn trong WordPress 5.8, về cơ bản bạn có thể thiết kế trang danh sách blog tùy chỉnh của riêng mình. Chỉnh sửa toàn bộ trang web thích hợp sẽ mở rộng điều đó cho toàn bộ chủ đề của bạn – vì vậy hãy xem xét điều đó tiếp theo.

Thiết kế Mẫu nội dung

Chế độ chỉnh sửa mẫu là một tính năng mới khác trong WordPress 5.8. Nó cho phép bạn sử dụng Gutenberg để thiết kế các mẫu cho các bài đăng và trang của bạn bằng cách sử dụng các khối.

Hiện tại, tính năng này chỉ khả dụng nếu nhà phát triển chủ đề của bạn đã đặc biệt bật tính năng này, vì vậy bạn có thể không thấy tính năng này nếu nhà phát triển chủ đề của bạn chưa thực hiện điều đó.

Nếu bạn đang sử dụng chủ đề hỗ trợ chế độ chỉnh sửa mẫu trong WordPress 5.8, bạn sẽ thấy phần Mẫu mới trong tab Bài đăng / Trang của thanh bên khi bạn đang chỉnh sửa bài đăng hoặc trang. Bạn có thể tạo một mẫu mới hoặc chọn một trong các mẫu hiện có của mình:

Nếu bạn tạo một mẫu mới, bạn sẽ có thể đặt tên cho nó để giúp bạn ghi nhớ. Sau đó, bạn có thể thiết kế mẫu bằng chế độ chỉnh sửa mẫu đặc biệt, cùng với các khối chủ đề mới mà chúng tôi đã trình bày chi tiết trong phần trước:

Ví dụ về chỉnh sửa trang web đầy đủ của Blockbase

Blockbase là một chủ đề từ Automattic có chức năng như một loại “bằng chứng về khái niệm” và sân chơi để Chỉnh sửa toàn bộ trang web. Nó vẫn đang thử nghiệm, vì vậy nó có thể thay đổi trước khi các tính năng này có trong phần mềm WordPress cốt lõi. Nhưng nó cung cấp một ý tưởng về Chỉnh sửa Toàn bộ Trang web.

Với chủ đề và phiên bản plugin của Gutenberg được cài đặt, bạn sẽ có một khu vực Trình chỉnh sửa trang web mới cho phép bạn “xây dựng” chủ đề của mình bằng chính trình chỉnh sửa mà bạn đã thấy ở trên.

Tuy nhiên, sự khác biệt quan trọng là bạn không chỉ xây dựng một bài đăng hoặc một trang. Thay vào đó, bạn đang sử dụng trình chỉnh sửa khối WordPress của Gutenberg để tạo các mẫu thực tế mà tất cả nội dung trang web của bạn sẽ sử dụng – ví dụ: mẫu cho tiêu đề của bạn.

Để giúp bạn thực hiện điều này, bạn sẽ nhận được một loạt các khối thiết kế mới, bao gồm một số khối chủ đề mà bạn đã thấy ở trên:

Để điều hướng giữa các mẫu khác nhau, bạn có thể nhấp vào biểu trưng WordPress ở góc trên cùng bên trái để chỉnh sửa các mẫu khác và tạo các mẫu mới:

Một lần nữa, ý tưởng là cuối cùng bạn sẽ có thể sử dụng trình chỉnh sửa Gutenberg để kiểm soát tất cả các mẫu / bố cục của chủ đề của bạn. Và khi điều đó xảy ra, việc tạo một trang web WordPress sẽ trông khá khác so với những gì chúng ta coi là “bình thường” vào năm 2021.

Bản tóm tắt

Kể từ năm 2018, trình chỉnh sửa khối Gutenberg đã đạt được rất nhiều tiến bộ. Với động thái sắp tới đối với Chỉnh sửa toàn trang, trình chỉnh sửa khối sẽ chỉ trở thành một phần quan trọng hơn của WordPress.

Trong bài đăng này, chúng tôi đã đề cập đến mọi thứ từ kiến thức cơ bản về trình chỉnh sửa khối đến các mẹo và tính năng nâng cao. Chúng tôi cũng đã xem xét Chỉnh sửa Toàn bộ Trang web có thể trông như thế nào trong tương lai.

Nếu chưa sẵn sàng dùng thử, bạn có thể vô hiệu hóa vĩnh viễn Gutenberg và sử dụng trình chỉnh sửa cổ điển. Tuy nhiên, Gutenberg sẽ tiếp tục phát triển, vì vậy nó không phải là thứ bạn sẽ muốn bỏ qua mãi mãi.

Bạn vẫn có bất kỳ câu hỏi hoặc suy nghĩ nào về trình biên tập? Nếu vậy, chúng tôi rất muốn nghe ý kiến của bạn, cả tốt và xấu.