Which Gutenberg blocks support wide and full width alignment?
Wide and full width alignment make a block go outside the normal content width. A block supports it through its supports.align setting. We can ask the block registry of WordPress 7.1 for the real list:
$wide_full = array();
foreach ( WP_Block_Type_Registry::get_instance()->get_all_registered() as $name => $block ) {
$align = $block->supports['align'] ?? null;
if ( $align === true ) {
$wide_full[] = $name; // true means all alignments
} elseif ( is_array( $align ) && in_array( 'wide', $align, true ) && in_array( 'full', $align, true ) ) {
$wide_full[] = $name;
}
}
sort( $wide_full );
echo count( $wide_full ) . " blocks support both wide and full:\n" . wordwrap( implode( ', ', $wide_full ), 90, "\n" );
53 blocks support both wide and full:
core/accordion, core/archives, core/audio, core/avatar, core/breadcrumbs, core/buttons,
core/calendar, core/categories, core/columns, core/comment-template, core/comments,
core/comments-pagination, core/comments-title, core/cover, core/details, core/embed,
core/file, core/gallery, core/group, core/heading, core/image, core/latest-comments,
core/latest-posts, core/media-text, core/navigation, core/paragraph, core/playlist,
core/post-comments, core/post-content, core/post-featured-image, core/post-template,
core/post-title, core/pullquote, core/query, core/query-no-results, core/query-pagination,
core/query-title, core/query-total, core/quote, core/rss, core/separator, core/site-logo,
core/site-tagline, core/site-title, core/table, core/tabs, core/tag-cloud,
core/template-part, core/term-description, core/term-name, core/term-template,
core/terms-query, core/video
The list includes Image, Gallery, Cover, Group, Columns, Heading, Paragraph, Table, Video, Quote, Query Loop and the Navigation block. The list changes in new versions of WordPress, so use the code above to see the list of your own site.
The theme must allow it
For a block theme wide and full alignment are on by default. A classic theme must turn it on:
add_theme_support( 'align-wide' );The width of the “wide” area comes from layout.wideSize in theme.json. See Block Themes and theme.json.
| Tutorials |
|---|
| No Content Found. |
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |