开发人员圈子中经常重复的问题之一，他们通过Gutenberg项目紧随WordPress的革命是：我们什么时候要获得更响应的控制？具体来说，这个问题通常是围绕基于桌面，平板电脑或移动视图更改块的某些设计元素的能力而构建的。
这是一个重要的问题。数十年来，设计师一直在进行类似的讨论。如果您已经走了足够长的时间，那么您可能已经建立了一些与桌子的完美一致的站点，这些地点贯穿了令人沮丧的浮标时代，并终于掌握了Flexbox和Grid Layouts的力量。这是一项不断变化的学科。
在过去的十年左右的时间里，大多数网页设计师都学会了根据观看者的屏幕尺寸利用媒体查询的力量。需要进行调整以处理一个快速变化的世界，在该世界中，现场访问者突然在手掌上携带计算机或从客厅里的大屏幕电视舒适地阅读。但是，这种不同设备的扩散造成了一个新的问题：没有真正的标准尺寸（最佳教育的猜测，但没有标准），即使存在，明天都可能改变。媒体查询是一个很好的停止差距解决方案，但是过度使用它们也可能会膨胀一个网站的CSS。
因此，设计需要继续发展成为可以处理不断变化的网络的事物。这就是内在设计的出现。
什么是内在设计？
Merriam-Webster词典将内在的定义为“属于事物的基本本质或宪法”。提出了一个问题：网络的“基本本质”是什么？
网络本质的一部分是它在不断变化。与打印设计不同，您可以准确地知道每个页面的宽度和高度，并且可以完美地对齐所有内容，而不必担心元素转移，网络是流体介质。一直以来，内在设计旨在基于这个简单的事实来解决问题。
现代流体版式是该想法中的基本例子之一。想象你想要你的h1设计的标题64px。在Web设计的早期，您可能会在800像素显示器上查看此操作，并使用以下CSS来处理以下操作：
h1 {
font-size: 64px;
}在基于媒体查询的响应式Web设计中，您可能意识到64px在所有设备上看起来都不好。也许您添加了媒体查询以根据设备视口更改它，如以下CSS片段所示：
h1 {
font-size: 48px;
}
@media screen and ( min-width: 767px ) {
h1 {
font-size: 64px;
}
}这可能会根据您需要定位的视口尺寸的数量来快速对多个媒体查询。另外，它并不能真正解决基于网络性质设计的问题。
遵循固有的设计方法将意味着以某种方式处理问题，即视口是什么大小。无论如何，标题的尺寸可以收缩和扩展。具有视口单元等功能clamp()，这在现代CSS中很可能，如以下片段所示：
h1 {
font-size: clamp( 2.25rem, 6vw, 3rem );
}这是一个广泛主题的过于简单的例子，但目标是让主题作者不断重新考虑和重新评估解决问题的最佳解决方案，以解决这些问题。
这也不意味着媒体查询，并且可能是集装箱查询不是设计师工具箱中的关键元素。在某些情况下，继续使用它们是有意义的。但是，它们并不总是需要您使用的唯一工具。
从本质上讲，内在设计可确保单个项目知道如何布置自己，而不管它在页面上使用了什么。
内在设计对WordPress意味着什么？
随着WordPress 5.0中的Block编辑器的引入，尤其是在5.8中启动块主题，在WordPress上设计的景观发生了变化。从UI内部构建网站的最终目标是越来越多的现实。对于WordPress项目的健康，这意味着要做出一些艰难的决定，即不要首先跳过头部添加所有可能的CSS属性作为接口中的选项。
很快就显而易见的是，要防止UI创建UX噩梦，必须采用更慢，有条不紊的方法。每个新的设计工具都可能导致多年的技术债务。
此外，用户可以在任何地方插入块和块模式。主题无法在使用哪种上下文中知道并说明所有用例。是否有侧边栏的内容区域中的块？布局是全宽，宽还是约束？它遵循流程还是弹性布局？有太多场景可以使用块级别的媒体查询来解决此问题。
现实情况是，设计仍然需要考虑屏幕尺寸的流动性。WordPress需要使用现代技术来面对这个问题，同时检查UI膨胀。
在一张名为的古腾堡门票中 响应式块和内在的网页设计，约翰·阿斯穆森（Joen Asmussen）在这种方法背后提出了一些思考：
最终，动机不一定要完全摆脱媒体查询，而是要探索一个问题：单个块模式可以从开箱即用响应多少？受欢迎的副作用可能是一个非常简化的UI，用于编辑。媒体或集装箱征服可以看作是内置内在行为的逐步增强。
这不是一夜之间解决自己的问题。相反，这是一个 迭代过程 在过去的几个主要版本中，开发人员看到了新工具和技术的发布，并且可以期望更多。
这也是一种心态。核心贡献者不仅需要在这些术语中思考，而且主题社区也必须这样做。它必须继续询问今天的方法是否是明天的正确方法。
主题作者的工具和技术
在块级别，主题作者没有太多控制。尽管从技术上讲，可以编写大量自定义CSS来推翻核心WordPress的工作，但通常最好避免这种情况。下一个重大更新可以消除您的大部分工作。
对于集装箱/布局块，例如组，行，堆栈和列，尤其如此。在几乎每种情况下，一般的经验法则应该是与WordPress提供的合作。这些块及其支持的功能在每个新版本中都变得越来越强大。
主题作者拥有最多控制的地方theme.json通过使用排版和间距预设。
流体版式
WordPress 6.1引入了内置支持 流体字体尺寸 通过theme.json。此功能允许主题开发人员在指定范围内注册自定义大小，以根据屏幕尺寸生长和收缩，WordPress处理幕后所有复杂的计算。
主题作者可以将所有尺寸设置为流体或启用/禁用单个尺寸的功能。下列theme.json代码是二十三个主题中的编辑示例，并显示了如何通过该主题设置的三个示例settings.typography.fontSizes财产：
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"min": "1rem",
"max": "1.125rem"
},
"size": "1.125rem",
"slug": "medium"
},
{
"fluid": {
"min": "1.75rem",
"max": "1.875rem"
},
"size": "1.75rem",
"slug": "large"
},
{
"fluid": false,
"size": "2.25rem",
"slug": "x-large"
}
]
}
}
}从用户的角度来看，这看起来像是UI中的常规尺寸选择：
但是，出现的字体大小的大小完全取决于屏幕的大小。这是创建排版的巨大胜利，该版式自然而然地使用读者观看的设备。
流体间距
WordPress不包括类似于字体尺寸的开箱即用的流体间距系统。但是，它为主题开发人员提供了构建的自由 定制间距预设，这意味着他们可以添加他们选择的任何有效的CSS值，包括使用clamp()创建流体边距，填充和间隙选项。
二十三个主题是如何通过settings.spacing.spacingSizes设置theme.json。以下是主题中JSON代码的编辑示例：
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"spacing": {
"spacingScale": {
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "1"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "2"
},
{
"size": "clamp(2.5rem, 8vw, 4.5rem)",
"slug": "50",
"name": "3"
}
]
}
}
}有几种在线工具来计算clamp()价值甚至是公式，以便这样做 Smashing Magazine的夹具教程。
添加自定义预设通过在UI中为最终用户提供一个简单的滑块，以调整支持任何这些选项的块上的边距，填充和间隙，如以下屏幕截图所示：
用户不必担心这些奇怪的值是什么。无论访问者正在观看什么屏幕尺寸，它们都可以工作。
对于主题作者，这是一种将现有CSS功能集成到WordPress全局样式系统中的强大方法。
道具 @彩色色彩 对于本文的早期草案，@Annezazu，@Mburridge，@MATVEB，和 @BPH 用于反馈和审查。