Skip to content

Latest commit

 

History

History
848 lines (565 loc) · 36.1 KB

core-blocks.md

File metadata and controls

848 lines (565 loc) · 36.1 KB

Core Blocks Reference

This page lists the core blocks included in the block-library package.

Items marked with a strikeout (~~strikeout~~) are explicitly disabled.

Archives

Display a date archive of your posts. (Source)

  • Name: core/archives
  • Category: widgets
  • Supports: align, spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: displayAsDropdown, showLabel, showPostCounts, type

Audio

Embed a simple audio player. (Source)

  • Name: core/audio
  • Category: media
  • Supports: align, anchor, spacing (margin, padding)
  • Attributes: autoplay, caption, id, loop, preload, src

Avatar

Add a user's avatar. (Source)

  • Name: core/avatar
  • Category: theme
  • Supports: align, color (background, text), spacing (margin, padding), alignWide, html
  • Attributes: isLink, linkTarget, size, userId

Reusable block

Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used. (Source)

  • Name: core/block
  • Category: reusable
  • Supports: customClassName, html, inserter
  • Attributes: ref

Button

Prompt visitors to take action with a button-style link. (Source)

  • Name: core/button
  • Category: design
  • Supports: align, anchor, color (background, gradients, text), spacing (padding), typography (fontSize), alignWide, reusable
  • Attributes: backgroundColor, gradient, linkTarget, placeholder, rel, text, textColor, title, url, width

Buttons

Prompt visitors to take action with a group of button-style links. (Source)

  • Name: core/buttons
  • Category: design
  • Supports: align (full, wide), anchor, spacing (blockGap, margin)
  • Attributes:

Calendar

A calendar of your site’s posts. (Source)

  • Name: core/calendar
  • Category: widgets
  • Supports: align
  • Attributes: month, year

Categories List

Display a list of all categories. (Source)

  • Name: core/categories
  • Category: widgets
  • Supports: align, spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: displayAsDropdown, showEmpty, showHierarchy, showOnlyTopLevel, showPostCounts

Code

Display code snippets that respect your spacing and tabs. (Source)

  • Name: core/code
  • Category: text
  • Supports: anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight)
  • Attributes: content

Column

A single column within a columns block. (Source)

  • Name: core/column
  • Category: text
  • Supports: anchor, color (background, gradients, link, text), spacing (blockGap, padding), typography (fontSize, lineHeight), html, reusable
  • Attributes: allowedBlocks, templateLock, verticalAlignment, width

Columns

Display content in multiple columns, with blocks added to each column. (Source)

  • Name: core/columns
  • Category: design
  • Supports: align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isStackedOnMobile, verticalAlignment

Comment Author Avatar (deprecated)

This block is deprecated. Please use the Avatar block instead. (Source)

  • Name: core/comment-author-avatar
  • Category: theme
  • Supports: color (background, text), spacing (margin, padding), html, inserter
  • Attributes: height, width

Comment Author Name

Displays the name of the author of the comment. (Source)

  • Name: core/comment-author-name
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isLink, linkTarget, textAlign

Comment Content

Displays the contents of a comment. (Source)

  • Name: core/comment-content
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (padding), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Comment Date

Displays the date on which the comment was posted. (Source)

  • Name: core/comment-date
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: format, isLink

Comment Edit Link

Displays a link to edit the comment in the WordPress Dashboard. This link is only visible to users with the edit comment capability. (Source)

  • Name: core/comment-edit-link
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: linkTarget, textAlign

Comment Reply Link

Displays a link to reply to a comment. (Source)

  • Name: core/comment-reply-link
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Comment Template

Contains the block elements used to display a comment, like the title, date, author, avatar and more. (Source)

  • Name: core/comment-template
  • Category: design
  • Supports: align, typography (fontSize, lineHeight), html, reusable
  • Attributes:

Comments

An advanced block that allows displaying post comments using different visual configurations. (Source)

  • Name: core/comments
  • Category: theme
  • Supports: align (full, wide), color (background, gradients, link, text), typography (fontSize, lineHeight), html
  • Attributes: legacy, tagName

