下面是CSS选择器的出现.show图标我找到了。在编写时，在12个不同的文件中出现了多次。

块工具栏中的“解锁”按钮https://github.com/WordPress/gutenberg/blob/2e439917b871eac2219b90c176ff4618c6e0852a/packages/block-editor/src/components/block-lock/style.scss#L62模式资源管理器分页：https://github.com/WordPress/gutenberg/blob/2e439917b871eac2219b90c176ff4618c6e00852a/packages/block-editor/src/components/block-patters-pageing/style.scss#L25块切换器：防止双标签文本的小修复https://github.com/WordPress/gutenberg/blob/2e439917b871eac2219b90c176ff4618c6e0852a/packages/block-editor/src/components/block-switcher/style.scss#L33块工具栏中的所有按钮，填充覆盖为6pxhttps://github.com/WordPress/gutenberg/blob/2e439917b871eac2219b90c176ff4618c6e0852a/packages/block-editor/src/components/block-toolbar/style.scss#L162块工具：第198、239、247行出现3处当块具有父级时，对块工具栏的各种调整块移动器按钮的调整https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-tools/style.scss块检查器选项卡https://github.com/WordPress/gutenberg/blob/2e439917b871eac2219b90c176ff4618c6e0852a/packages/block-editor/src/components/inspector-controls-tabs/style.scss#L1LinkControl按钮https://github.com/WordPress/gutenberg/bob/2e439917b871eac2219b90c176ff4618c6e00852a/packages/block editor/src/components/link control/style.scss#L25内联格式工具栏据我所知，内联格式工具栏在https://github.com/WordPress/gutenberg/pull/58945抄送@youknowriadhttps://github.com/WordPress/gutenberg/blob/f25f59d8680b0c4d9b68d1f3aaa94e209f3b9b80/packages/block-editor/src/components/rich-text/style.scss#L33设置站点图标时，覆盖工具栏中的帖子编辑器“查看帖子”徽标链接https://github.com/WordPress/gutenberg/blob/f25f59d8680b0c4d9b68d1f3aaa94e209f3b9b80/packages/edit-post/src/components/header/style.scss#L4全局样式面板标题按钮注意：布局当前已断开https://github.com/WordPress/gutenberg/blob/72612dc94ce38ab2419669b3f0e844e515c975d1/packages/edit-site/src/components/global-styles-sidebar/style.scss#L83对顶栏中的插入器切换按钮进行小调整注意：似乎有些CSS属性是不必要的所有文档工具按钮的左对齐调整https://github.com/WordPress/gutenberg/blob/72612dc94ce38ab2419669b3f0e844e515c975d1/packages/editor/src/components/document-tools/style.scss#L82编辑器标题：出现4次编辑器顶栏中的按钮启用“顶部工具栏”时的块移动器pinned items-应该进行检查，但不能确保元素“interface-pinned-items”也有“show-icon-labels”CSS类https://github.com/WordPress/gutenberg/blob/72612dc94ce38ab2419669b3f0e844e515c975d1/packages/editor/src/components/header/style.scss

看到这个很兴奋！我一直想让这个设置更像MacOS工具栏。

我对这个问题研究得越多，我就越倾向于认为任何CSS实现都是内在脆弱的，不足以使这个功能可靠。而且，它不太容易测试。

当前实现使用CSS伪元素：：之前或：：之后取决于其中一个是否已用于其他目的。还有一些边缘情况，例如检查器选项卡，其中焦点样式和活动样式已经同时使用：：之前 和 ：：之后因此，当启用“显示按钮文本标签”时，显示的文本位置会稍有错误。

其他潜在的CSS冲突可能会引发其他潜在问题。

基本上，通过使用针对按钮的CSS伪元素来显示文本咏叹调标签属性乍一看可能是一个聪明的主意，但它是一个脆弱的CSS黑客。此功能应使用更可靠的实现。

然而，我确实意识到基本Button组件不应将其作为内置功能支持。我可以想出两个选项，我非常感谢组件包维护人员和其他古腾堡专家的一些反馈：

• 使Button组件支持soem类型通用的基于Button使用的环境进行转换，该环境没有明确绑定到“Show Button text labels”。例如：环境可能会以某种方式向按钮发送一些道具，以指示它以某种方式进行更改。不过，这听起来有点违背最佳实践。
• 保持Button组件“纯”，并在Editor组件中引入新的“preference-aware”按钮。这个组件基本上是一个基本按钮的包装器，它知道用户的偏好，只传递正确的道具，不呈现SVG图标，而是呈现文本。

第二个选项看起来更干净，不需要任何CSS攻击。
抄送@WordPress/gutenberg-core@WordPRES/gutenberg-components

#46025建议不依赖全局类名。

我能想到的一种方法是改变按钮组件即席，具体取决于是否启用了此设置，而不依赖于.show-icon-label显示类。也就是说，如果启用此设置，它将以子级而不是图标的形式呈现实际文本：

功能 父组件() {
	常数 显示图标标签 = 使用Select( ( 选择 ) => {
		返回 选择( 首选项存储 ).得到( “核心”, '显示图标标签' );
	}, [] );
	返回 (
		<>
			<儿童组件一 显示图标标签={ 显示图标标签 } />
			<儿童第二部分 显示图标标签={ 显示图标标签 } />
		</>
	);
}

功能 儿童组件一( {显示图标标签} ) {
	返回 (
		<按钮
			标签={ __( “推我” ) }
			偶像={ 显示图标标签?一些图标:未定义 }
			show工具提示={ ! 显示图标标签 }
		>
			{ 显示图标标签 && __( “推我” ) }
		</按钮>
	);
}

功能 儿童组件2( {显示图标标签} ) {
	返回 (
		<按钮
			标签={ __( “推我” ) }
			偶像={ 显示图标标签?一些图标:未定义 }
			show工具提示={ ! 显示图标标签 }
		>
			{ 显示图标标签 && __( “推我” ) }
		</按钮>
	);
}

但是，这需要更改当前依赖于.show-icon-label显示类。

• 使按钮组件支持soem类型通用的基于Button使用的环境进行转换，该环境没有明确绑定到“Show Button text labels”。例如：环境可能会以某种方式向按钮发送一些道具，以指示它以某种方式进行更改。不过，这听起来有点违背最佳实践。

我们可以使用上下文系统。就其价值而言，我一点也不反对这种方法。另一方面，后一种使用Editor-only包装器的方法似乎不可行，因为我们必须替换所有相关的按钮编辑器中的，其中一些已经包含在复合组件中。

我认为最困难的部分是自动转换的可靠性。因为按钮不幸的是，它有很多道具，允许消费者以不同的方式设置图标/文本。

我认为最困难的部分是自动转换的可靠性。因为按钮不幸的是，它有很多道具，允许消费者以不同的方式设置图标/文本。

是的，我也有同样的担忧。因此，我倾向于认为基本组件应该保持不变。包装器组件选项似乎更适合我，因为它解决了Gutenberg编辑器特有的一个功能。

我们必须替换编辑器中所有相关的按钮，其中一些已经包含在复合组件中。

对。我不确定要处理的文件很多，实际上我觉得总的来说是几个文件。其中一些复合组件已经使用作为属性，它只允许将Button组件替换为“ButtonWrapper”。根据影响，我认为我们必须尝试更清楚地了解情况。
同样重要的是：“ButtonWrapper”可以进行测试，以便在基本Button组件以任何方式发生更改时捕获任何问题。

我会尝试提交一份PR草案，以便有一些争执的证据。

我刚刚报告了这个偏好的一个新回归，这再次证明了当前的实现是脆弱的。在最新的主干上，“检查器”选项卡文本不再可见。请参见#61947

#61947/#61949这是一个很好的例子，说明当前实现是如何脆弱的，并且在某些控件样式发生更改而没有适当测试这些更改的后果时，很容易中断。

对我来说，这种回归证明了一些事情：

