#blockeditor

Discover how WordPress 6.8 is reshaping website design — from sleek grid layouts to powerful block-based magic! ✨

👨‍💻 Don’t go it alone — Hire a WordPress Developer and unlock the full potential of the latest features.

🛠️ Faster builds, better performance, and pro-level customizations await.

Hey there, fellow developers! If you're looking to level up your WordPress plugin development game, you've come to the right place. In this blog, we'll dive deep into Gutenberg, the revolutionary block-based editor that's changing the way we create content in WordPress. We'll explore how to harness Gutenberg's potential to build powerful and user-friendly plugins that elevate your websites to the next level. So, buckle up, and let's get started!

Understanding Gutenberg Blocks

Gutenberg is all about blocks - those neat little content elements that make up your web pages. From paragraphs to images, galleries to buttons, each piece of content is now a block. And guess what? You can create your custom blocks too! Embrace the future of content creation with this simple example of a custom "My Awesome Block":

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('my-awesome-plugin/my-awesome-block', {

  title: 'My Awesome Block',

  icon: 'star-filled',

  category: 'common',

  edit: () => {

    return <div>Hey there! I'm your custom block. Let's rock!</div>;

  },

  save: () => {

    return <div>Hi, I'm the front-end version of your custom block!</div>;

  },

});

Building Custom Gutenberg Blocks Creating custom Gutenberg blocks is a breeze. All you need is the Gutenberg Block API and some JavaScript magic. The API lets you define block attributes, settings, and UI components. Let's build a dynamic "Quote Block" with editable author and text:

const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;

const { RichText } = wp.editor;

registerBlockType('my-awesome-plugin/quote-block', {

  title: __('Quote Block'),

  icon: 'format-quote',

  category: 'common',

  attributes: {

    quoteText: {

      type: 'string',

      source: 'html',

      selector: 'p',

    },

    quoteAuthor: {

      type: 'string',

      source: 'text',

      selector: 'cite',

    },

  },

  edit: ({ attributes, setAttributes }) => {

    const { quoteText, quoteAuthor } = attributes;

    const onChangeQuoteText = (newText) => setAttributes({ quoteText: newText });

    const onChangeQuoteAuthor = (newAuthor) => setAttributes({ quoteAuthor: newAuthor });

    return (

      <blockquote>

        <RichText

          tagName="p"

          value={quoteText}

          onChange={onChangeQuoteText}

          placeholder="Enter your quote here..."

        />

        <RichText

          tagName="cite"

          value={quoteAuthor}

          onChange={onChangeQuoteAuthor}

          placeholder="Author"

        />

      </blockquote>

    );

  },

  save: ({ attributes }) => {

    const { quoteText, quoteAuthor } = attributes;

    return (

      <blockquote>

        <p>{quoteText}</p>

        &lt;cite>{quoteAuthor}<;/cite>

      &lt;/blockquote>

    );

  },

});

Extending Core Gutenberg Blocks

Gutenberg comes with a rich set of core blocks, but sometimes you need that extra oomph! Fear not, you can extend core blocks too. Let's add a custom color option to the default "Button Block":

const { createHigherOrderComponent } = wp.compose;

const { addFilter } = wp.hooks;

const withCustomButtonColor = createHigherOrderComponent((BlockEdit) => {

  return (props) => {

    const { name, attributes, setAttributes } = props;

    const { backgroundColor } = attributes;

    const onChangeBackgroundColor = (colorValue) => {

      setAttributes({ backgroundColor: colorValue });

    };

    return (

      &lt;>

        &lt;BlockEdit {...props} />

        &lt;InspectorControls>

          &lt;PanelBody title="Button Settings" initialOpen={true}>

            &lt;ColorPicker

              color={backgroundColor}

              onChangeComplete={onChangeBackgroundColor}

            />

          &lt;/PanelBody>

        &lt;/InspectorControls>

      &lt;/>

    );

  };

}, 'withCustomButtonColor');

wp.hooks.addFilter('editor.BlockEdit', 'my-awesome-plugin/custom-button-color', withCustomButtonColor);

Implementing Block Patterns

Block Patterns are pre-designed block combinations that simplify content creation. With a single click, you can add complex layouts to your pages. Let's create a "Hero Section" pattern with an image and a heading:

const { registerBlockPattern } = wp.blockPatterns;

const { Fragment } = wp.element;

const { useBlockProps, RichText } = wp.blockEditor;

const heroSectionPattern = {

  title: 'Hero Section',

  description: 'Add a stunning hero section to your website.',

  categories: ['header'],

  content: [

    {

      name: 'core/image',

      attributes: {

        align: 'center',

      },

    },

    {

      name: 'core/heading',

      attributes: {

        level: 2,

        align: 'center',

        placeholder: 'Enter your heading here...',

      },

    },

  ],

};

registerBlockPattern('my-awesome-plugin/hero-section-pattern', heroSectionPattern);

Testing and Debugging Gutenberg Blocks

Testing and debugging are essential in any development process. For Gutenberg blocks, you can use the Gutenberg Plugin Compatibility and Site Health tools. Additionally, unit testing with Jest and end-to-end testing with Cypress can ensure your blocks perform seamlessly.

Neue WordPress 5.5 Features im Blockeditor

Über Nacht ist die neue WordPress Version 5.5 “Eckstine” rausgekommen und ich zeige euch hier ein paar der neuen Blockeditor Möglichkeiten. Technisch hat sich auch Einiges verbessert, so legt WordPress nun selbstständig XML-Sitemaps für Suchmaschinen an und Die Ladegeschwindigkeit von Bildern bzw. Seiten wurde durch verzögertes Laden optimiert:

Beiträge und Seiten laden dank der…

Had A WordPress Online Chat Tonite

Non copyright image from web

Non copyrighted image from-no copyright exclamation point image

WordPress Editors

I had been using the classic editor for approximately the last 2 years. Then switched when told they were ditching it June 1, 2020.

I contacted their online chat tonite for assistance. There were a couple of things I was having a greater amount difficulty figuring out.

Long…

As A Child I Loved Blocks As An Adult The Jury Is Out…Grr

Noncopyr Hmm Blocks.Uh. Blocks?!

I have been trying to use this block editor for the last week. Let’s just say we won’t be going monogamous anytime soon.

I read a few different statements saying if we did not like the block editor we could use the classic. I would be estatic if I could find anywhere on WordPress that stated this.

Unfortunately, the only thing I can find says as of…

Bạn có muốn thay đổi kích thước phông chữ trong các bài đăng hoặc trang WordPress của mình không? Đôi khi, bạn có thể muốn làm cho một dòng hoặc một đoạn lớn hơn hoặc bạn có thể muốn tăng kích thước phông chữ của toàn bộ nội dung trang của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thay đổi kích thước phông chữ trong WordPress. Bạn không chỉ học cách thay đổi kích thước phông chữ trong các bài đăng WordPress mà còn cả cách thực hiện trên trang web của mình.

Sử dụng tiêu đề đoạn

Khách truy cập của bạn chỉ mất vài giây để quyết định xem họ muốn ở lại hay rời khỏi trang web của bạn. Điều này cho bạn rất ít thời gian để thuyết phục họ ở lại trang web của bạn. Sử dụng Tiêu đề trong nội dung của bạn là một cách tuyệt vời để thu hút sự chú ý của người dùng. Chúng cho phép bạn chia các bài đăng và trang của bạn thành các phần bằng các tiêu đề khác nhau (thường được gọi là tiêu đề phụ của Cameron). Tiêu đề là rất tốt cho SEO là tốt. Công cụ tìm kiếm cho tiêu đề thích hợp nhiều trọng lượng hơn văn bản đoạn bình thường. Cách thêm tiêu đề trong trình chỉnh sửa khối WordPress mặc định Bạn có thể thêm tiêu đề vào bài đăng hoặc trang của mình bằng cách thêm khối ‘Tiêu đề. Bạn có thể tìm kiếm nó hoặc tìm thấy nó trong phần ‘Khối khối chung trong phần Trình soạn thảo Block Editor WordPress.

Khối sẽ mặc định là Tiêu đề 2. Thông thường, sẽ rất hợp lý khi gắn với Tiêu đề 2 cho các tiêu đề phụ của bạn. Nếu bạn muốn thay đổi điều này, thì bạn chỉ cần nhấp vào trình đơn thả xuống ’H2, để chọn một kích thước khác.

Ngoài ra, bạn có thể thay đổi điều này trong cài đặt khối ở phía bên phải màn hình. Bạn cũng có thể thay đổi tiêu đề màu ở đó. Cách thêm tiêu đề trong Trình chỉnh sửa Cổ điển cũ hơn Nếu bạn vẫn đang sử dụng trình soạn thảo cũ hay còn có tên là Classic Editor, thì bạn có thể thêm các tiêu đề bằng cách nhấn vào "Paragraph" . Chọn văn bản mà bạn muốn biến thành tiêu đề, nhấp vào thả xuống ‘Đoạn văn bản và chọn kích thước tiêu đề của bạn.

Kích thước và màu sắc của các kiểu Tiêu đề khác nhau được kiểm soát bởi CSS trong theme bạn đang dùng (style.css). Nếu bạn sử dụng một chủ đề WordPress cao cấp, sau đó bạn có thể có tùy chọn để thay đổi các cài đặt này trong Giao diện »Tùy chỉnh. Sử dụng các tiêu đề phụ trong bài viết của bạn giúp người đọc dễ dàng theo dõi những gì bạn nói với họ. Đồng thời, nó cũng làm cho bạn Bài viết WordPress thân thiện với SEO.

Thay đổi kích thước phông chữ trong WordPress với trình soạn thảo dạng khối (Block Editor)

