Update your plugins (Universal Border Box Sizing and Widget padding)

The new Twenty Thirteen theme now has universal box sizing and adds padding to the widget. These are major changes from past WordPress themes and you may need to update your plugin!

What is Box Sizing?
———————————

The normal default content box-sizing means that ‘width’ is defined as the content width. That is if you define a width (ie width,max-width,min-width) then padding and borders are added to that width to determine the box size.

For border box-sizing padding and borders are subtracted from the given width.

What is Universal Border Box Sizing?
—————————————————-

This simply means the universal selector ‘*’ is used to define border box sizing for the entire web page produced by the Twenty Thirteen theme as follows in it’s style.css.

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

Advantages of Universal Border Box Sizing?
————————————————————–

Border Box Sizing is more intuitive and actually is the way the initial versions of Internet Explorer worked (and still do in Quirks mode).

Disadvantages of Universal Border Box Sizing?
——————————————————————

1) IE7 and earlier don’t implement the box-sizing property.

2) IE8 treats min-width and max-width as content box widths regardless of box sizing setting.

3) All WordPress included themes and most other third party themes before Twenty Thirteen have used the default content box sizing. At the moment there are four known third party themes (of which Montezuma is the most known) that have recently begun to use universal border box-sizng. The problem here is that almost all current plugins only cater for the default content box-sizing model and using border box sizing may break these plugins.

Widget padding
———————-

The Twenty Thirteen theme also adds padding to the widget class.This hasn’t been done in past WordPress included theme releases (nor in any third party theme that I have seen).

Again most current plugins have assumed that the entirety of the widget area is theirs which is no longer the case.

How do plugin problems in this area express themselves
——————————————————————————

Formatting of content and widgets may not be what is desired. At the worse content could disappear. Such problems may not appear till bounds are exceeded. The source of these formatting problems are not readily apparent and it took me a day to realize this was the problem for a particular plugin I was testing.

What you need to do to update your plugin
———————————————————-

You need to update your plugin to account for the following:

1) The inclusion or absence of universal border box sizing to account for all themes.

2) The differences in the ways various versions of Internet Explorer implement box-sizing.

3) You must allow for the theme providing padding for the widget.

The above needs to be provided by a mixture of Javascript, CSS, and IE specific stylesheets.

Where was this change discussed?
————————————————

This issue was discussed in length in the following Trac post.

http://core.trac.wordpress.org/ticket/24306

This forum post is a response to inaction by the WordPress Twenty Thirteen theme developers in publicizing the need to update plugins in order to cope with this change. This was expressively urged by celloexpressions and myself in this Trac more than two weeks ago.