Comments Pagination

Displays a paginated navigation to next/previous set of comments, when applicable. (Source)

  • Name: core/comments-pagination
  • Category: theme
  • Supports: align, color (background, gradients, link, text), typography (fontSize, lineHeight), html, reusable
  • Attributes: paginationArrow

Next Page

Displays the next comment's page link. (Source)

  • Name: core/comments-pagination-next
  • Category: theme
  • Supports: color (background, gradients, text), typography (fontSize, lineHeight), html, reusable
  • Attributes: label

Page Numbers

Displays a list of page numbers for comments pagination. (Source)

  • Name: core/comments-pagination-numbers
  • Category: theme
  • Supports: typography (fontSize, lineHeight), html, reusable
  • Attributes:

Previous Page

Displays the previous comment's page link. (Source)

  • Name: core/comments-pagination-previous
  • Category: theme
  • Supports: color (background, gradients, text), typography (fontSize, lineHeight), html, reusable
  • Attributes: label

Comments Title

Displays a title with the number of comments (Source)

  • Name: core/comments-title
  • Category: theme
  • Supports: align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), anchor, html
  • Attributes: level, showCommentsCount, showPostTitle, textAlign

Cover

Add an image or video with a text overlay — great for headers. (Source)

  • Name: core/cover
  • Category: media
  • Supports: align, anchor, color (background, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url, useFeaturedImage

Embed

Add a block that displays content pulled from other sites, like Twitter or YouTube. (Source)

  • Name: core/embed
  • Category: embed
  • Supports: align
  • Attributes: allowResponsive, caption, previewable, providerNameSlug, responsive, type, url

File

Add a link to a downloadable file. (Source)

  • Name: core/file
  • Category: media
  • Supports: align, anchor
  • Attributes: displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget

Classic

Use the classic WordPress editor. (Source)

  • Name: core/freeform
  • Category: text
  • Supports: className, customClassName, reusable
  • Attributes: content

Gallery

Display multiple images in a rich gallery. (Source)

  • Name: core/gallery
  • Category: media
  • Supports: align, anchor, color (background, gradients, text), spacing (blockGap), units (em, px, rem, vh, vw), html
  • Attributes: allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, shortCodeTransforms, sizeSlug

Group

Gather blocks in a layout container. (Source)

  • Name: core/group
  • Category: design
  • Supports: align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), html
  • Attributes: layout, tagName, templateLock

Heading

Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content. (Source)

  • Name: core/heading
  • Category: text
  • Supports: __unstablePasteTextInline, align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), className
  • Attributes: content, level, placeholder, textAlign

Home Link

Create a link that always points to the homepage of the site. Usually not necessary if there is already a site title link present in the header. (Source)

  • Name: core/home-link
  • Category: design
  • Supports: typography (fontSize, lineHeight), html, reusable
  • Attributes: label

Custom HTML

Add custom HTML code and preview it as you edit. (Source)

  • Name: core/html
  • Category: widgets
  • Supports: className, customClassName, html
  • Attributes: content

Image

Insert an image to make a visual statement. (Source)

  • Name: core/image
  • Category: media
  • Supports: anchor, color (background, text)
  • Attributes: align, alt, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, sizeSlug, title, url, width

Latest Comments

Display a list of your most recent comments. (Source)

  • Name: core/latest-comments
  • Category: widgets
  • Supports: align, html
  • Attributes: commentsToShow, displayAvatar, displayDate, displayExcerpt

Latest Posts

Display a list of your most recent posts. (Source)

  • Name: core/latest-posts
  • Category: widgets
  • Supports: align, typography (fontSize, lineHeight), html
  • Attributes: addLinkToFeaturedImage, categories, columns, displayAuthor, displayFeaturedImage, displayPostContent, displayPostContentRadio, displayPostDate, excerptLength, featuredImageAlign, featuredImageSizeHeight, featuredImageSizeSlug, featuredImageSizeWidth, order, orderBy, postLayout, postsToShow, selectedAuthor

List

Create a bulleted or numbered list. (Source)

  • Name: core/list
  • Category: text
  • Supports: __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), className
  • Attributes: ordered, placeholder, reversed, start, type, values

List item

Create a list item. (Source)

  • Name: core/list-item
  • Category: text
  • Supports: className
  • Attributes: content, placeholder

Login/out

Show login & logout links. (Source)

  • Name: core/loginout
  • Category: theme
  • Supports: className, typography (fontSize)
  • Attributes: displayLoginAsForm, redirectToCurrent

Media & Text

Set media and words side-by-side for a richer layout. (Source)

  • Name: core/media-text
  • Category: media
  • Supports: align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: align, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, verticalAlignment

Unsupported

Your site doesn’t include support for this block. (Source)

  • Name: core/missing
  • Category: text
  • Supports: className, customClassName, html, inserter, reusable
  • Attributes: originalContent, originalName, originalUndelimitedContent

More

Content before this block will be shown in the excerpt on your archives page. (Source)

  • Name: core/more
  • Category: design
  • Supports: className, customClassName, html, multiple
  • Attributes: customText, noTeaser

Navigation

A collection of blocks that allow visitors to get around your site. (Source)

  • Name: core/navigation
  • Category: theme
  • Supports: align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), html
  • Attributes: __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor

Custom Link

Add a page, link, or another item to your navigation. (Source)

  • Name: core/navigation-link
  • Category: design
  • Supports: html, reusable
  • Attributes: description, id, isTopLevelLink, kind, label, opensInNewTab, rel, title, type, url

Submenu

Add a submenu to your navigation. (Source)

  • Name: core/navigation-submenu
  • Category: design
  • Supports: html, reusable
  • Attributes: description, id, isTopLevelItem, kind, label, opensInNewTab, rel, title, type, url

Page Break

Separate your content into a multi-page experience. (Source)

  • Name: core/nextpage
  • Category: design
  • Supports: className, customClassName, html
  • Attributes:

Page List

Display a list of all pages. (Source)

  • Name: core/page-list
  • Category: widgets
  • Supports: html, reusable
  • Attributes: __unstableMaxPages

Paragraph

Start with the basic building block of all narrative. (Source)

  • Name: core/paragraph
  • Category: text
  • Supports: __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), className
  • Attributes: align, content, direction, dropCap, placeholder

Pattern

Show a block pattern. (Source)

  • Name: core/pattern
  • Category: theme
  • Supports: html, inserter
  • Attributes: slug

Post Author

Display post author details such as name, avatar, and bio. (Source)

  • Name: core/post-author
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: avatarSize, byline, showAvatar, showBio, textAlign

Post Author Biography

The author biography. (Source)

  • Name: core/post-author-biography
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
  • Attributes: textAlign

Post Author Name

The author name. (Source)

  • Name: core/post-author-name
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isLink, linkTarget, textAlign

Post Comment (deprecated)

This block is deprecated. Please use the Comments block instead. (Source)

  • Name: core/post-comment
  • Category: theme
  • Supports: html, inserter
  • Attributes: commentId

Post Comments Count

Display a post's comments count. (Source)

  • Name: core/post-comments-count
  • Category: theme
  • Supports: color (background, gradients, text), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Post Comments Form

Display a post's comments form. (Source)

  • Name: core/post-comments-form
  • Category: theme
  • Supports: color (background, gradients, link, text), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Post Comments Link

Displays the link to the current post comments. (Source)

  • Name: core/post-comments-link
  • Category: theme
  • Supports: color (background, link, text), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Post Content

Displays the contents of a post or page. (Source)

  • Name: core/post-content
  • Category: theme
  • Supports: align (full, wide), typography (fontSize, lineHeight), html
  • Attributes:

Post Date

Add the date of this post. (Source)

  • Name: core/post-date
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: displayType, format, isLink, textAlign

Post Excerpt

Display a post's excerpt. (Source)

  • Name: core/post-excerpt
  • Category: theme
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: moreText, showMoreOnNewLine, textAlign

Post Featured Image

Display a post's featured image. (Source)

  • Name: core/post-featured-image
  • Category: theme
  • Supports: align (center, full, left, right, wide), color (background, text), spacing (margin, padding), html
  • Attributes: height, isLink, linkTarget, rel, scale, sizeSlug, width

Post Navigation Link

Displays the next or previous post link that is adjacent to the current post. (Source)

  • Name: core/post-navigation-link
  • Category: theme
  • Supports: color (background, link, text), typography (fontSize, lineHeight), html, reusable
  • Attributes: label, linkLabel, showTitle, textAlign, type

Post Template

Contains the block elements used to render a post, like the title, date, featured image, content or excerpt, and more. (Source)

  • Name: core/post-template
  • Category: theme
  • Supports: align, typography (fontSize, lineHeight), html, reusable
  • Attributes:

Post Terms

Post terms. (Source)

  • Name: core/post-terms
  • Category: theme
  • Supports: color (background, gradients, link, text), typography (fontSize, lineHeight), html
  • Attributes: prefix, separator, suffix, term, textAlign

Post Title

Displays the title of a post, page, or any other content-type. (Source)

  • Name: core/post-title
  • Category: theme
  • Supports: align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isLink, level, linkTarget, rel, textAlign

Preformatted

Add text that respects your spacing and tabs, and also allows styling. (Source)

  • Name: core/preformatted
  • Category: text
  • Supports: anchor, color (background, gradients, text), typography (fontSize, lineHeight)
  • Attributes: content

Pullquote

Give special visual emphasis to a quote from your text. (Source)

  • Name: core/pullquote
  • Category: text
  • Supports: align (full, left, right, wide), anchor, color (background, gradients, link, text), typography (fontSize, lineHeight)
  • Attributes: citation, textAlign, value

Query Loop

An advanced block that allows displaying post types based on different query parameters and visual configurations. (Source)

  • Name: core/query
  • Category: theme
  • Supports: align (full, wide), color (background, gradients, link, text), html
  • Attributes: displayLayout, query, queryId, tagName

No results

Contains the block elements used to render content when no query results are found. (Source)

  • Name: core/query-no-results
  • Category: theme
  • Supports: align, color (background, gradients, link, text), typography (fontSize, lineHeight), html, reusable
  • Attributes:

Pagination

Displays a paginated navigation to next/previous set of posts, when applicable. (Source)

  • Name: core/query-pagination
  • Category: theme
  • Supports: align, color (background, gradients, link, text), typography (fontSize, lineHeight), html, reusable
  • Attributes: paginationArrow

Next Page

Displays the next posts page link. (Source)

  • Name: core/query-pagination-next
  • Category: theme
  • Supports: color (background, gradients, text), typography (fontSize, lineHeight), html, reusable
  • Attributes: label

Page Numbers

Displays a list of page numbers for pagination (Source)

  • Name: core/query-pagination-numbers
  • Category: theme
  • Supports: color (background, gradients, text), typography (fontSize, lineHeight), html, reusable
  • Attributes:

Previous Page

Displays the previous posts page link. (Source)

  • Name: core/query-pagination-previous
  • Category: theme
  • Supports: color (background, gradients, text), typography (fontSize, lineHeight), html, reusable
  • Attributes: label

Query Title

Display the query title. (Source)

  • Name: core/query-title
  • Category: theme
  • Supports: align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: level, showPrefix, showSearchTerm, textAlign, type

Quote

Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar (Source)

  • Name: core/quote
  • Category: text
  • Supports: anchor, color (background, gradients, link, text), typography (fontSize, lineHeight)
  • Attributes: align, citation, value

Read More

Displays the link of a post, page, or any other content-type. (Source)

  • Name: core/read-more
  • Category: theme
  • Supports: color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: content, linkTarget

RSS

