{"id":3815,"date":"2024-08-04T20:53:42","date_gmt":"2024-08-04T19:53:42","guid":{"rendered":"https:\/\/simongarrett.uk\/simon\/?page_id=3815"},"modified":"2025-06-29T18:38:23","modified_gmt":"2025-06-29T17:38:23","slug":"wordpress-content-width-and-alignment","status":"publish","type":"page","link":"https:\/\/simongarrett.uk\/simon\/wordpress-block-editor-good-but-needs-work\/wordpress-content-width-and-alignment\/","title":{"rendered":"WordPress content width and alignment &#8211; lack of documentation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">WordPress content width and alignment \u2013 lack of documentation<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>17th August 2024<\/em><br><em>Rev 24<sup>th<\/sup> October 2024<br>Rev 29<sup>th<\/sup> June 2025 (minor clarification)<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>From <\/em><a href=\"https:\/\/simongarrett.uk\/simon\/wordpress-block-editor-good-but-needs-work\/wordpress-content-width-and-alignment\/\"><em>https:\/\/simongarrett.uk\/simon\/wordpress-block-editor-good-but-needs-work\/wordpress-content-width-and-alignment\/<\/em><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress Block Themes and Full Site Editing greatly increase the power and flexibility for the user.&nbsp; The architecture has been evolving rapidly, and there are a few rough edges, which is perhaps to be expected.&nbsp; In some cases documentation has not always kept pace.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, documentation of block width and block alignment is incomplete and sometimes misleading.&nbsp; Forum posts include numerous posts asking about apparently bizarre misalignment between different blocks. Answers are sometimes incomplete, offer CSS hacks or are just plain wrong, but almost never explain what\u2019s actually happening.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019ve written below about block width and alignment where the existing documentation is incomplete to the point of (in my view) being misleading.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What is needed is a better overview documentation (on <a href=\"https:\/\/wordpress.org\/\">https:\/\/wordpress.org\/<\/a>) of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the three widths available to blocks, how they are defined and inherited<\/li>\n\n\n\n<li>how the Align parameter works, as it combines multiple functions<\/li>\n\n\n\n<li>the Layout parameter in container blocks, and the full impact it has on inner blocks<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Worked examples should be included.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a>Summary<\/a><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are generally three possible widths a block may occupy: Content (width), Wide (width), and Container width.&nbsp; The latter is defaulted and set quite differently to the first two.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content and Wide widths for blocks<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The global default for Content and Wide widths are set in theme.json<\/li>\n\n\n\n<li>Default can be overridden globally in Styles book -> Layout<\/li>\n\n\n\n<li>Can never be larger than the block\u2019s container width, and Content can\u2019t be greater than Wide.\u00a0<\/li>\n\n\n\n<li>Can be set locally in the block\u2019s container block:<ul><li>If the container block\u2019s Layout -> \u201cInner blocks use content width\u201d param is on:<ul><li>If the associated params are left blank then the global values are used (which could be larger or smaller than the values in an outer block, and visible size might be reduced by padding \/ margin \/ block spacing).<\/li><\/ul><ul><li>If the associated params are set, these values are used (again, can be larger or smaller than the values in an outer block, but not larger than the container width)<\/li><\/ul><\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>If the container block\u2019s Layout -> \u201cInner blocks use content width\u201d param is off, then Content and Wide are set to the container width (and the block will not allow width to be set in the Align param).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Container width of a container block<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can\u2019t be greater than the parent container width<\/li>\n\n\n\n<li>If the parent container\u2019s Layout -> \u201cInner blocks use content width\u201d param is on:<ul><li>The container will have an Align parameter, and can set container width to \u201cNone\u201d aka Content width (this is the default), \u201cWide\u201d or \u201cFull width\u201d width set by parent container.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>NB the Content and Wide values are those set or implied by the parent\u2019s Layout -> Inner blocks use content width param, not the global values.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>If the parent\u2019s Layout -> \u201cInner blocks use content width\u201d param is off then the container block has container width set to the parent\u2019s container width (and the local default Content and Wide are also set to parent container width).\u00a0 In this case the container block won\u2019t have an Align param (or if present, it won\u2019t allow container width to be set).\u00a0\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">In detail \u2013 Widths and alignment<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Block width(s)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There are three defined widths that most blocks can use, depending on the context:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201cContent\u201d, confusingly described in settings as \u201cNone\u201d<\/li>\n\n\n\n<li>\u201cWide\u201d<\/li>\n\n\n\n<li>\u201cContainer width\u201d, also referred to as \u201cfull width\u201d in settings<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In any block, Wide width can\u2019t be greater than Container width, Content width can\u2019t be greater than Wide width.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paragraph blocks use only Content width, but many blocks can use all three, selected by the Align setting on the toolbar for the block.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Both \u201cContent\u201d and \u201cWide\u201d are described in documentation, but \u201cContainer width\u201d is little mentioned in the same context.&nbsp; In addition, Container width is set and inherited rather differently from the other two.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Content and Wide widths<\/em><\/strong> default to the setting by the theme (for block themes in themes.json, but can be overridden in Styles -&gt; Layout).&nbsp; They can be set in individual container blocks in Layout settings if \u201c<strong><em>Inner blocks use content width<\/em><\/strong>\u201d is checked (on).&nbsp; Content and Wide can be larger or smaller in a child container than in the parent container, but never larger than the Container width.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That is, the actual setting of Content and Wide widths depends on whether the Layout parameter \u201c<strong><em>Inner blocks use content width<\/em><\/strong>\u201d is \u201con\u201d in the parent container, and whether width numbers are given in the Layout parameter (or left blank).&nbsp; <em>If it is \u201coff\u201d, then both Content and Wide width are set to the parent container width, not the theme.json values<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Container width<\/em><\/strong> typically starts (at the outermost container block in the template) at full width of the browser (or phone) window.&nbsp; For any child container (or grand child etc), the container inherits the container width of its parent, but can override that by the Align setting in the toolbar.&nbsp; Precise behaviour depends on whether the Layout parameter \u201cInner blocks use content width\u201d is \u201con\u201d in the container\u2019s parent container (note: the container\u2019s parent, not the container itself).&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If \u201cInner blocks use content width\u201d is \u201coff\u201d in the parent container, then the container itself does not have an Align setting, and the container inherits the parent\u2019s container width (and defaults Content and Wide widths set to container width as well). Note that although it can\u2019t alter the <em>container<\/em> width passed down to child blocks, it <em>can<\/em> alter the <em>Content<\/em> and <em>Wide<\/em> widths passed down to child blocks by setting \u201cInner blocks use content width\u201d to \u201con\u201d in the container block itself (not its parent container).<\/li>\n\n\n\n<li>If \u201cInner blocks use content width\u201d is \u201con\u201d in the container\u2019s parent container, then the container width in a container block (Group, Row, Stack, Columns etc) is set by the container\u2019s Align setting in the toolbar. It can also alter the Content and Wide width by setting \u201cInner blocks use content width\u201d to \u201con\u201d, just as in the previous paragraph, but not to values greater than the chosen container width.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If \u201cInner blocks use content width\u201d is \u201con\u201d in the container\u2019s parent container, then the container\u2019s toolbar will have an Align setting to set the container\u2019s container width, and the choice is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201cNone\u201d (which means use the inherited Content width). <strong><em>This is the default.<\/em><\/strong><\/li>\n\n\n\n<li>\u201cWide\u201d (as inherited).<\/li>\n\n\n\n<li>\u201cFull width\u201d (which means the inherited container width).\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This means that in any container, the container width can be the same as or smaller than the parent container (but not larger, logically enough).&nbsp; Note that this is different to the options for Content and Wide widths, which can be larger than the parent\u2019s settings.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note that the default setting in the Align setting in a container block is \u201cNone\u201d, that is: use inherited Content width for Container width.&nbsp; <strong><em>This means that the default for any new container is that the Container width, Content width and Wide width are all the same, taking the value of the inherited Content width.<\/em><\/strong>&nbsp; I\u2019ve emphasised this because, although this default is probably the most useful choice, it\u2019s also probably not what one would expect!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember also that it depends on the setting of \u201cInner blocks use content width\u201d in the container\u2019s parent container. This means that container width seen by (for example) an image block may depend not only on the image block\u2019s parent container, but parent container\u2019s parent container!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u201cInner blocks use content width\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This setting is in the Layout section of most container blocks, and it\u2019s crucial to the content and wide widths available to inner blocks:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>On: <\/em><\/strong>nested blocks use content width (and wide width) either from default values (in a block theme from theme.json unless altered in Dashboard -&gt; Appearance -&gt; Editor -&gt; Styles -&gt; Layout) or with the settings that appear under \u201cInner blocks use content width\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Off:<\/em><\/strong> nested blocks will fill the width of this container.&nbsp; That is, Content and Wide widths are the same as the inherited container width.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The container width inherited by inner blocks depends on the setting of the container block\u2019s Align parameter, if it has one (it won\u2019t if its parent has its \u201cInner blocks use content width\u201d off.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Align setting<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Many blocks have an \u201cAlign\u201d setting on the toolbar.&nbsp; This setting is heavily overloaded, and is used for multiple purposes, depending on the block, including:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To set the block width.\u00a0 Choices are usually \u201cContent width\u201d (confusingly described as \u201cNone\u201d), \u201cWide\u201d or \u201cFull-width\u201d (meaning: container width).<\/li>\n\n\n\n<li>To set alignment within the block width (e.g. left, right or centre). This is what the Paragraph block uses the Align setting for.<\/li>\n\n\n\n<li>To turn on or off image stretch (e.g. normal size or stretched to fill the width)<\/li>\n\n\n\n<li>To turn on or off text wrap around an image<\/li>\n\n\n\n<li>In Container blocks, to set Container width.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">In some blocks, different uses are combined.&nbsp; For example, in the Image block, when you choose \u201cAlign Left\u201d, it does three things: it aligns the image to the left, it wraps text around the image, and it also sets the width to Container width instead of Content width.&nbsp; The last point is not documented.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The other surprise: the \u201cAlign\u201d setting isn\u2019t always present in the block toolbar, or if present some of the options may not always appear. &nbsp;If a container block\u2019s parent container has \u201cInner blocks use content width\u201d turned off, then the container cannot alter its width and may not have the Align setting. &nbsp;Similarly, for any block type, if the Content width is the same as container width (e.g. if the innermost containing block has \u201cInner blocks use content width\u201d turned off), then any Align options to alter width won\u2019t show, and if there are no other Align options then the Align setting doesn\u2019t appear.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example of potential user confusion from lack of comprehensive documentation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The ambiguity of the Align setting and its poor documentation, and the lack of complete descriptions of how Container width is set and inherited, lead to surprising behaviour at times.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An example of this is when trying to align Image blocks with Paragraph blocks.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Many themes such as Twenty Twenty-Four have a default Content width significantly narrower than typical browser window size (except on a phone).&nbsp; For Twenty Twenty-Four, the default Content width is 620 pixels. This means that a column of text in a Paragraph block (which always uses Content width) is often relatively narrow within the browser window.&nbsp; Place an image next to a Paragraph block, and at default settings it too uses Content width, so aligns with text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s an example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But change the image to \u201cAlign left\u201d, which makes the text wrap around the image, and the image whizzes off to the left of the screen!&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Why?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Google for an explanation, and you find answers suggest putting a Group block around the image.&nbsp; Do this and the image now aligns with the text:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But why?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The reason is that the Image block uses Content width by default (and aligns with a Paragraph block, which always uses Content width).&nbsp; However, when you select \u201cAlign left\u201d in the Image block, it not only aligns left and wraps text around the image, but also changes the width from Content width to Container width.&nbsp; In many themes I\u2019ve tried, the outermost block on the page inherits a Container width set to full width of the browser window, so the image moves to the left of the window.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new Group block, and at default settings, the new Group block sets the Container width to the same as Content width (as explained above).&nbsp; When you put the image inside it, with \u201cAlign left\u201d it uses the Container width, which is now the same as Content width, which is also used by a paragraph block.&nbsp; Now the image aligns with the text.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This behaviour \u2013 images with \u201cAlign left\u201d aligning with text only if Content width is the same as Container width, and why this happens automatically when a child Group block is created \u2013 is not documented anywhere I can find on wordpress.org.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress content width and alignment \u2013 lack of documentation 17th August 2024Rev 24th October 2024Rev 29th June 2025 (minor clarification) From https:\/\/simongarrett.uk\/simon\/wordpress-block-editor-good-but-needs-work\/wordpress-content-width-and-alignment\/ WordPress Block Themes and Full Site Editing greatly increase the power and flexibility for the user.&nbsp; The architecture has been evolving rapidly, and there are a few rough edges, which is perhaps to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":557,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-3815","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/pages\/3815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/comments?post=3815"}],"version-history":[{"count":24,"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/pages\/3815\/revisions"}],"predecessor-version":[{"id":3919,"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/pages\/3815\/revisions\/3919"}],"up":[{"embeddable":true,"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/pages\/557"}],"wp:attachment":[{"href":"https:\/\/simongarrett.uk\/simon\/wp-json\/wp\/v2\/media?parent=3815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}