Title: 區塊
Author: WordPress.org
Published: 2025 年 12 月 1 日

---

# 區塊

區塊元件不需撰寫程式碼，僅需點擊便能插入內容。

![](https://wordpress.org/files/2024/05/blocks-feature-1.png)

## 建置網站，不再受限

掌握能實現大多數網站功能的技術，易如折枝。無論需不需要撰寫程式碼，區塊都能讓使用者
透過視覺化的方式與任何類型的內容進行互動，例如建立多樣化的版面配置、互動式載入及
不受限制的擴充性。區塊既適合用於設計，也適合用來開發，即使是初學者都可以透過直覺
加以使用。

[建立區塊](https://developer.wordpress.org/block-editor/getting-started/create-block/)

[瀏覽區塊目錄](https://tw.wordpress.org/plugins/browse/block/)

![](https://wordpress.org/files/2023/08/block-paragraph.png)

段落

![](https://wordpress.org/files/2023/08/block-heading.png)

標題

![](https://wordpress.org/files/2023/08/block-media-text.png)

媒體

![](https://wordpress.org/files/2023/08/block-image.png)

圖片

![](https://wordpress.org/files/2023/08/block-video.png)

視訊

![](https://wordpress.org/files/2023/08/block-audio.png)

音訊

![](https://wordpress.org/files/2023/08/block-columns.png)

多重欄位

![](https://wordpress.org/files/2023/08/block-file.png)

檔案

## WordPress 的神奇魔力

Blocks are the visual foundation of WordPress, and can be used to create and manage
every part of your site. They're also easier than you think. Learn how to edit a
block and you learn how to use all of WordPress—without having to write code. For
inspiration, check out what others have done with WordPress in the Showcase.

[查看展示網站](https://wordpress.org/showcase/)

![](https://wordpress.org/files/2024/05/patterns-collage.jpg)

## 完整的創意控制

The WordPress editor is the default way to insert, transform, style, and move your
blocks around on a visual canvas thanks to a simple drag-and-drop interface.

[即時試用區塊](https://tw.wordpress.org/gutenberg?output_format=md)

    ```wp-container-content-0733e5d0
    registerBlockType( 'your-first-block/hello-world', {
        edit: function () {
            return <p>Hello world (from the editor)</p>;
        },
        save: function () {
            return <p>Hello world (from the frontend)</p>;
        },
    } );
    ```

Hello world (from the editor)

## 建立專屬區塊

If you can’t find a block that suits your needs, create your own. Creating a block
is as simple as building a React component. Use the  `@wordpress/create-block` package
to jumpstart your creation.

[建立區塊](https://developer.wordpress.org/block-editor/getting-started/tutorial/)

## 查看區塊最新功能

The latest major WordPress version includes updates that can improve the blocks 
you use and enhance your overall site-building experience. Get more details about
what features are available in the current release.

[進一步了解 WordPress 最新發佈版本](https://tw.wordpress.org/6.9)

![](https://wordpress.org/files/2024/07/6-6-whats-new-i1.png)

## Only the beginning

While blocks are powerful on their own, they’re also part of something bigger and
can be combined or deployed in various ways. As a unified and open syntax, they're
easily understood by editors, browsers, and even AI. So whoever is editing will 
find it easy to make vibrant, personalized designs and experiences happen, fast.

[建立自訂區塊](https://developer.wordpress.org/block-editor/getting-started/create-block/)

[設計區塊版面配置](https://tw.wordpress.org/patterns/?output_format=md)

[建置區塊佈景主題](https://developer.wordpress.org/themes/block-themes/)

[部署區塊](https://developer.wordpress.org/block-editor/how-to-guides/platform/custom-block-editor/)