6周前，我们启动了一个专注于改进内联编辑的项目。我们相信这种创建内容的方式是未来的发展方向，我们希望成为实现这一未来的推动者。
我们选择特别关注内联块，以提升Tina的页面构建能力。以下是react-tinacms-inline中进行的一些改进和更改，以及在项目过程中收集的过程笔记：
美学
焦点环
在内联编辑中，焦点行为极大地影响编辑体验。它应根据用户输入流畅地从活跃状态转变为安静状态，传达编辑状态并增强控制感。反馈循环需要紧密而不过分。UI需要清晰但又微妙；它不应遮盖内容。
基于这一理解，我们选择使视觉焦点指示更为细致——将描边调整为1px，并加入微妙的阴影。这种设计有助于区分活跃块与背景，同时最大限度地减少对内容的干扰。
控件UI
对于内联编辑控件，我们的直觉是降低视觉重量并提高功能清晰度。这体现在将控件统一到一个面板中，中和色彩调色板，更新图标，并加入优雅的阴影。
“添加块”界面也发生了变化。鉴于此操作的重要性，我们选择将其与其他控件隔离，并将标签简化为“加号”图标。编辑者现在可以在兄弟块之前或之后添加块，并在水平或垂直轴上设置方向。
UI自定义
我们不仅希望清理焦点环的视觉美感，还希望为开发者提供更多的自定义机会。
样式与位置
在构建基于块的布局时，我们注意到页面宽度的块可能导致焦点环和控件溢出屏幕。这是由于焦点环与块元素之间的默认偏移造成的。
我们提供了通过传递“x”和“y”值来精确控制此偏移量的能力，并提供了一个insetControls属性，可以将组或块控件嵌入元素的上角。
开发者还可以控制环的边框半径——允许焦点环与内容完全齐平，甚至用于圆形块。
块限制
在我们进行侧项目以测试这些编辑功能时，我们希望能够限制块的范围。这些最小/最大数字可以在内联块上设置。当达到最小值时，块不能再被删除，同样，当达到最大值时，不能再添加额外的块。
此功能允许设计师和开发者为编辑者设计灵活的布局，同时使用护栏来维护他们的设计。
编辑
拖放重新排序
在研究其他内联编辑界面时，一个不常见但引起我们注意的功能是通过拖动块进行重新排序。依靠react-beautiful-dnd，编辑者可以在水平或垂直轴上拖动块以调整其顺序。
我们选择将拖动手柄直接放置在控件UI中，以最大限度地减少对输入的干扰。总体结果是一个简单的选择性功能，进一步提升了交互式编辑环境。
嵌套块焦点
对我们来说，支持嵌套块非常重要——这意味着块可以渲染其他块而不会导致控件和焦点状态冲突。
我们很快注意到嵌套块的一个问题是焦点环过多。当悬停在字段和字段上时，可能会同时显示多个焦点环——以指示块和块内的字段都有潜在的活跃状态。为了解决这个问题，所有内联字段现在都接受一个focusRing布尔值，以指示是否显示焦点环。这提供了对焦点混乱的更大控制。
我们还改进了焦点逻辑，以缓解父/子冲突。现在，当您点击任何块区域时，首先选择父块。当父块处于活动状态时，子块可以获得焦点。这种顺序焦点帮助用户了解在不同块级别上可编辑的内容。向上移动链条需要再次点击父块区域。
字段
新的内联组字段
在引入此字段之前，唯一可以在设置模态中编辑元数据的方法是通过块。此字段提供了一个机会，可以为一组常规内联字段添加类似块的控件和焦点环。
内联组对于需要编辑元数据的常规内联字段非常有用。以单个内联图像为例——您可以将此字段包装在一个内联组中，以显示用于alt标签和其他图像数据的表单。
内联组也是将众多内联字段组织成连贯块的好方法，当您不需要添加、删除或重新排序子项时。
一般改进
设置模态
我们注意到的一个明显的用户体验问题是设置模态操作的用户体验。最初，只有一个取消和“退出”按钮，实际上做的是同一件事——关闭模态。
我们引入了一个确认按钮，并调整了取消按钮的功能，使其实际重置表单更改。这为编辑者提供了更好的控制和实施设置表单更改的清晰度。
通过CMS启用编辑模式
在这个项目过程中，引入了完全启用或禁用CMS的能力。通过此功能，我们现在可以通过enabled标志控制内联编辑模式。当CMS启用时，内联编辑状态会自动激活。
这简化了内联编辑配置。开发者不再需要制作单独的“启用编辑模式”切换来激活该活动编辑状态。他们可以在应用程序级别控制整个项目中CMS是否启用。
最终想法
我们知道这只是个开始。我们对内联编辑体验充满热情，并将继续努力改进此API。
我们希望为开发者提供构建完全自定义页面构建器类型工作流的自由。虽然我们已经有一些想法来进一步发展，但我们很想听到您的反馈！欢迎通过Twitter与我们分享您的想法。