Display entries from any RSS or Atom feed. (Source)

  • Name: core/rss
  • Category: widgets
  • Supports: align, html
  • Attributes: blockLayout, columns, displayAuthor, displayDate, displayExcerpt, excerptLength, feedURL, itemsToShow

Search

Help visitors find your content. (Source)

  • Name: core/search
  • Category: widgets
  • Supports: align (center, left, right), color (background, gradients, text), html
  • Attributes: buttonPosition, buttonText, buttonUseIcon, label, placeholder, query, showLabel, width, widthUnit

Separator

Create a break between ideas or sections with a horizontal separator. (Source)

  • Name: core/separator
  • Category: design
  • Supports: align (center, full, wide), anchor, color (background, gradients, enableContrastChecker, text), spacing (margin)
  • Attributes: opacity

Shortcode

Insert additional custom elements with a WordPress shortcode. (Source)

  • Name: core/shortcode
  • Category: widgets
  • Supports: className, customClassName, html
  • Attributes: text

Site Logo

Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site. (Source)

  • Name: core/site-logo
  • Category: theme
  • Supports: align, color (background, text), spacing (margin, padding), alignWide, html
  • Attributes: isLink, linkTarget, shouldSyncIcon, width

Site Tagline

Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it's not displayed in the theme design. (Source)

  • Name: core/site-tagline
  • Category: theme
  • Supports: align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Site Title

Displays the name of this site. Update the block, and the changes apply everywhere it’s used. This will also appear in the browser title bar and in search results. (Source)

  • Name: core/site-title
  • Category: theme
  • Supports: align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isLink, level, linkTarget, textAlign

Social Icon

Display an icon linking to a social media profile or site. (Source)

  • Name: core/social-link
  • Category: widgets
  • Supports: html, reusable
  • Attributes: label, service, url

Social Icons

Display icons linking to your social media profiles or sites. (Source)

  • Name: core/social-links
  • Category: widgets
  • Supports: align (center, left, right), anchor, color (background, gradients, enableContrastChecker, text), spacing (blockGap, margin, padding, units)
  • Attributes: customIconBackgroundColor, customIconColor, iconBackgroundColor, iconBackgroundColorValue, iconColor, iconColorValue, openInNewTab, showLabels, size

Spacer

Add white space between blocks and customize its height. (Source)

  • Name: core/spacer
  • Category: design
  • Supports: anchor, spacing (margin)
  • Attributes: height, width

Table

Create structured content in rows and columns to display information. (Source)

  • Name: core/table
  • Category: text
  • Supports: align, anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight)
  • Attributes: body, caption, foot, hasFixedLayout, head

Table of Contents

Summarize your post with a list of headings. Add HTML anchors to Heading blocks to link them here. (Source)

  • Name: core/table-of-contents
  • Category: layout
  • Supports: color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: headings, onlyIncludeCurrentPage

Tag Cloud

A cloud of your most used tags. (Source)

  • Name: core/tag-cloud
  • Category: widgets
  • Supports: align, spacing (margin, padding), html
  • Attributes: largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy

Template Part

Edit the different global regions of your site, like the header, footer, sidebar, or create your own. (Source)

  • Name: core/template-part
  • Category: theme
  • Supports: align, html, reusable
  • Attributes: area, slug, tagName, theme

Term Description

Display the description of categories, tags and custom taxonomies when viewing an archive. (Source)

  • Name: core/term-description
  • Category: theme
  • Supports: align (full, wide), color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Text Columns (deprecated)

This block is deprecated. Please use the Columns block instead. (Source)

  • Name: core/text-columns
  • Category: design
  • Supports: inserter
  • Attributes: columns, content, width

Verse

Insert poetry. Use special spacing formats. Or quote song lyrics. (Source)

  • Name: core/verse
  • Category: text
  • Supports: anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
  • Attributes: content, textAlign

Video

Embed a video from your media library or upload a new one. (Source)

  • Name: core/video
  • Category: media
  • Supports: align, anchor, spacing (margin, padding)
  • Attributes: autoplay, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks