{"id":5267,"date":"2023-05-30T12:07:08","date_gmt":"2023-05-30T18:07:08","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=5267"},"modified":"2023-12-13T10:56:44","modified_gmt":"2023-12-13T16:56:44","slug":"responsive-wordpress-websites","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/","title":{"rendered":"Intrinsic Design: Building Responsive WordPress Websites"},"content":{"rendered":"\n<p>The digital world is a diverse, rapidly changing environment with many devices, user needs, and interaction modes. Therefore, creating adaptable, versatile, and genuinely responsive websites is imperative.<\/p>\n\n\n\n<p>Though it has taken several years to get to where we are, the WordPress block editor is a substantial upgrade from the classic editor. It has become a powerful tool for designers and developers, and the ongoing improvements will make it even more indispensable.<\/p>\n\n\n\n<p>In this article, we\u2019ll explore a new philosophy called Intrinsic Web Design and demonstrate how to use capabilities currently available in the WordPress block editor to build modular and flexible websites.<\/p>\n\n\n\n<p><em><em>Feel free to watch the video version of this article or continue reading.<\/em><\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Intrinsic Design: Building Responsive WordPress Websites\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ZXJJgxJ_h7o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-2a9f3359 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-large-font-size\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#intrinsic-design\">What is Intrinsic Web Design?<\/a><\/li>\n\n\n\n<li><a href=\"#wordpress\">Intrinsic Design and WordPress<\/a><\/li>\n\n\n\n<li><a href=\"#fluid-spacing\">Fluid Spacing<\/a><\/li>\n\n\n\n<li><a href=\"#fluid-typography\">Fluid Typography<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"intrinsic-design\">What is Intrinsic Web Design?<\/h2>\n\n\n\n<p>During her presentation,&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=jBwBACbRuGY\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Everything You Know About Web Design Just Changed<\/strong><\/a>&nbsp;at \u201cAn Event Apart,\u201d Jen Simmons introduced the concept of Intrinsic Web Design.<\/p>\n\n\n\n<p>She emphasized how new CSS tools, like Grid and Flexbox, are transforming web layouts, enabling more adaptable and responsive designs. This eye-opening talk challenged conventional web design practices, marking the dawn of a new design era. She says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cIntrinsic Web Design\u201d is a name that I gave to this new era because I think we\u2019re in a new era of layout design. We had this debate between fluid web design and fixed-width web design &#8230; and you didn\u2019t have to start over and define everything, and responsive was that kind of word. We need a new word for a new era where we can say, \u2018Oh, it\u2019s not that float-based thing where everything is set in widths using percentages. It\u2019s this new set of technologies.\u2019\u201d<\/em><\/p>\n<cite>\u2014Jen Simmons<\/cite><\/blockquote>\n\n\n\n<p>Intrinsic Web Design is a modern methodology that allows web content to naturally adapt to various screen sizes, from mobile to desktop. Rather than creating multiple designs for different devices, it leverages CSS grid and flexbox to resize and rearrange elements fluidly based on available space.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2076\" style=\"aspect-ratio: 2880 \/ 2076;\" width=\"2880\" controls src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-30-at-1.06.24-PM.mov\"><\/video><\/figure>\n\n\n\n<p>Intrinsic Web Design is similar to the dynamic fluidity of water adapting to various container shapes\u2014where the design dynamically modifies web content to suit any screen dimension.<\/p>\n\n\n\n<p>This method significantly enhances user interaction by offering consistent, device-agnostic accessibility. Furthermore, it represents an evolutionary step in web design, ushering in a new era of flexible, responsive layout systems in the digital sphere.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wordpress\" style=\"margin-top:40px\">Intrinsic Design and WordPress<\/h2>\n\n\n\n<p>While the WordPress block editor has evolved into an advanced design tool, some work still needs to be done. In the meantime, let\u2019s examine where we\u2019re at and how we can harness the available features to emulate Intrinsic Web Design, bringing us closer to this forward-thinking design approach.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Responsive WordPress: An Overview of Fluid Spacing\/Typography\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/iIMu3dcX94I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>In using the block editor, two features stand out. One is fluid spacing, which means our web page layout can change to fit different screens easily. The second is fluid typography. This feature makes the size of our text adjust to fit various screens, making sure it\u2019s easy to read no matter the device.<\/p>\n\n\n\n<p>Both of these features help make our websites user-friendly and good-looking, moving us towards a design style called Intrinsic Web Design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fluid-spacing\" style=\"margin-top:40px\">Fluid Spacing<a href=\"https:\/\/wpengine.com\/builders\/author\/brian-gardner\/\"><\/a><\/h2>\n\n\n\n<p>Leveraging capabilities added in WordPress 6.1, builders can quickly implement uniform spacing for blocks directly without hassle. This functionality includes preset values of padding, margin, and block gap.<\/p>\n\n\n\n<p><code>theme.json<\/code> now supports the definition of custom spacing steps, allowing these preset values to be accessible to users inside the editor.<\/p>\n\n\n\n<p>Like font size, <a href=\"https:\/\/frostwp.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Frost<\/a>&nbsp;utilizes the t-shirt naming convention (xSmall, Small, Medium, Large, xLarge) for spacing presets, providing a consistent user experience that is easy to understand. (<a href=\"https:\/\/frostwp.com\/styles\/fluid-spacing\/\">View a demo of fluid spacing<\/a>)<\/p>\n\n\n\n<p>Fluid spacing utilizes the clamp() CSS function to define three parameters: a minimum value, a preferred value, and a maximum allowed value. Then, fluid spacing is applied to four steps: Small, Medium, Large, and xLarge.<\/p>\n\n\n\n<p>Here is the code used to define spacing presets in <code>theme.json<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"settings\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"spacing\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"spacingScale\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">\"steps\"<\/span>: <span class=\"hljs-number\">0<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"spacingSizes\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"xSmall\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"size\"<\/span>: <span class=\"hljs-string\">\"20px\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"x-small\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Small\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"size\"<\/span>: <span class=\"hljs-string\">\"clamp(30px, 4vw, 40px)\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"small\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Medium\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"size\"<\/span>: <span class=\"hljs-string\">\"clamp(40px, 6vw, 60px)\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"medium\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Large\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"size\"<\/span>: <span class=\"hljs-string\">\"clamp(50px, 8vw, 80px)\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"large\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"xLarge\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"size\"<\/span>: <span class=\"hljs-string\">\"clamp(60px, 10vw, 100px)\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"x-large\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t]\n<\/span><\/span><span class='shcb-loc'><span>\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Below is what users see in the editor for blocks that support it. Each gray line represents a step set in the code above. The default value is 0; as you move the blue toggle to the right, an increase of 20px occurs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"480\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-spacing-presets.jpg\" alt=\"WordPress Block Spacing Presets\" class=\"has-border-color has-mirage-border-color wp-image-4908\" style=\"border-width:1px\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-spacing-presets.jpg 1200w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-spacing-presets-300x120.jpg 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-spacing-presets-1024x410.jpg 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-spacing-presets-768x307.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-254f1302 wp-block-group-is-layout-constrained\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p>By defining these spacing presets in <code>theme.json<\/code>, CSS variables are created, which are then used to style the blocks in which they are applied.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>--wp--preset--spacing--x-small: 20px;\n<\/span><\/span><span class='shcb-loc'><span>--wp--preset--spacing--small: clamp(30px, 4vw, 40px);\n<\/span><\/span><span class='shcb-loc'><span>--wp--preset--spacing--medium: clamp(40px, 6vw, 60px);\n<\/span><\/span><span class='shcb-loc'><span>--wp--preset--spacing--large: clamp(50px, 8vw, 80px);\n<\/span><\/span><span class='shcb-loc'><span>--wp--preset--spacing--x-large: clamp(60px, 10vw, 100px);\n<\/span><\/span><\/code><\/span><\/pre><\/div>\n\n\n\n<p><strong>Note:<\/strong> For blocks that support spacing presets, custom values can still be applied by clicking the <em>Set custom size<\/em> icon to the left of the <em>Unlink sides<\/em> icon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fluid-typography\" style=\"margin-top:40px\">Fluid Typography<\/h2>\n\n\n\n<p>Fluid typography is the dynamic adjustment of font sizes per variations in viewport width. This design approach facilitates a seamless transition of fonts between a set minimum and maximum size, fostering consistency and effective communication across various screen sizes.<\/p>\n\n\n\n<p>The pivotal role of fluid typography in WordPress, as well as in the larger world of web design, has several compelling considerations:<\/p>\n\n\n\n<p><strong>Improved readability<\/strong>: Fluid typography can enhance readability by allowing the font to adapt to the screen size. Text will be more prominent on large screens, where there is more space, and smaller on smaller screens, where space is at a premium.<\/p>\n\n\n\n<p><strong>Better user experience<\/strong>: Fluid typography can provide a better user experience by making content more accessible. A website that\u2019s easy to read on any device will be more user-friendly and inclusive, which could lead to longer visit durations and higher engagement rates.<\/p>\n\n\n\n<p><strong>Flexibility<\/strong>: Fluid typography provides a more flexible design than fixed-size typography. It enables the design to adapt more smoothly to various screen sizes, including future devices.<\/p>\n\n\n\n<p><strong>Less need for media queries<\/strong>: Traditional responsive design often requires numerous media queries to adjust font sizes at different breakpoints. Fluid typography allows you to use fewer media queries, leading to cleaner and more maintainable code.<\/p>\n\n\n\n<p>To understand how fluid typography works, let\u2019s explore the process of adding support for this dynamic feature within block-based themes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"enable-fluid-typography\" style=\"margin-top:40px\">How to Enable Fluid Typography<\/h3>\n\n\n\n<p>Adding support for fluid typography begins by enabling it in your theme configuration. In <code>theme.json<\/code>, you must specifically set \u201cfluid\u201d to true:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"settings\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"typography\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"fluid\"<\/span>: <span class=\"hljs-literal\">true<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Once fluid typography is activated, WordPress <a href=\"https:\/\/make.wordpress.org\/core\/2022\/10\/03\/fluid-font-sizes-in-wordpress-6-1\/\">leverages a specific calculation<\/a> to generate styles for all conventional font sizes automatically.<\/p>\n\n\n\n<p>For smaller font sizes set in <code>theme.json<\/code> that may not require resizing, you can disable fluid typography by setting \u201cfluid\u201d: false, as shown below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"settings\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"typography\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"fontSizes\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"fluid\"<\/span>: <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Small\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"size\"<\/span>: <span class=\"hljs-string\">\"18px\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"small\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t]\n<\/span><\/span><span class='shcb-loc'><span>\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>For larger sizes where a range of sizes that are fluid based on the viewport, a minimum <code>\"min\"<\/code> and maximum <code>\"max\"<\/code> value can be defined:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"settings\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"typography\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"fontSizes\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"fluid\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t\t<span class=\"hljs-attr\">\"min\"<\/span>: <span class=\"hljs-string\">\"20px\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t\t<span class=\"hljs-attr\">\"max\"<\/span>: <span class=\"hljs-string\">\"24px\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Large\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"size\"<\/span>: <span class=\"hljs-string\">\"24px\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"large\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t]\n<\/span><\/span><span class='shcb-loc'><span>\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>With fluid typography, WordPress employs a predetermined clamp() function calculation, which generates a comprehensive set of styles applied to all default font sizes, thus seamlessly automating the process of fluid typography implementation.<\/p>\n\n\n\n<p>In the example above for Large font size, here is the CSS variable generated:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-selector-tag\">--wp--preset--font-size--large<\/span>: <span class=\"hljs-selector-tag\">clamp<\/span>(20<span class=\"hljs-selector-tag\">px<\/span>, 1<span class=\"hljs-selector-class\">.25rem<\/span> + ((1<span class=\"hljs-selector-tag\">vw<\/span> <span class=\"hljs-selector-tag\">-<\/span> 7<span class=\"hljs-selector-class\">.68px<\/span>) * 0<span class=\"hljs-selector-class\">.481<\/span>), 24<span class=\"hljs-selector-tag\">px<\/span>);\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>As you incorporate fluid typography settings into your designs, there are several considerations to keep in mind:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>'size'<\/code>:<\/strong> This is your preferred font size, also serving as the default minimum value. For now, it&#8217;s advisable to match this with a declared minimum value.<\/li>\n\n\n\n<li><strong><code>'min'<\/code>:<\/strong> This represents the smallest font size in your design, which will commence scaling below 768px.<\/li>\n\n\n\n<li><strong><code>'max'<\/code>:<\/strong> This is the largest font size that will begin scaling when the viewport exceeds 1600px.<\/li>\n\n\n\n<li><code><strong>'scale factor<\/strong><\/code><strong>&#8216;:<\/strong> By default, this is set to 1.<\/li>\n\n\n\n<li><strong><code>'units'<\/code>:<\/strong> The allowed units for fluid typography settings are pixels (px), ems (em), and rems (rem). Using rem units is encouraged as other units can hamper accessibility, especially when users zoom their browser text.<\/li>\n<\/ul>\n\n\n\n<p>Anticipated future updates to Gutenberg, and consequently WordPress core, will give builders the flexibility to modify targeted media queries and even the scale factor. In addition, these updates will open up even greater adaptability and control over typography in your designs.<\/p>\n\n\n\n<p>The Frost theme fully embraces fluid typography, facilitating custom font size adjustments from 16px to 72px. Explore how this dynamic feature operates in practice by <a href=\"https:\/\/frostwp.com\/styles\/fluid-typography\/\">visiting this link<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"margin-top:40px\">Conclusion<\/h2>\n\n\n\n<p>In conclusion, the dynamic landscape of the digital world, characterized by a myriad of devices, diverse user needs, and different interaction modes, necessitates the creation of adaptable, versatile, and responsive websites.<\/p>\n\n\n\n<p>Fluid spacing and fluid typography offer integral tools for achieving this goal of adaptability. They embody the principles of intrinsic design, and when incorporated into the WordPress block editor, they ensure that content responds intuitively to the viewing environment.<\/p>\n\n\n\n<p><strong>Have you explored Intrinsic Web Design, Fluid Spacing, or Fluid Typography within your WordPress projects?<\/strong><\/p>\n\n\n\n<p>We\u2019d love to see what you\u2019ve built &#8211; share it with our Developer Relations team on Twitter <a href=\"https:\/\/twitter.com\/WPEBuilders\">@wpebuilders<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The digital world is a diverse, rapidly changing environment with many devices, user needs, and interaction modes. Therefore, creating adaptable, versatile, and genuinely responsive websites is imperative. Though it has [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":5268,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[43],"class_list":["post-5267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-popular-2023"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Intrinsic Design: Building Responsive WordPress Websites - Builders<\/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:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Intrinsic Design: Building Responsive WordPress Websites - Builders\" \/>\n<meta property=\"og:description\" content=\"The digital world is a diverse, rapidly changing environment with many devices, user needs, and interaction modes. Therefore, creating adaptable, versatile, and genuinely responsive websites is imperative. Though it has [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-30T18:07:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-13T16:56:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/05\/responsive-wordpress-websites.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Gardner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Gardner\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/\"},\"author\":{\"name\":\"Brian Gardner\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/f582a2535c88e2c0b518703a29e82f7e\"},\"headline\":\"Intrinsic Design: Building Responsive WordPress Websites\",\"datePublished\":\"2023-05-30T18:07:08+00:00\",\"dateModified\":\"2023-12-13T16:56:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/\"},\"wordCount\":1431,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/responsive-wordpress-websites.jpg\",\"keywords\":[\"popular-2023\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/\",\"name\":\"Intrinsic Design: Building Responsive WordPress Websites - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/responsive-wordpress-websites.jpg\",\"datePublished\":\"2023-05-30T18:07:08+00:00\",\"dateModified\":\"2023-12-13T16:56:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/responsive-wordpress-websites.jpg\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/responsive-wordpress-websites.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Responsive WordPress Websites\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/responsive-wordpress-websites\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Intrinsic Design: Building Responsive WordPress Websites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/f582a2535c88e2c0b518703a29e82f7e\",\"name\":\"Brian Gardner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"caption\":\"Brian Gardner\"},\"description\":\"Brian Gardner is a Principal WordPress Advocate at WP Engine. He has built on WordPress since 2006 and is the creator of Frost. Connect with him on LinkedIn and X.\",\"sameAs\":[\"https:\\\/\\\/briangardner.com\\\/\"],\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/brian-gardner-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Intrinsic Design: Building Responsive WordPress Websites - Builders","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:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/","og_locale":"en_US","og_type":"article","og_title":"Intrinsic Design: Building Responsive WordPress Websites - Builders","og_description":"The digital world is a diverse, rapidly changing environment with many devices, user needs, and interaction modes. Therefore, creating adaptable, versatile, and genuinely responsive websites is imperative. Though it has [&hellip;]","og_url":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/","og_site_name":"Builders","article_published_time":"2023-05-30T18:07:08+00:00","article_modified_time":"2023-12-13T16:56:44+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/05\/responsive-wordpress-websites.jpg","type":"image\/jpeg"}],"author":"Brian Gardner","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Brian Gardner"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/"},"author":{"name":"Brian Gardner","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/f582a2535c88e2c0b518703a29e82f7e"},"headline":"Intrinsic Design: Building Responsive WordPress Websites","datePublished":"2023-05-30T18:07:08+00:00","dateModified":"2023-12-13T16:56:44+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/"},"wordCount":1431,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/05\/responsive-wordpress-websites.jpg","keywords":["popular-2023"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/","url":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/","name":"Intrinsic Design: Building Responsive WordPress Websites - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/05\/responsive-wordpress-websites.jpg","datePublished":"2023-05-30T18:07:08+00:00","dateModified":"2023-12-13T16:56:44+00:00","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/05\/responsive-wordpress-websites.jpg","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/05\/responsive-wordpress-websites.jpg","width":1920,"height":1080,"caption":"Responsive WordPress Websites"},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/responsive-wordpress-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Intrinsic Design: Building Responsive WordPress Websites"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/f582a2535c88e2c0b518703a29e82f7e","name":"Brian Gardner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","caption":"Brian Gardner"},"description":"Brian Gardner is a Principal WordPress Advocate at WP Engine. He has built on WordPress since 2006 and is the creator of Frost. Connect with him on LinkedIn and X.","sameAs":["https:\/\/briangardner.com\/"],"url":"https:\/\/wpengine.com\/builders\/author\/brian-gardner-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/5267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=5267"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/5267\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media\/5268"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=5267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=5267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=5267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}