Điều gì nếu bạn muốn có một đoạn hoặc thậm chí toàn bộ bài viết của bạn trong một phông chữ lớn hơn? Bạn có thể làm điều này thực sự dễ dàng bằng cách sử dụng trình chỉnh sửa khối mặc định mới nhất của WordPress. Chỉ cần nhấp vào bất kỳ khối đoạn văn nào, sau đó chọn kích thước phông chữ trong Settings Cài đặt văn bản ở phía bên phải.

Có các lựa chọn bao gồm Nhỏ, Bình thường, Trung bình, Lớn và rất Lớn. Nếu bạn đổi ý, thì chỉ cần nhấp vào nút ‘Đặt lại" để đặt đoạn văn của bạn trở lại văn bản mặc định. Ngoài ra còn có một ô tùy chọn bên cạnh, bạn chỉ cần nhập kích thước pixel mà bạn thích. Nếu bạn muốn, bạn cũng có thể đặt DropCap lớn xuất hiện ở đầu đoạn của mình. Các tùy chọn này không có sẵn trong trình soạn thảo cổ điển cũ hơn cho WordPress. Nếu bạn muốn sử dụng chúng, bạn nên chuyển qua dùng Block Editor mới của Wordpress.

Thay đổi kích thước phông chữ bằng Plugin TinyMCE Advanced

TinyMCE Advanced là một plugin WordPress cho phép bạn kiểm soát nhiều hơn về kích thước phông chữ và định dạng văn bản, cũng như một loạt các tính năng khác. Điều này đặc biệt hữu ích với trình soạn thảo cổ điển cũ hơn, nhưng nó cũng hoạt động với trình chỉnh sửa khối. Nó bổ sung một khối mới có tên là Dòng cổ điển Đoạn văn có tất cả các điều khiển TinyMCE. Để sử dụng nó, trước tiên bạn cần cài đặt và kích hoạt Plugin TinyMCE Advanced cắm vào. Bạn có thể đọc bài viết cách cài đặt plugin của chúng tôi. Tiếp theo, đi đến Cài đặt »TinyMCE Advanced để cấu hình cài đặt trình chỉnh sửa. Đây là nơi bạn có thể thiết lập các nút bạn muốn sử dụng trên thanh công cụ TinyMCE Advanced. Nếu bạn sử dụng nó với trình soạn thảo Cổ điển, thì bạn sẽ thấy TinyMCE có trình đơn thả xuống Size Kích thước phông chữ được bật theo mặc định trong hàng biểu tượng thứ hai. Bạn có thể di chuyển nó đến hàng đầu tiên bằng cách kéo nó lên trên nếu bạn muốn.

Nếu bạn sử dụng trình soạn thảo Block Editor, thì bạn sẽ cần cuộn xuống màn hình và thêm trình đơn thả xuống Kích thước phông chữ vào thanh công cụ bằng cách kéo và thả nó:

Sau đó hãy nhấp vào ‘Lưu Thay đổi trên màn hình. Để xem nút hoạt động, tạo một bài đăng mới hoặc chỉnh sửa một bài hiện có. Trong trình chỉnh sửa khối, giờ đây, bạn sẽ có tùy chọn để thêm một khối Đoạn cổ điển. Nó sẽ có các điều khiển TinyMCE Advanced, như thế này:

Trong trình chỉnh sửa cổ điển Classic Editor, bạn sẽ thấy các thanh công cụ TinyMCE Advanced với trình đơn thả xuống kích thước phông chữ:

Bạn có thể chọn bất kỳ kích thước phông chữ nào từ trình đơn thả xuống. Lưu ý: điều này không cung cấp cho bạn nhiều tùy chọn như trình chỉnh sửa khối WordPress và bạn có thể gõ loại chữ trong kích thước phông chữ của riêng bạn.

Thay đổi kích thước phông chữ toàn trang web bằng CSS

Nếu bạn đang thay đổi kích thước phông chữ mỗi khi bạn chỉnh sửa một bài đăng, thì bạn có thể muốn làm cho nó dễ dàng hơn bằng cách thay đổi nó vĩnh viễn trong chủ đề của bạn. Tin vui là bạn có thể thay đổi kích thước đoạn mặc định trên toàn bộ trang web của mình. Cách tốt nhất để làm điều này là bằng cách sử dụng chức năng Giao diện »Tùy chỉnh. Một số  theme của WordPress có thể đi kèm với một tùy chọn để bạn thay đổi kích thước phông chữ. Nếu bạn có thể tìm thấy tùy chọn này, thì bạn có thể sử dụng nó mà không cần viết mã CSS. Tuy nhiên, nếu theme của bạn không có tính năng đó, thì bạn có thể thêm CSS tùy chỉnh để thêm quy tắc kích thước phông chữ của riêng bạn. Chỉ cần nhấp vào tùy chọn Additional CSS(CSS bổ sung) trong tùy biến chủ đề. Đây là nơi bạn có thể lưu trữ tất cả mã CSS tùy chỉnh của mình.