Block Editor Support in Existing Default Themes

Welcome!

The WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:

Found a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.? Create a ticket in the bug tracker.

Want to contribute? Get started quickly with tickets marked as good first bugs for new contributors or join a bug scrub. There’s more on the reports page, like patches needing testing, and on feature projects page.

Other questions? Here is a detailed handbook for contributors, complete with tutorials.

The default WordPress themes are a great way for even the most novice of site owners to quickly get up and running with a WordPress site that speaks their unique message. WordPress 5.0 will ship with the brand new Twenty Nineteen theme that fully showcases everything the new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based editor has to offer. But, what if you aren’t ready to abandon your site’s current default theme?

New versions of all default WordPress themes will ship at the same time as WordPress 5.0 with full block editor support. For each theme:

Front-end and editor styles have been added for the new block-based editor.
Editor color palettes have been added based on the theme’s existing color settings. To best mesh with its accent color picker, Twenty Seventeen uses the block based editor’s default color palette.
In Twenty Thirteen, support has been added for wide alignments — they will be applied when no sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. is present.

If default themes are not updated, they will still work with WordPress 5.0, but the editor may not accurately reflect how the post or page will look to users. As always, you are strongly encouraged to always run the latest version of all themes. Below are the versions of each default theme that add full block editor support:

Twenty Seventeen: 1.8
Twenty Sixteen: 1.6
Twenty Fifteen: 2.1
Twenty Fourteen: 2.3
Twenty Thirteen: 2.5
Twenty Twelve: 2.6
Twenty Eleven: 2.9
Twenty Ten: 2.6

#5-0, #dev-notes

.site-content-contain { overflow-x: hidden; } .alignwide { margin-left: calc(25% - 25vw); margin-right: calc(25% - 25vw); width: auto; max-width: 1200px; } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: auto; } .wp-block-image.alignfull { max-width: 1000%; }

Christopher S. Nawojczyk 7:45 pm on January 14, 2019

Concerning wide and full-width alignment with blocks, I noticed on Twenty Nineteen the option for ‘full-width’ columns or images exist. However, on Twenty Seventeen there is not.

I understand we can add ‘support’ for these additional features in functions.php. For example, I placed the following call in order to add this feature:

[code]
add_theme_support( ‘align-wide’ );/code]

Followed by something like this in style.css:

[code].entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}

@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}

.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}

.entry-content .wp-blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}/code]

I placed these in functions.php and style.css, respectively, for my Twenty Seventeen child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/.. The option appeared to the make blocks full-width, but they would not display any wider than the max-width of my container. I have tweaked my theme’s width to 1300px—the blocks will not extend to full page as on Twenty Nineteen, despite the option appearing.

Thanks.
- laurelfulford 5:36 pm on January 16, 2019
  The exact CSSCSS Cascading Style Sheets. needed for the wide and full alignments can vary from theme to theme — I’ve found this is especially true for themes built before the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor was released, like Twenty Seventeen!
  
  Something like this should get the basic wide and full styles in place, though adjustments will definitely be needed to make sure it works as expected throughout the theme (especially in cases like the blogblog (versus network, site) posts page, or when there is a sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. present). Hopefully it helps as a starting point, though!
```
.site-content-contain {
	overflow-x: hidden;
}

.alignwide {
	margin-left: calc(25% - 25vw);
	margin-right: calc(25% - 25vw);
	width: auto;
	max-width: 1200px;
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
}

.wp-block-image.alignfull {
	max-width: 1000%;
}
```
mybola 1:43 pm on February 5, 2019

my Theme not support shortlink and trailling slash

Comments are closed.

Welcome!

Communication

Share this: