WordPress 5.3 “Kirk” đã được phát hành chính thức vào ngày 12 tháng 11 năm 2019 và có thể tải về ngay bây giờ.
Vậy có gì mới trong WordPress 5.3?
Bạn đang xem: WordPress 5.3: Những cải tiến mới (Các block mới, Các API mới, Giao diện quản trị tốt hơn)
Đầu tiên và quan trọng nhất, một số phiên bản của plugin Gutenberg đã được kết hợp vào core, từ phiên bản 5.4 đến 6.6. Điều này có nghĩa là có rất nhiều tính năng và cải tiến cho cả người dùng và nhà phát triển, cũng như cải thiện hiệu suất đáng kể.
Nhưng không chỉ có Gutenberg, WordPress 5.3 còn có nhiều cải tiến khác như công cụ Site Health, giao diện quản trị mới (TwentyTwenty), hỗ trợ tốt hơn cho PHP 7.4, cải thiện khả năng truy cập và nhiều hơn nữa.
Kể từ khi được ra mắt, Block Editor đã được cải thiện đều đặn nhờ sự đóng góp của các nhà phát triển trên toàn thế giới. Tuy nhiên, các phiên bản mới không được kết hợp vào core ngay khi chúng được phát hành.
Với 5.3, có tới 13 phiên bản của plugin Gutenberg đã được kết hợp vào core cùng một lúc. Vì vậy, nếu bạn chưa sử dụng plugin Gutenberg và chưa thường xuyên cập nhật, bạn sẽ nhận thấy nhiều cải tiến và tính năng mới trong Block Editor khi cập nhật WordPress 5.3.
Đã được báo cáo cũng có cải thiện về hiệu suất tổng thể. Bảng so sánh dưới đây so sánh hiệu suất cho một bài viết lớn (36.000 từ / 1.000 block) với các phiên bản khác nhau của plugin Gutenberg.
Phiên bản | Thời gian tải | Sự kiện KeyPress (gõ) |
---|---|---|
Gutenberg 6.6.0 | 4.7s | 38.96ms |
Gutenberg 6.5.0 | 4.68s | 42.96ms |
WordPress 5.2 | 5.69s | 57.65ms |
Có rất nhiều các cải thiện, thay đổi và sửa lỗi khác nhau mà chúng tôi không thể nêu hết trong bài viết này. Đây chỉ là một số tính năng và cải tiến có tác động lớn đến trải nghiệm người dùng/phát triển và chúng tôi đã nhóm chúng thành các nhóm sau:
- Cải thiện trải nghiệm chỉnh sửa
- Tính năng dành cho nhà phát triển chủ đề và thiết kế
- Tính năng dành cho nhà phát triển Block
Contents
Cải thiện trải nghiệm chỉnh sửa
Nếu bạn chưa cài đặt plugin Gutenberg trước đây, bạn sẽ tìm thấy một block hoàn toàn mới: block Group. Được thêm vào chỉnh sửa với phiên bản Gutenberg 5.5, block Group là một container đa năng cho các block khác, giúp bạn tạo ra các mẫu block nâng cao để được sử dụng trên bất kỳ trang nào của trang web WordPress của bạn.
Block Group mới hỗ trợ các alignment rộng và màu nền, mang lại sự tự do lớn cho người dùng WordPress khi tạo nội dung.
Ngoài block Group, chúng tôi đã xem xét mười cải tiến khác trong Block Editor có tác động lớn đến cách bạn sử dụng trình chỉnh sửa.
- Block Appender
Block Group và Columns block hiển thị một phần ứng dụng block khi trống. Phần ứng dụng chỉ là một khu vực màu xám có dấu cộng bên trong giúp làm rõ giao diện và cải thiện khả năng sử dụng block.
Hình ảnh: Empty Group block in WordPress 5.3
- Grouping Blocks by Group Interaction
Bây giờ bạn có thể tạo Group block bằng cách tương tác nhóm, có nghĩa là bạn có thể chọn nhiều block và nhóm chúng chỉ với một vài cú nhấp chuột. Bạn chỉ cần thêm tất cả các block bạn cần vào lựa chọn, sau đó nhấp vào “Nhóm” trong menu ba chấm. Xong!
Hình ảnh: Group interaction
- Custom width Columns
Columns block bây giờ hỗ trợ điều khiển trượt trong Cài đặt Block, cho phép bạn đặt chiều rộng tùy chỉnh cho mỗi cột (trong phiên bản sau, chúng tôi có thể mong đợi cải tiến thêm cho Columns block với việc giới thiệu điều khiển thay đổi kích thước kéo và thả).
Hình ảnh: The Columns block in WordPress 5.3
- A Layout Picker For Columns Blocks
Một cải tiến bổ sung cho Columns block trong WordPress 5.3 là trình chọn bố cục. Được thêm vào chỉnh sửa với Gutenberg 6.0, tính năng này cho phép người dùng chọn từ một số mẫu bố cục đã được định nghĩa trước hoặc chuyển đến bố cục mặc định, giúp tăng tốc quá trình chỉnh sửa và làm cho block dễ sử dụng hơn đối với người dùng không chuyên.
Hình ảnh: The Columns block layout picker
Bộ chọn bố cục là một cài đặt của Block Patterns API, cung cấp một cách để chọn giữa một tập hợp các tùy chọn đã được định nghĩa trước để chọn khi thêm block. Ngoài Columns block, chúng ta còn có các ví dụ về Block Patterns trong Table và Cover blocks. Bạn có thể đọc thêm về Block Patterns API trên GitHub.
Hình ảnh: The Cover block pattern
- Table Block Improvements
Blocks Table đã được cải thiện với một số tính năng mới. Bây giờ nó hỗ trợ căn chỉnh văn bản trong các cột, tiêu đề và chân trang bảng và màu nền.
Hình ảnh: The new Table block supports text alignments, header and footer, and background colors
-
Block Navigation Mode
Gutenberg 6.3 giới thiệu Navigation Mode để điều hướng giữa các block bằng cách sử dụng phím Tab hoặc phím mũi tên mà không cần vào nội dung block. Người dùng có thể chuyển từ Navigation Mode sang Edit Mode và ngược lại chỉ bằng cách nhấn Enter hoặc Esc. Tính năng này cải thiện đáng kể tính sử dụng, đặc biệt là đối với các trình đọc màn hình. -
Added Motion to Block Changes and Rearrangements
Một cải thiện khác về tính sử dụng là việc thêm motion vào các thay đổi, tạo, xóa và sắp xếp block. Matías Ventura giải thích vì sao tính năng này quan trọng:
Hãy cân nhắc trường hợp của một danh sách chứa một tập hợp các mục: hành động di chuyển, sắp xếp và vân vân không chỉ ảnh hưởng đến mục mà còn ảnh hưởng đến toàn bộ tập hợp, đặc biệt là mục nó "hoán đổi vị trí" với. Hiện thực cho chúng ta thấy rằng để đặt một thứ gì đó ở vị trí của thứ khác, cả hai thứ đều phải di chuyển. Sự thay đổi trong trạng thái tổng thể của toàn bộ nhóm có thể khó hiểu chỉ bằng cách thay đổi ngay lập tức. Nó mất một chút thời gian để điều chỉnh. Các chuyển động và tương tác dựa trên cử chỉ thông thường giúp kết nối hai trạng thái này một cách làm cho việc tương tác (như "điều gì vừa xảy ra") hiểu được ngay lập tức.
Hình ảnh: Block motion
- Inline Image Reordering in Gallery Blocks
Gallery block đã được cải thiện với việc tùy chỉnh hình ảnh inline. Bây giờ chúng ta có thể sắp xếp lại các hình ảnh trong gallery bằng cách nhấp chuột vào các nút Move image forward và Move image backward mà không cần mở màn hình thư viện phương tiện.
Hình ảnh: The improved Gallery block
- Improvements in Latest Posts Block
Latest Posts block bây giờ hỗ trợ mô tả và lặp lại nội dung bài đăng (xem pull #14627).
Hình ảnh: The Latest Posts widget supports excerpt and post content
Bảng cài đặt block hiện có một phần mà người dùng có thể chuyển đổi bật/tắt nội dung bài viết. Nếu Post Content được kích hoạt, bạn có thể chọn giữa Excerpt và Full Post. Cuối cùng, thanh trượt cho phép bạn điều khiển độ dài của đoạn trích nếu Excerpt được chọn.
Xem thêm : Khóa học thiết kế web chuyên nghiệp tại FPT Arena Multimedia
Thay đổi cuối cùng này là một phần của chiến lược tổng thể tập trung vào cải thiện giao diện người dùng. Trong Iterations on “Latest Posts” Block, Mel Choyce nói:
Trong quá trình chuẩn bị làm việc trên các mẫu trang trong Gutenberg, chúng ta sẽ muốn có một tập hợp mạnh mẽ các block động có thể được thêm vào bất kỳ bài viết hoặc trang nào. Mở rộng block này sẽ đưa chúng ta vào vị trí tốt hơn để giải quyết các block động phức tạp hoặc toàn cầu hơn trong tương lai.
Người dùng không cần phải biết cách viết câu truy vấn tùy chỉnh hoặc hiểu vòng lặp để thêm một số bài viết vào trang chủ của họ. Block Bài viết gần đây là một bước khởi đầu tốt, nhưng để trở thành một giải pháp hoàn thiện, nó cần hỗ trợ nhiều hơn các tiêu đề và ngày đăng của bài viết.
- Lists Block Enhancements
List blocks bây giờ hỗ trợ các phím tắt thụt lề / giảm thụt, giá trị bắt đầu và hỗ trợ đảo ngược cho danh sách được sắp xếp.
Hình ảnh: Ordered list settings in List block
Cải tiến và tính năng mới khác trong Block Editor
Do số lượng lớn phiên bản plugin Gutenberg kết hợp vào Core, có rất nhiều thay đổi, cải tiến và sửa lỗi mà chúng tôi không thể đề cập ở đây. Một số cải tiến bổ sung và tính năng mới bao gồm:
- Columns block hiện hỗ trợ căn chỉnh dọc (Gutenberg 5.4).
- Media & Text block giờ hỗ trợ căn chỉnh dọc (Gutenberg 5.5).
- Button block giờ hỗ trợ tùy chọn mục tiêu liên kết (Gutenberg 6.2).
- Separator block giờ hỗ trợ màu viền (Gutenberg 6.3).
- Cover block giờ có thể điều chỉnh kích thước (Gutenberg 6.4).
- Typewriter giờ có trải nghiệm cải thiện, đặc biệt hữu ích trên điện thoại di động (Gutenberg 6.4).
- Image block giờ có một biến thể cắt thành hình tròn (Gutenberg 6.4).
- Đã thêm một khối Liên kết mạng xã hội mới (Gutenberg 6.5).
- Gallery block giờ hỗ trợ chú thích thư viện (Gutenberg 6.5).
Những tính năng thú vị cho nhà phát triển và thiết kế chủ đề
WordPress 5.3 cung cấp nhiều tính năng và cải tiến cho Block Editor dành cho nhà phát triển và thiết kế chủ đề.
Có ba thay đổi chính liên quan đến nhà thiết kế chủ đề và liên quan đến CSS và HTML của một số khối.
- Group Block Inner Container
Khối Group bây giờ chứa một khối nội trong (wp-block-group__inner-container) có thể mở rộng ra ngoài khối chứa chính nếu không thiết kế cẩn thận. Điều này có thể dẫn đến hiệu ứng không mong muốn trên giao diện trang web.
Do đó, với các chủ đề hỗ trợ căn chỉnh rộng và đầy đủ, một khối container có thể yêu cầu một số CSS bổ sung để hiển thị như mong đợi.
Dưới đây là một ví dụ từ blog Make WordPress Core cho thấy cách thiết kế block để tránh các vấn đề này:
//Áp dụng kiểu entry-content cho khối inner container của nhóm block nếu cần.
.entry-content, .wp-block-group__inner-container {
width: 60vw;
margin: 0 auto;
}
//Khi một nhóm block có sự căn chỉnh rộng, hãy đảm bảo các thành phần tràn toàn bộ chiều rộng rồi so với khối chứa.
.alignwide, .wp-block-group.alignwide .alignfull {
margin-left: -10vw;
width: 80vw;
}
.alignfull {
margin-left: -20vw;
width: 100vw;
}
//Đảm bảo các thành phần căn chỉnh rộng và đầy đủ không tràn ra khỏi chiều rộng của khối Group không căn chỉnh chuẩn.
.wp-block-group:not(.alignwide):not(.alignfull) * {
max-width: 100%;
margin-left: 0;
}
- Mã lớp tên mới cho Căn chỉnh Văn bản
Trước WordPress 5.3, kiểu inline được sử dụng để thay đổi căn chỉnh của các khối văn bản (Heading, Paragraph, Quote và Verse).
Sự đặc thù cao của kiểu inline có thể làm khó việc tùy chỉnh giao diện của các khối này. Nhưng nhà thiết kế chủ đề giờ có thể tận dụng ba lớp CSS mới thay thế kiểu inline:
- has-text-align-right
- has-text-align-center
- has-text-align-left
Các khối hiện có sẽ tự động chuyển đổi và các lớp được áp dụng ngay khi các bài viết được mở và lưu trong Block Editor.
- Cập nhật đánh dấu cho Gallery Block và Table Block
Hiện các block Gallery và Table được bao bọc trong các phần tử figure. Phong cách phần tử thay đổi tương ứng và các chủ đề có thể bị ảnh hưởng và có thể cần cập nhật. Đây là đánh dấu mới cho một block Table:
<figure class="wp-block-table is-style-stripes">
<table class="">
<tbody>
<tr>
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr>
</tbody>
</table>
</figure>
Xem thêm chi tiết về các lớp tên và các thay đổi liên quan đến chủ đề khác trên blog Make WordPress Core.
Các tính năng cho nhà phát triển Block
WordPress 5.3 mang lại các thay đổi và cải tiến cho các API Block.
- Đăng ký và Hủy đăng ký Block Styles
Trước 5.3, nhà phát triển và thiết kế phải viết một số mã JavaScript để đăng ký/hủy đăng ký kiểu dáng.
Với WordPress 5.3, chúng ta hiện có thể tận dụng hai hàm trợ giúp mới cho phép đăng ký và hủy đăng ký kiểu dáng block thông qua PHP: register_block_style
và unregister_block_style
.
Hàm register_block_style
đăng ký một kiểu dáng mới cho block đã chọn. Hàm này có hai đối số:
- Tên của block.
- Một mảng các thuộc tính kiểu dáng.
Mảng có thể bao gồm các thông số sau:
- name: (bắt buộc) một định danh duy nhất cho kiểu dáng.
- label: (bắt buộc) nhãn dễ đọc được.
- inline_style: (tùy chọn) một đoạn CSS đăng ký lớp CSS cho kiểu dáng.
- style_handle: (tùy chọn) một handle cho kiểu dáng đã đăng ký trước đó (handle kiểu dáng gắn liền với kiểu dáng nơi nó cần thiết hàng đợi).
Xem thêm : Học lập trình Thiết kế Website duy nhất Đà Nẵng “5 KHÔNG”
Chúng ta có thể đăng ký kiểu dáng inline bằng đoạn code dưới đây:
add_action( 'init', 'register_custom_block_style' );
function register_custom_block_style() {
if( ! function_exists( 'register_block_style' ) ) return;
register_block_style( 'core/quote', array(
'name' => 'blue-quote',
'label' => __( 'Blue Quote' ),
'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
) );
};
Kiểu dáng mới bây giờ có sẵn trong phần Cài đặt Kiểu.
- Block Example API
WordPress 5.3 thêm một thuộc tính JS mới cho phép xem trước block đã chọn từ thư viện trước khi thêm nó vào nội dung.
Chúng ta có thể thêm hỗ trợ cho tính năng này bằng cách xác định thuộc tính ví dụ trong các cài đặt block như sau:
const blockSettings = {
// ...
example: {
attributes: {
content: __( 'Nội dung của block' )
},
innerBlocks: []
}
}
registerBlockType( name, settings );
Hình ảnh: Block Example API
Cải tiến trong thành phần Site Health
WordPress 5.2 đã giới thiệu công cụ Site Health để cung cấp thông tin về tình trạng sức khỏe của trang web và giúp quản trị viên trang web khôi phục lại trang web khi gặp sự cố kỹ thuật. Với việc phát hành WordPress 5.3, công cụ Site Health được cải tiến và thay đổi ở cả hai phía của thành phần.
- Loại trạng thái Site Health Grading
Trong WordPress 5.2, một phần trăm điểm được hiển thị ở phía trên trang trạng thái Site Health. Tuy nhiên, một số người đã thể hiện một số lo ngại về điểm số khi xem xét nó là mơ hồ và gây nhầm lẫn, vì người dùng có thể muốn đạt điểm 100% hơn là điều tốt nhất cho trang web của họ.
Chỉ số chỉ cho thấy có bao nhiêu bài kiểm tra một trang web đã vượt qua, nhưng không phải mức độ “khỏe mạnh” của nó. Vì lý do này, phần trăm đã bị loại bỏ và công cụ Site Health bây giờ chỉ hiển thị một trong hai trạng thái có thể được xem như là nhắc nhở hơn là chỉ số chính xác cho hiệu năng và bảo mật của trang web:
- Nên cải thiện
- Tốt
Hình ảnh: Site Health Status page in WordPress 5.2
- Gửi Email phục hồi được nâng cấp
Khi xảy ra sự cố, WordPress cố gắng gửi email phục hồi cho quản trị viên trang web. Rất tiếc, những email này không cung cấp thông tin hữu ích để sửa lỗi và chúng chỉ thông báo rằng có gì đó đã sai với trang web của chúng tôi.
Để cung cấp thông tin hữu ích hơn để khôi phục trang web WordPress của bạn, WordPress 5.3 giới thiệu bộ lọc recovery_email_debug_info, là một mảng liên kết các thông tin gỡ lỗi. Email phục hồi giờ bao gồm các thông tin cơ bản sẽ giúp bạn xử lý sự cố trang web của mình hoặc ít nhất là được giúp đỡ từ người khác.
Email thất bại sẽ bao gồm một phần bắt đầu với chuỗi sau:
Khi tìm kiếm sự giúp đỡ cho vấn đề này, bạn có thể được yêu cầu cung cấp một số trong các thông tin sau:
Sau đó, thông tin sau được cung cấp:
- Phiên bản WordPress.
- Phiên bản PHP.
- Chủ đề hiện tại và phiên bản.
- Tên và phiên bản của plugin gây ra sự cố.
Thông tin được giảm thiểu nhằm tránh nhầm lẫn đối với người dùng cuối, nhưng nhà phát triển có thể sử dụng bộ lọc recovery_email_debug_info để thêm nhiều chi tiết hơn khi cần (xem ticket #48090 để biết thêm thông tin).
- Bộ lọc cho việc hoàn tất các bài kiểm tra Trạng thái Site Health
Bộ lọc site_status_test_result mới cho phép nhà phát triển lọc đầu ra của một bài kiểm tra trạng thái đã hoàn thành để mở rộng kết quả của một bài kiểm tra.
Nhà phát triển cũng có thể sử dụng bộ lọc này để cung cấp các hành động bổ sung. Đây là một ví dụ tuyệt vời về việc sử dụng (xem ticket #47864):
Một ví dụ có thể là một nhà cung cấp dịch vụ lưu trữ, các phần mở rộng PHP bị thiếu, vì vậy họ thêm một liên kết hoạt động đến trình quản lý phần mở rộng PHP của bảng điều khiển của họ. Có thể họ muốn trực tiếp hơn, họ muốn kiểm tra phiên bản PHP, mà đề nghị người dùng cập nhật, họ thêm một nút ajax mà sẽ chuyển đổi phiên bản PHP cho người dùng ngay lập tức.
Bộ lọc này có sẵn cả trong PHP, cho các bài kiểm tra trực tiếp, và dưới dạng JavaScript, cho các bài kiểm tra không đồng bộ.
Cải tiến kinh nghiệm quản trị
Ngoài công cụ Site Health, WordPress 5.3 mang lại nhiều cải tiến giao diện quản trị mà sẽ cải thiện đáng kể trải nghiệm tổng thể của bảng điều khiển WordPress.
- Tăng cường tương phản màu sắc
Tăng cường tương phản màu sắc và sửa một số vấn đề về khả năng sử dụng.
Hình ảnh: Posts Screen in WordPress 5.2
Hình ảnh: Posts Screen in WordPress 5.3
- Xác minh Email Quản trị
Một xác minh email quản trị sẽ được kích hoạt sau một khoảng thời gian khi quản trị viên không đăng nhập. Theo mặc định, khoảng thời gian này được đặt là sáu tháng, nhưng nhà phát triển có thể đặt một khoảng thời gian khác bằng cách sử dụng bộ lọc admin_email_check_interval (xem ticket #46349 và #48144).
Hình ảnh: WordPress admin email verification
Để vô hiệu hóa xác minh email quản trị, bạn có thể sử dụng bộ lọc sau:
add_filter( 'admin_email_check_interval', '__return_false' );
-
Tiếp tục tải lên
Việc tải lên hình ảnh lớn từ điện thoại thông minh sẽ không làm hỏng quá trình giữa chừng. -
Xoay ảnh
Hình ảnh bây giờ được xoay đúng theo dữ liệu hướng EXIF.
Chủ đề mặc định mới: Twenty Twenty
WordPress 5.3 đi kè
Nguồn: https://laptrinhc.edu.vn
Danh mục: Web