{"id":23,"date":"2022-07-06T13:15:57","date_gmt":"2022-07-06T20:15:57","guid":{"rendered":"http:\/\/pitchfork-docs.test\/?post_type=pitchfork-docs&#038;p=23"},"modified":"2024-05-24T15:46:49","modified_gmt":"2024-05-24T22:46:49","slug":"column-block","status":"publish","type":"pitchfork-docs","link":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/","title":{"rendered":"Columns \/ Column"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"options\">Block Options<\/h2>\n\n\n\n<p>When you initially select a column block from the block picker, you are prompted to select a common layout for your set of columns on the page. Choose one of the options from the icon row or select &#8220;skip&#8221; to roll your own layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-uds-figure\"><img decoding=\"async\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2022\/07\/column-layout-picker-1024x363.png\" alt=\"Screen capture of the block editor displaying the default selections for the column block.\" class=\"wp-image-28\" width=\"400\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2022\/07\/column-layout-picker-1024x363.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2022\/07\/column-layout-picker-300x106.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2022\/07\/column-layout-picker-768x273.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2022\/07\/column-layout-picker.png 1172w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The column &#8220;block&#8221; is actually a group of nested blocks called <code>core\/columns<\/code> and <code>core\/column<\/code> respectively. Each of these two block types has its own options, so it&#8217;s important to know how to select the correct block to reveal the appropriate block options.<\/p>\n\n\n\n<p>The easiest way to select the correct block is to use the <strong>List View <\/strong>panel, available in the top toolbar. From there, you can easily distinguish between the individual column blocks and the parent &#8220;columns&#8221; block wrapper. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-uds-figure\"><img decoding=\"async\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2022\/07\/list-view-toolbar.png\" alt=\"Screen capture of the block editor displaying the control for the list view panel.\" class=\"wp-image-31\" width=\"400\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2022\/07\/list-view-toolbar.png 690w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2022\/07\/list-view-toolbar-300x276.png 300w\" sizes=\"(max-width: 690px) 100vw, 690px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"column-wrapper\">The &#8220;columns&#8221; block<\/h2>\n\n\n\n<p>The columns container block contains settings to quickly adjust the number of columns in the layout and to toggle the column&#8217;s ability to stack on a mobile device. <\/p>\n\n\n\n<ul class=\"is-style-default wp-block-list\"><li>Adjusting the slider for the number of columns in a group will adjust all child columns to an equal width. This can effectively &#8220;wipe out&#8221; other custom widths for columns that you may have set up previously, so be careful. <\/li><li>When enabled, the &#8220;stack on mobile&#8221; feature will stack the columns from left to right. <\/li><\/ul>\n\n\n<div class=\"wp-block-alert alert is-style-alert-info\"><div class=\"alert-icon\"><span class=\"fas fa-check-circle\"><\/span><\/div><div class=\"alert-content\"><div class=\"acf-innerblocks-container\">\n\n<p>Future versions of the block editor may introduce options to reverse-stack columns as needed. See the discussion at <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/40706\">https:\/\/github.com\/WordPress\/gutenberg\/issues\/40706<\/a> for more details.<\/p>\n\n\n\n<p>Until that improvement lands in a future version of WordPress, it is still possible to control the order of the column stacking with CSS and applied custom classes to the parent element. <\/p>\n\n<\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"column\">Individual &#8220;columns&#8221; <\/h2>\n\n\n\n<p>Controls for the width of an individual column are found within the nested column blocks within the parent &#8220;container.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-uds-figure\"><img decoding=\"async\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2022\/07\/column-width-settings.png\" alt=\"Screen capture of the block editor displaying the column width settings control.\" class=\"wp-image-29\" width=\"400\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2022\/07\/column-width-settings.png 556w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2022\/07\/column-width-settings-300x101.png 300w\" sizes=\"(max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<p>The width of each column can be set as a percentage of the &#8220;whole&#8221; width of the column set. You can be as precise as you want to be in declaring the value, but for ease of use try setting things in multiples of 5% or greater.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>There&#8217;s no practical difference between 51.47% and 50% in terms of the design<\/li><li>But, the 1.47% difference may cause the columns to misbehave at certain viewport widths.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"padding\">Padding and Spacing<\/h2>\n\n\n\n<p>Things to keep in mind when adjusting the padding of a set of columns:<\/p>\n\n\n\n<p><strong>DO: Adjust the padding on the container block to &#8220;inset&#8221; a column layout as needed.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The padding measurements on the parent &#8220;columns&#8221; block uses <code>rem<\/code> to make the creation of an &#8220;offset&#8221; space easier. <\/li><\/ul>\n\n\n\n<p><strong>DON&#8217;T: Add padding to an individual column<\/strong>. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It will increase the width of the column as opposed to constraining the text within the column with some additional space. <\/li><li>If you need your columns to have some additional space, use a group block within the column to provide an additional wrapper for your column content.<\/li><\/ul>\n\n\n\n<p><strong>DON&#8217;T: Use background colors on the &#8220;parent&#8221; columns container block.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Instead, check out the UDS Background Section block for a better way to add a background color or texture to a section on your page.<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">Placing your content into columns is usually the key to producing a well-organized web page.<\/p>\n","protected":false},"parent":0,"menu_order":12,"template":"","pitchfork-docs-category":[3],"class_list":["post-23","pitchfork-docs","type-pitchfork-docs","status-publish","hentry","pitchfork-docs-category-core-blocks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Columns \/ Column - Pitchfork Theme for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Columns \/ Column - Pitchfork Theme for WordPress\" \/>\n<meta property=\"og:description\" content=\"Placing your content into columns is usually the key to producing a well-organized web page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchfork Theme for WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-24T22:46:49+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/pitchfork-docs.test\/wp-content\/uploads\/2022\/07\/image-2-1024x363.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/column-block\\\/\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/column-block\\\/\",\"name\":\"Columns \\\/ Column - Pitchfork Theme for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/column-block\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/column-block\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2022\\\/07\\\/column-layout-picker-1024x363.png\",\"datePublished\":\"2022-07-06T20:15:57+00:00\",\"dateModified\":\"2024-05-24T22:46:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/column-block\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/column-block\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/column-block\\\/#primaryimage\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2022\\\/07\\\/column-layout-picker-1024x363.png\",\"contentUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2022\\\/07\\\/column-layout-picker-1024x363.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/column-block\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documents\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Column Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\",\"name\":\"Pitchfork Theme for WordPress\",\"description\":\"an ASU Engineering theme for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Columns \/ Column - Pitchfork Theme for WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/","og_locale":"en_US","og_type":"article","og_title":"Columns \/ Column - Pitchfork Theme for WordPress","og_description":"Placing your content into columns is usually the key to producing a well-organized web page.","og_url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/","og_site_name":"Pitchfork Theme for WordPress","article_modified_time":"2024-05-24T22:46:49+00:00","og_image":[{"url":"http:\/\/pitchfork-docs.test\/wp-content\/uploads\/2022\/07\/image-2-1024x363.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/","name":"Columns \/ Column - Pitchfork Theme for WordPress","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website"},"primaryImageOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/#primaryimage"},"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2022\/07\/column-layout-picker-1024x363.png","datePublished":"2022-07-06T20:15:57+00:00","dateModified":"2024-05-24T22:46:49+00:00","breadcrumb":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/#primaryimage","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2022\/07\/column-layout-picker-1024x363.png","contentUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2022\/07\/column-layout-picker-1024x363.png"},{"@type":"BreadcrumbList","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/column-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/"},{"@type":"ListItem","position":2,"name":"Documents","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/"},{"@type":"ListItem","position":3,"name":"Column Block"}]},{"@type":"WebSite","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/","name":"Pitchfork Theme for WordPress","description":"an ASU Engineering theme for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs"}],"about":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/types\/pitchfork-docs"}],"wp:attachment":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"pitchfork-docs-category","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs-category?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}