• 这个过程应该改进。两个贡献者都应该知道需要测试的所有编辑器功能，或者流程本身应该确保在合并更改之前对这些功能进行实际测试。确保这两件事都得到改善将是理想的。
• 应避免使用特殊CSS自定义基本组件的样式。当需要新的样式时，即使只是CSS动画，也最好添加一个变体基本组件的测试，使其在基本组件中可测试。
• 应更改并实现“显示按钮文本标签”功能可测试的.

@阿费西娅就所有事项达成一致。我相信@米尔卡创建了（或至少在某个时候向我展示了）某种决策工作流，它与是否应将某些样式或功能构建到组件中以及是否应通过转义图案填充或覆盖在更高层实现相关。我们可以在这里链接吗？

是的，看看这个决策树会很好。我想说，由于这是一个协作的开源项目，这样的决策树应该是记录在案的.

关于“逃逸舱口或覆盖”，一般来说，根据我的经验，特别的“本地”样式的扩散会导致UI不一致，并且从长远来看会增加维护成本。这在WordPress核心中是典型的，因为它“积累”了几十年的发展。我希望古腾堡不要走同样的路。

我认为编辑器应该非常非常严格，并尽可能避免特殊的样式。例如，如果一个Button为了某些设计目的获得了一些定制的特殊样式，那么这只是装饰性的仅适用于一种情况那么我认为引入这样的定制是不值得的。另一方面，当一些定制样式被证明是有益的并且有多个用例时，那么它可能值得在基础组件中添加一个变体。

IMHO，一个很好的例子不要为Inspector的Post选项卡中的特色图像按钮进行cytom样式设置，请执行以下操作：

据我所知，这是一种独特的样式，在UI中没有其他地方使用。对我来说，它只是引入了不一致性，并没有增加太大的价值。设计应避免引入这种独特的定制。

我相信@米尔卡创建了（或至少在某个时候向我展示了）某种决策工作流，它与是否应将某些样式或功能构建到组件中以及是否应通过转义图案填充或覆盖在更高层实现相关。我们可以在这里链接吗？

对不起，我不知道你指的是什么，也许我说的是一般原则@wordpress/组件应该是纯粹的，因为它们不依赖于块编辑器API或wp-admin样式表？

两个贡献者都应该知道需要测试的所有编辑器功能，或者流程本身应该确保在合并更改之前对这些功能进行实际测试。确保这两个方面都得到改善将是理想的。

公平地说，我不记得什么时候@ciampo公司或者我曾经测试过“显示按钮文本标签”，也没有将其作为QA问题上报给我们。我被动地意识到了这一功能，但它从未出现在我们的烟雾测试程序中。从可维护性的角度来看，我认为我们需要将“Show button text labels”实现改进为：

1. 一位官员@wordpress/组件所有用户都可以使用的功能，并且可以在Storybook中轻松测试。
2. 块编辑器功能@wordpress/组件对没有责任。（开发人员更改@wordpress/组件根本不需要测试“显示按钮文本标签”是否断裂。）

考虑到“Show button text labels”在实际意义上的破坏也可能取决于周围的UI上下文，我认为后者将是理想的。

我同意@米尔卡那个@wordpress/组件不应对“显示按钮文本标签”功能负责。这更像是一个编辑器，它是用户的偏好。现在，Button组件通过标签,文本、和偶像道具。

尽管如此，我还是希望能得到一些关于首选方法的反馈。

#61824探索在编辑器中代替Button使用的包装器组件。另一种方法是使用组件上下文系统但是，根据我的理解，应该调整基本组件以使用它。

@阿费西娅作为一种替代方法，我建议构建非常简单的实用程序，可以用于此类情况。例如（伪代码）：

函数useOptionalLabel（标签，类型）{const isLabelEnabled=useContext（标签启用上下文）；开关（类型）{案例“按钮”：if（isLabelEnabled）返回{stuff}否则返回{stuff}案件等}

这一点，再加上影响返回类型的“type”的适当推断类型参数，可以使其适用于所有需要，例如。

<按钮 {...使用可选标签(“我的标签”, “按钮”)} 其他=“道具” 等 />