跳到内容
新问题

对这个项目有疑问吗？注册一个免费的GitHub帐户以打开一个问题，并联系其维护者和社区。

注册GitHub

单击“注册GitHub”，表示您同意我们的服务条款和隐私声明。我们偶尔会向您发送与帐户相关的电子邮件。

已经在GitHub上了？登录到您的帐户
跳到底部

全局样式：添加选项以删除站点范围的主题背景图像 #61998

已合并
将1个提交合并到从
2024年5月27日
已合并

全局样式：添加选项以删除站点范围的主题背景图像 #61998

将1个提交合并到从
2024年5月27日

对话

拉蒙德
复制链接
成员

@拉蒙德 拉蒙德 评论2024年5月27日 •
已编辑
加载

开发人员备注📓

#59354（评论）

什么？

部分：

你好。

本请购单实施@安德鲁斯隆的想法，并添加了在编辑器中删除主题的默认全站背景图像的功能。

请参见：#61271（评论）

为什么？

过来看：

2024-05-27.12.00.28英里/小时

如果在theme.json中定义了背景图像，则无法删除它。

怎么用？

通过在图像下拉列表中添加“删除”选项，可以设置background.background图片到“无”，当：

  1. 尚未设置用户值，并且
  2. 有一个theme.json值

测试说明

  1. 在theme.json中定义站点的背景图像
  2. 前往网站编辑全局样式>布局
  3. 低于背景，单击图像控件，然后单击“删除”
  4. 背景图像应该消失！保存并检查前端。的价值背景-图像应该是“无”.
  5. 再次在站点编辑器中，通过单击图像控件重置背景图像值，然后单击“重置”
  6. 您应该会再次看到默认的背景图像。

这里有一些测试主题。json！

{“$schema”:"../../模式/json/theme.json",“版本”:三,“设置”: {“外观工具”:真的},“样式”: {“背景”: {“背景图像”: {“url”:"https://images.pexels.com/photos/22484288/pexels-photo-22484288:free-photo-of-the-circular-stone-terales-of-the-inca-ruins.jpeg？auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"}}}}

屏幕截图或屏幕广播

2024-05-27.11.50.07.mp4

@拉蒙德
背景图像：添加功能以删除主题的默认站点…
7bd4a9b型 
…-通过将值设置为`background-image:none，在编辑器中显示宽背景图像`
@拉蒙德 拉蒙德补充[类型]增强功能 改进建议。 全球风格 与更广泛的Global Styles工作相关的任何内容，包括Styles Engine和theme.json标签2024年5月27日
@拉蒙德 拉蒙德自行分配的2024年5月27日
@github-操作 GitHub操作
复制链接

github-操作 机器人程序 评论2024年5月27日 •
已编辑
加载

以下账户与本PR和/或相关问题进行了互动。当活动发生时，我将继续更新这些列表。您还可以通过添加支柱支架标签。

如果您通过GitHub上的拉请求合并代码，请将以下内容复制并粘贴到合并提交消息的底部。

合著者：ramonjd<ramonopoly@git.wordpress.org>合著者：告诉机器<isabel_brison@git.wordpress.org>

为了理解WordPress项目对贡献者的期望，请查看核心手册中的贡献者归因页面.

拉蒙德
拉蒙德 评论 2024年5月27日
查看已审阅的更改
packages/block-editor/src/components/global-styles/background-panel.js
@@-279,6+281,23@@function背景图像工具面板项（{

const hasValue=hasBackgroundImageValue（样式）；

const closeAndFocus=（）=>{
复制链接
成员 作者

选择隐藏此评论的原因

将显示原因，以便向其他人描述此评论。了解更多信息.

抽象，因为我们在两个地方需要它

packages/block-editor/src/components/global-styles/background-panel.js
@@-83,6+83,8@@export函数具有BackgroundSizeValue（style）{
导出函数hasBackgroundImageValue（style）{
返回(
!! 样式？。背景？。backgroundImage？。标识||
//支持theme.json中的url（）字符串值。
“string”===样式类型？。背景？。背景图像||
复制链接
成员 作者

选择隐藏此评论的原因

将显示原因，以便向其他人描述此评论。了解更多信息.

这样我们就可以用url（）

	“样式”: {“背景”: {“背景图像”:"url（'https://images.pexels.com/photos/22484288/pexels-photo-22484288:free-photo-of-the-circular-stone-terales-of-the-inca-ruins.jpeg？auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2')"}}

packages/block-editor/src/components/global-styles/background-panel.js
onRemove（）；
} }
>
{__（“删除”）}
复制链接
成员 作者

选择隐藏此评论的原因

将显示原因，以便向其他人描述此评论。了解更多信息.

“删除”是否足够清晰？

它应该只出现在有theme.json值的地方，并且没有定义用户样式——基本上是为了用户可以删除默认的主题背景图像，而不需要其他任何东西。

复制链接
贡献者

选择隐藏此评论的原因

将显示原因，以便向其他人描述此评论。了解更多信息.

是的，这是一个好问题。我认为当你点击带有图像名称和缩略图的互动程序打开下拉列表时，它在视觉上非常清晰；上下文中的“Remove”只能与该图像相关。但VoiceOver的一个快速测试表明，若你们并没有视觉上下文，那个么这种体验就相当脆弱：你们点击一个名为“背景选项”的菜单弹出按钮（这是你们得到的唯一线索，表明你们在和背景相关的部分），然后你们点击另一个标有图像文件名的菜单弹出键，加上“选定图像：无标题”。这是一个比这个公关地址更广泛的问题，所以我不建议在这里尝试解决它😅

实际上，工具面板从一开始就无法访问，这是主要问题，但对于这个特定的实例，我们可以通过切换文件名和“选定图像：未命名”的顺序来改善体验，也可以将“选定图像”更改为“站点背景图像”（我不确定“未命名”是从哪里来的？但也许我们可以完全放弃它？）。但考虑到这是一个现有问题，可能应该在后续行动中加以解决。

@拉蒙德 拉蒙德提到这个拉请求 2024年5月27日
正常开放
69项任务
告诉机器
告诉机器 批准了这些更改 2024年5月27日
查看已审阅的更改
复制链接
贡献者

@告诉机器 告诉机器 留下了评论

选择隐藏此评论的原因

将显示原因，以便向其他人描述此评论。了解更多信息.

代码LGTM，它在测试中运行良好！此外，这是一个非常有用的增强功能，因为目前除了编辑主题文件外，还无法摆脱主题背景图像😅

packages/block-editor/src/components/global-styles/background-panel.js
onRemove（）；
} }
>
{__（“删除”）}
复制链接
贡献者

选择隐藏此评论的原因

将显示原因，以便向其他人描述此评论。了解更多信息.

是的，这是一个好问题。我认为从视觉上看，当你点击带有图像名称和缩略图的互动程序打开下拉列表时，这是非常清楚的；上下文中的“Remove”只能与该图像相关。但VoiceOver的一个快速测试表明，若你们并没有视觉上下文，那个么这种体验就相当脆弱：你们点击一个名为“背景选项”的菜单弹出按钮（这是你们得到的唯一线索，表明你们在和背景相关的部分），然后你们点击另一个标有图像文件名的菜单弹出键，加上“选定图像：无标题”。这是一个比这个公关地址更广泛的问题，所以我不建议在这里尝试解决它😅

实际上，工具面板从一开始就无法访问，这是主要问题，但对于这个特定的实例，我们可以通过切换文件名和“选定图像：未命名”的顺序来改善体验，也可以将“选定图像”更改为“站点背景图像”（我不确定“未命名”是从哪里来的？但也许我们可以完全放弃它？）。但考虑到这是一个现有问题，可能应该在后续行动中加以解决。

@拉蒙德
复制链接
成员 作者

感谢您的反馈和测试@告诉机器

但是VoiceOver的一个快速测试表明，如果你没有视觉背景，这种体验会非常脆弱
我们可以通过切换文件名和“Selected image:Untitled”的顺序来改善体验，也可以将“Selected image”更改为“Site background image”（我不确定“Untitleds”是从哪里来的？但也许我们可以完全取消它？）。但考虑到这是一个现有问题，可能应该在后续行动中加以解决。

好主意。“无标题”是图像没有标题的后备选项。

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/global-styles/background-panel.js#L305

我有一个调整PR这样我可以在那里更新。

干杯！

@拉蒙德 拉蒙德合并提交2007年3月29日进入之内 大旅行箱 2024年5月27日
73项检查中有72项通过
@拉蒙德 拉蒙德删除了 添加/背景-图像-主题-重置 分支 2024年5月27日05:46
@github-操作 github-操作 机器人程序将此添加到古腾堡18.5里程碑2024年5月27日
@贾斯穆森
复制链接
贡献者

好的起点，我假设我们也可以使用工具面板机制重置它，就像组bg选项一样？

屏幕截图2024-05-27，08 23 43

在所有设计工具中，可能还有一个更大的问题，这可能与继承可视化工作有关，以改进项通常如何重置为其主题.json定义。它最终是关于用户自定义的。奇怪的是，你可能正在重置一个图像，然后惊讶地发现仍然看到一个图像。与模拟最接近的等价物可能是有一个显式的“无背景图像”选项，类似于我们如何有显式的文本解码定义或显式“无颜色”定义。

@告诉机器
复制链接
贡献者

我假设我们也可以使用toolspanel机制重置它，就像组bg选项一样？

如果背景图像是由主题定义的（如果来自theme.json），那么工具面板重置不应该删除它，对吗？至少我一直认为“重置”意味着返回到默认的主题。

@贾斯穆森
复制链接
贡献者

至少我一直认为“重置”意味着返回到默认的主题。

全局样式应该始终在工具面板中显示所有工具，是的，单击reset应该重置为“default”，这将是theme.json提供的默认值。

所以我不是在建议一个操作项，我主要是在思考添加一个明确的“无”选项背景图像的长期解决方案，类似于明确的“没有背景颜色”或明确的“不删除文本”选项，用于您想要取消默认设置的情况。我们在这个分支中的功能很好，只是想知道是否有更清晰的标签：“删除”和“重置”有点混淆。我想知道“重置”和“无背景图像”是否更清晰？

@法比安凯 法比安凯补充这个需要开发说明 需要一份主要WordPress发布周期的开发人员说明标签2024年5月29日
@胡安马奎塔 胡安马奎塔提到这个拉请求 2024年5月29日
关闭
49项任务
@拉蒙德 拉蒙德补充有开发说明 开发说明完成时（针对即将发布的WordPress）和已删除需要开发说明 需要一份主要WordPress发布周期的开发人员说明标签2024年5月30日
@拉蒙德 拉蒙德提到这个拉请求 2024年5月30日
已合并
5项任务
卡斯廷轴子推送提交致carstingaxion/gutenberg引用的这个拉请求 2024年6月4日
@拉蒙德 @告诉机器 @卡斯廷轴子
背景图像：添加功能以删除主题的默认站点…
数据库527b7 
通过将值设置为`background-image:none`，在编辑器中显示…-wide background image(WordPress#61998)合著者：ramonjd<ramonopoly@git.wordpress.org>合著者：告诉机器<isabel_brison@git.wordpress.org>
柏油vipul推送提交帕蒂尔·维普尔/古腾堡引用的这个拉请求 2024年6月17日
@拉蒙德 @告诉机器 @柏油vipul
背景图像：添加功能以删除主题的默认站点…
107电子0c5 
通过将值设置为`background-image:none`，在编辑器中显示…-wide background image(WordPress#61998)合著者：ramonjd<ramonopoly@git.wordpress.org>合著者：告诉机器<isabel_brison@git.wordpress.org>
免费注册 在GitHub上加入此对话.已经有帐户了吗？登录以发表评论
审阅者

@告诉机器 告诉机器 告诉机器批准了这些更改

@埃拉特里克斯 埃拉特里克斯 等待ellatrix的审查请求 ellatrix是代码所有者

@吵闹声 吵闹声 等待Noissocks要求的审查

@詹姆斯科斯特 詹姆斯科斯特 等待jameskoster的审查请求

@贾斯穆森 贾斯穆森 等待jasmussen的审查请求

@安德鲁斯隆 安德鲁斯隆 等待andrewserong的审查请求

受让人

@拉蒙德 拉蒙德

标签
全球风格 与更广泛的Global Styles工作相关的任何内容，包括Styles Engine和theme.json 有开发说明 当开发注释完成时（对于即将发布的WordPress版本） [类型]增强功能 改进建议。
项目
还没有
里程碑
古腾堡18.5
开发

成功合并此请求可能会解决这些问题。
4名参与者
@拉蒙德 @贾斯穆森 @告诉机器 @法比安凯