跳到内容
新问题

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

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

已经在GitHub上了?登录到您的帐户

添加:允许块访问全局样式的API。 #34178

对话

大戟
复制链接
成员

此PR实现了一个实验性API,允许块知道是否应用了全局样式:
例如:

const backgroundColor=useStyle('color.background');const lineHeight=useStyle('typeography.lineHeight');

该机制考虑了CSS变量。如果主题使用自定义CSS变量或预设CSS变量,则返回该变量的值。

此机制对移动APP很有用,因为我们可以更容易地将样式应用于来自theme.json cc:@炒作.

对于应用本地样式时需要上下文(无论是否存在全局样式)的情况,它也很有用。例如:在应用边框宽度时,我们需要知道是否存在全局边框样式,如果不存在,我们需要应用实心边框样式,这样,如果样式已经存在,那么边框宽度就有意义了,我们保留主题定义的内容。复写的副本:@阿隆·罗伯特肖@米提亚斯.

它还允许UI正确反映块的样式。现在,为了测试目的,我已经做了改进。线条高度占位符反映了使用theme.json应用的真实线条高度值。因此,如果theme.json应用2行高度,我们将显示2,而不是默认的1.5。

这个PR仍然非常简单,没有实现继承。继承是复杂的,我想我们应该看看没有它我们能走多远。

这是如何测试的?

我在网站编辑器上验证了我仍然可以应用预设样式,例如:颜色。当我更改预设时,依赖于该预设的样式也会更改。(现有的编辑站点变量分辨率仍然有效)。
我添加了以下数据作为theme.json样式:

“核心/段落”:{“排版”:{“lineHeight”:“2”}}

我在块编辑器上添加了一个段落,并验证了段落的行高是否显示为两个占位符。

我添加了以下数据作为theme.json样式:

“核心/段落”:{“排版”:{“lineHeight”:“var(--wp-自定义--line-hight--test)”}}

我在块编辑器上添加了一个段落,并验证了段落的行高是否显示为两个占位符。

我在theme.json的设置中添加了以下自定义变量:

“自定义”:{“线条高度”:{“测试”:3},

我添加了以下数据作为theme.json样式:

“核心/段落”:{“排版”:{“lineHeight”:“var(--wp-自定义--line-hight--test)”}}

我在块编辑器上添加了一个段落,并验证了段落行高是否显示为3作为占位符。

@菲利佩科斯塔 大戟补充[功能]块API 允许表达块范例的API。 全局样式 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json标签2021年8月19日
@github-操作
复制链接

github-操作 机器人程序 评论2021年8月19日

尺寸变化:-35亿(0%)

总大小:1.04 MB

文件名 大小 更改
build/block-editor/index.min.js 119千字节 +614亿(+1%)
build/block-editor/style-rtl.css 13.8千字节 -230亿(0%)
构建/块编辑器/样式.css 13.8千字节 -230亿(0%)
build/block-library/index.min.js 150千字节 -70亿(0%)
build/blocks/index.min.js 47千字节 -24亿(0%)
build/components/style-rtl.css 15.8千字节 -10亿(0%)
build/components/style.css 15.8千字节 -80亿(0%)
构建/合成/索引.min.js 10.2千字节 +69亿(+1%)
构建/core-data/index.min.js 12.4千字节 -90亿(-1%)
build/edit-site/index.min.js 25.7千字节 -544亿(-2%)
build/editor/index.min.js 37.6千字节 +3亿(0%)
构建/i18n/index.min.js 3.6千字节 +80亿(0%)
查看未更改
文件名 大小
构建/a11y/index.min.js 931亿
build/admin-manifest/index.min.js 1.09千字节
build/annotations/index.min.js 2.7千字节
构建/api-fetch/index.min.js 2.19千字节
构建/auto/index.min.js 2.08千字节
build/blob/index.min.js 459亿
build/block-directory/index.min.js 6.2千字节
构建/块目录/样式-rtl.css 1.01千字节
构建/块目录/样式.css 1.01千字节
构建/块库/blocks/archives/editor-rtl.css 61亿
build/block-library/blocks/archives/editor.css 60亿
build/block-library/blocks/archives/style-rtl.css 65亿
build/block-library/blocks/archives/style.css 65亿
build/block-library/blocks/audio/editor-rtl.css 58亿
构建/块库/blocks/audio/editor.css 58磅
build/block-library/blocks/audio/style-rtl.css 111亿
build/block-library/blocks/audio/style.css 111亿
构建/block-library/blocks/audio/theme-rtl.css 125亿
构建/block-library/blocks/audio/theme.css 125亿
build/block-library/blocks/block/editor-rtl.css 161亿
build/block-library/blocks/block/editor.css 161亿
build/block-library/blocks/button/editor-rtl.css 474亿
build/block-library/blocks/button/editor.css 474亿
构建/块库/blocks/button/style-rtl.css 605磅
构建/块库/blocks/button/style.css 604亿
build/block-library/blocks/buttons/editor-rtl.css 315亿
构建/块库/blocks/buttons/editor.css 315亿
build/block-library/blocks/buttons/style-rtl.css 370亿
build/block-library/blocks/buttons/style.css 370亿
build/block-library/blocks/calendar/style-rtl.css 207亿
build/block-library/blocks/calendar/style.css 207磅
构建/块库/blocks/categories/editor-rtl.css 84亿
build/block-library/blocks/categories/editor.css 83亿
build/block-library/blocks/categories/style-rtl.css 79亿
build/block-library/blocks/categories/style.css 79亿
build/block-library/blocks/code/style-rtl.css 90亿
build/block-library/blocks/code/style.css 90亿
build/block-library/blocks/code/theme-rtl.css 131亿
build/block-library/blocks/code/theme.css 131亿
build/block-library/blocks/columns/editor-rtl.css 194亿
build/block-library/blocks/columns/editor.css 193亿
build/block-library/blocks/columns/style-rtl.css 474亿
build/block-library/blocks/columns/style.css 475亿
build/block-library/blocks/cover/editor-rtl.css 666亿
build/block-library/blocks/cover/editor.css 670亿
build/block-library/blocks/cover/style-rtl.css 1.23千字节
build/block-library/blocks/cover/style.css 1.23千字节
build/block-library/blocks/embed/editor-rtl.css 488亿
构建/块库/blocks/embed/editor.css 488亿
build/block-library/blocks/embed/style-rtl.css 400亿
构建/块库/blocks/embed/style.css 400亿
build/block-library/blocks/embed/theme-rtl.css 124亿
build/block-library/blocks/embed/theme.css 124亿
build/block-library/blocks/file/editor-rtl.css 300亿
build/block-library/blocks/file/editor.css 300亿
build/block-library/blocks/file/style-rtl.css 255亿
build/block-library/blocks/file/style.css 255亿
build/block-library/blocks/file/view.min.js 322亿
build/block-library/blocks/freeform/editor-rtl.css 2.44千字节
build/block-library/blocks/freeform/editor.css 2.44千字节
build/block-library/blocks/galletry/editor-rtl.css 879亿
build/block-library/blocks/galletry/editor.css 876亿
build/block-library/blocks/gallower/style-rtl.css 1.61千字节
build/block-library/blocks/gallower/style.css 1.61千字节
build/block-library/blocks/gallower/theme-rtl.css版本 122亿
build/block-library/blocks/gallery/主题.css 122亿
build/block-library/blocks/group/editor-rtl.css 159亿
build/block-library/blocks/group/editor.css 159亿
build/block-library/blocks/group/style-rtl.css 57亿
构建/块库/blocks/group/style.css 57亿
构建/块-库/块/组/主题-rtl.css 70亿
构建/块-库/块/组/主题.css 70亿
build/block-library/blocks/heading/style-rtl.css 76亿
build/block-library/blocks/heading/style.css 76亿
build/block-library/blocks/home-link/style-rtl.css 247亿
build/block-library/blocks/home-link/style.css 247亿
构建/block-library/blocks/html/editor-rtl.css 283亿
build/block-library/blocks/html/editor.css 284亿
build/block-library/blocks/image/editor-rtl.css 728亿
build/block-library/blocks/image/editor.css 728亿
构建/块库/blocks/image/style-rtl.css 482亿
build/block-library/blocks/image/style.css 487亿
构建/block-library/blocks/image/theme-rtl.css 124亿
构建/block-library/blocks/image/theme.css 124亿
构建/block-library/blocks/latest comments/style-rtl.css 284亿
build/block-library/blocks/latest-comments/style.css 284亿
build/block-library/blocks/platest-posts/editor-rtl.css 137亿
build/block-library/blocks/platest-posts/editor.css 137亿
build/block-library/blocks/platest-posts/style-rtl.css 528亿
build/block-library/blocks/platest-posts/style.css 527亿
build/block-library/blocks/list/style-rtl.css 63亿
build/block-library/blocks/list/style.css 63亿
build/block-library/blocks/media-text/editor-rtl.css 266亿
build/block-library/blocks/media-text/editor.css 263亿
build/block-library/blocks/media-text/style-rtl.css 488亿
build/block-library/blocks/media-text/style.css 485磅
构建/block-library/blocks/more/editor-rtl.css 431磅
build/block-library/blocks/more/editor.css 431磅
build/block-library/blocks/navigation-link/editor-rtl.css 489亿
build/block-library/blocks/navigation-link/editor.css 488亿
build/block-library/blocks/navigation-link/style-rtl.css 94亿
build/block-library/blocks/navigation-link/style.css 94亿
build/block-library/blocks/navigation/editor-rtl.css 1.7千字节
build/block-library/blocks/navigation/editor.css 1.71千字节
build/block-library/blocks/navigation/style-rtl.css 1.46千字节
build/block-library/blocks/navigation/style.css 1.46千字节
构建/块库/blocks/navigation/view.min.js 2.52千字节
build/block-library/blocks/nextpage/editor-rtl.css 395亿
build/block-library/blocks/nextpage/editor.css 395亿
构建/块库/blocks/page-list/editor-rtl.css 310亿
build/block-library/blocks/page-list/editor.css 310亿
build/block-library/blocks/page-list/style-rtl.css 241亿
build/block-library/blocks/page-list/style.css 241亿
build/block-library/blocks/pragment/editor-rtl.css 157亿
build/block-library/blocks/pragment/editor.css 157亿
build/block-library/blocks/pragment/style-rtl.css 248亿
构建/块库/blocks/paragraph/style.css 248亿
build/block-library/blocks/post-author/editor-rtl.css 210亿
build/block-library/blocks/post-author/editor.css 210亿
build/block-library/blocks/post-author/style-rtl.css 182亿
build/block-library/blocks/post-author/style.css 181亿
build/block-library/blocks/post-comments-form/style-rtl.css 140亿
build/block-library/blocks/post-comments-form/style.css 140亿
build/block-library/blocks/post-comments/style-rtl.css 360亿
build/block-library/blocks/post-comments/style.css 359亿
build/block-library/blocks/post-content/editor-rtl.css 138亿
构建/块库/blocks/post-content/editor.css 138亿
build/block-library/blocks/post-extract/editor-rtl.css 73亿
build/block-library/blocks/post-extract/editor.css 73亿
build/block-library/blocks/post-extract/style-rtl.css 69亿
build/block-library/blocks/post-extract/style.css 69亿
build/block-library/blocks/post-featured-image/editor-rtl.css 398亿
build/block-library/blocks/post-featured-image/editor.css 398亿
build/block-library/blocks/post-featured-image/style-rtl.css 143亿
build/block-library/blocks/post-featured-image/style.css 143磅
build/block-library/blocks/post-template/editor-rtl.css 99亿
构建/块库/blocks/post-template/editor.css 98亿
build/block-library/blocks/post-template/style-rtl.css 378亿
build/block-library/blocks/post-template/style.css 379亿
build/block-library/blocks/post-terms/style-rtl.css 73亿
build/block-library/blocks/post-terms/style.css 73亿
build/block-library/blocks/post-title/style-rtl.css 60亿
build/block-library/blocks/post-title/style.css 60亿
build/block-library/blocks/preactatted/style-rtl.css 103亿
build/block-library/blocks/preactatted/style.css 103亿
build/block-library/blocks/pullquote/editor-rtl.css 198亿
build/block-library/blocks/pullquote/editor.css 198亿
build/block-library/blocks/pullquote/style-rtl.css 361磅
build/block-library/blocks/pullquote/style.css 360亿
build/block-library/blocks/pullquote/theme-rtl.css 167亿
构建/block-library/blocks/pullquote/theme.css 167亿
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122亿
build/block-library/blocks/query-pagination-numbers/editor.css 121亿
build/block-library/blocks/query-pagination/editor-rtl.css 270亿
构建/块库/blocks/query分页/editor.css 262亿
build/block-library/blocks/query-pagination/style-rtl.css 168亿
build/block-library/blocks/query-pagination/style.css 168亿
build/block-library/blocks/query-title/editor-rtl.css 85亿
build/block-library/blocks/query-title/editor.css 85亿
build/block-library/blocks/query/editor-rtl.css 131亿
build/block-library/blocks/query/editor.css 132亿
build/block-library/blocks/quote/style-rtl.css 169亿
构建/块库/blocks/quote/style.css 169亿
build/block-library/blocks/quote/theme-rtl.css 220亿
构建/block-library/blocks/quote/theme.css 222亿
build/block-library/blocks/rss/editor-rtl.css 202亿
build/block-library/blocks/rss/editor.css 204亿
构建/块库/blocks/rss/style-rtl.css 289亿
build/block-library/blocks/rss/style.css 288亿
构建/块库/blocks/search/editor-rtl.css 165亿
构建/块库/blocks/search/editor.css 165亿
build/block-library/blocks/search/style-rtl.css 374亿
build/block-library/blocks/search/style.css 375亿
构建/block-library/blocks/search/theme-rtl.css 64亿
构建/block-library/blocks/search/theme.css 64亿
build/block-library/blocks/seleparator/editor-rtl.css 99亿
build/block-library/blocks/seleparator/editor.css 99亿
build/block-library/blocks/seleparater/style-rtl.css 250亿
build/block-library/blocks/seleparater/style.css 250亿
build/block-library/blocks/seleparater/theme-rtl.css 172亿
build/block-library/blocks/seleparater/theme.css 172亿
build/block-library/blocks/shortcode/editor-rtl.css 474亿
build/block-library/blocks/shortcode/editor.css 474亿
build/block-library/blocks/site-logo/editor-rtl.css 462亿
build/block-library/blocks/site-logo/editor.css 464亿
build/block-library/blocks/site徽标/style-rtl.css 153亿
build/block-library/blocks/site-logo/style.css 153亿
build/block-library/blocks/site-tagline/editor-rtl.css 86亿
build/block-library/blocks/site-tagline/editor.css 86亿
build/block-library/blocks/site-title/editor-rtl.css 84亿
构建/块库/块/站点标题/编辑器.css 84亿
build/block-library/blocks/social-link/editor-rtl.css 165亿
build/block-library/blocks/social-link/editor.css 165亿
build/block-library/blocks/social-links/editor-rtl.css 812磅
build/block-library/blocks/social-links/editor.css 811亿
build/block-library/blocks/social-links/style-rtl.css 1.33千字节
build/block-library/blocks/social-links/style.css 1.33千字节
build/block-library/blocks/spacer/editor-rtl.css 307亿
build/block-library/blocks/spacer/editor.css 307亿
build/block-library/blocks/spacer/style-rtl.css 48亿
build/block-library/blocks/spacer/style.css 48亿
构建/块库/blocks/table/editor-rtl.css 471亿
build/block-library/blocks/table/editor.css 472亿
构建/block-library/blocks/table/style-rtl.css 481亿
build/block-library/blocks/table/style.css 481亿
构建/block-library/blocks/table/theme-rtl.css 188亿
build/block-library/blocks/table/theme.css 188亿
构建/block-library/blocks/tag-cloud/style-rtl.css 146亿
构建/块库/块/标记云/style.css 146亿
build/block-library/blocks/template-part/editor-rtl.css 636亿
build/block-library/blocks/template-part/editor.css 635亿
build/block-library/blocks/template-part/theme-rtl.css 101亿
build/block-library/blocks/template-part/theme.css 101亿
build/block-library/blocks/term-description/editor-rtl.css 90亿
build/block-library/blocks/term-description/editor.css 90亿
build/block-library/blocks/text-columns/editor-rtl.css 95亿
build/block-library/blocks/text-columns/editor.css 95亿
build/block-library/blocks/text-columns/style-rtl.css 166亿
build/block-library/blocks/text-columns/style.css 166亿
build/block-library/blocks/verse/style-rtl.css 87亿
build/block-library/blocks/verse/style.css 87亿
build/block-library/blocks/video/editor-rtl.css 571亿
构建/块库/blocks/video/editor.css 公元572年
build/block-library/blocks/video/style-rtl.css 173亿
build/block-library/blocks/video/style.css 173亿
构建/block-library/blocks/video/theme-rtl.css 124亿
build/block-library/blocks/video/theme.css 124亿
build/block-library/common-rtl.css 1.29千字节
build/block-library/common.css 1.29千字节
build/block-library/editor-rtl.css 9.92千字节
build/block-library/editor.css 9.9千字节
build/block-library/reset-rtl.css 527亿
build/block-library/reset.css 527亿
build/block-library/style-rtl.css 10.6千字节
build/block-library/style.css 10.6千字节
构建/块-库/theme-rtl.css 658亿
构建/块-库/theme.css 663亿
构建/块序列化默认解析器/index.min.js 1.09千字节
build/block-serialization-specifi-parser/index.min.js 2.79千字节
build/components/index.min.js版本 209千字节
构建/定制e-widgets/index.min.js 11.1千字节
构建/定制e-widgets/style-rtl.css 1.5千字节
构建/定制e-widgets/style.css 1.49千字节
构建/数据控制/索引.min.js 614亿
build/data/index.min.js 7.1千字节
构建/日期/索引.min.js 31.5千字节
build/deprecated/index.min.js 428亿
构建/dom-ready/index.min.js 304亿
构建/dom/index.min.js 4.53千字节
build/edit-navigation/index.min.js 13.6千字节
构建/编辑导航/样式-rtl.css 3.14千巴
构建/编辑导航/样式.css 3.14千巴
构建/编辑-发布/分类-rtl.css 492亿
构建/编辑post/classic.css 494亿
build/edit-post/index.min.js 28.9千字节
构建/编辑-发布/样式-rtl.css 7.2千字节
构建/编辑-发布/样式.css 7.19千字节
构建/编辑site/style-rtl.css 5.07千字节
构建/编辑站点/style.css 5.07千字节
build/edit-widgets/index.min.js 16千字节
build/edit-widgets/style-rtl.css 4.06千字节
构建/编辑小部件/style.css 4.06千字节
构建/编辑器/样式-rtl.css 3.74千字节
构建/编辑器/样式.css 3.73千字节
build/element/index.min.js 3.17千字节
build/escape-html/index.min.js 517亿
build/format-library/index.min.js 5.36千字节
build/format-library/style-rtl.css 668亿
构建/格式化库/style.css 669亿
build/hooks/index.min.js 1.55千字节
build/html-entities/index.min.js 424亿
构建/is-shallow-equal/index.min.js 501 B
构建/键盘快捷键/index.min.js 1.49千字节
build/keycodes/index.min.js 1.25千字节
构建/list-reasable-blocks/index.min.js 1.85千字节
构建/list-rusable-blocks/style-rtl.css 838亿
build/list-rusable-blocks/style.css 838亿
build/media-utils/index.min.js 2.88千字节
build/notes/index.min.js版本 845亿
build/nux/index.min.js 2.03千字节
build/nux/style-rtl.css 747磅
build/nux/style.css 743亿
build/plugins/index.min.js 1.83千字节
build/primitives/index.min.js 921亿
build/priority-queue/index.min.js 582亿
build/react-i18n/index.min.js 671亿
build/redux-routine/index.min.js 2.63千巴
构建/可重用块/index.min.js 2.28千字节
构建/可重用块/样式-rtl.css 256亿
构建/可重用块/样式.css 256亿
构建/rich-text/index.min.js 10.6千字节
build/server-side-render/index.min.js 1.32千字节
build/shortcode/index.min.js 1.48千字节
构建/token-list/index.min.js 562亿
构建/url/index.min.js 1.74千字节
build/viewport/index.min.js 1.02千字节
build/warning/index.min.js 248亿
build/widgets/index.min.js版本 6.37千字节
构建/widgets/style-rtl.css 1.05千字节
build/widgets/style.css 1.05千字节
构建/wordcount/index.min.js 1.04千字节

压缩尺寸作用

@阿隆·罗伯特肖
复制链接
贡献者

抄送/@拉蒙德您在中的探索#34156这可能意味着你也会对审查这份公关感兴趣。

if(“移动”===$context){
$settings['__terialStyles']=$consolidated->get_raw_data()['styles'];
}
$settings['__terialStyles']=$consolidated->get_raw_data()['styles'];
复制链接
成员

选择隐藏此评论的原因

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

在这里要求我自己的利益:)

我想知道,有没有我们想要访问的地方的用例__实验风格在站点编辑器中,或者换句话说,站点编辑器中的任何模板都需要了解用户样式吗?

或者可以限制将此对象添加到编辑器/小部件上下文吗?

复制链接
成员

选择隐藏此评论的原因

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

能不能__实验风格数据仅限于可移动的后期编辑上下文?也许也在小部件编辑器,如果它使用现有的块编辑器挂钩(如line-height),但我不确定它是如何工作的。这个站点编辑器已经可以访问此数据,因此它不需要它。

复制链接
成员 作者

选择隐藏此评论的原因

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

我想知道,在站点编辑器中有没有我们想要访问__terialStyles的用例

是的,站点编辑器块上仍然需要访问__terialStyles标志,因为像line-height这样的钩子也在那里运行。但作为@奥安德雷格尔在网站编辑上说,我们已经有了这些信息,所以不需要再次传递,我将更新代码。不管怎样,块编辑器上的设置都是可用的,只需动态计算即可。

@@-70,7+74,7@@导出默认函数LineHeightControl({value:lineHeight,onChange}){
onKeyDown={handleOnKeyDown}
onChange={handleOnChange}
label={__('线条高度')}
占位符={基础_默认_值}
占位符={占位符}
复制链接
成员

选择隐藏此评论的原因

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

我喜欢这种做事方式。❤️ 使用默认值作为占位符是可行的,因为我仍然可以将数值设置为0例如,本机外观(灰显)表示它是默认值。

只需记下几件事,如果这件事顺利进行,所有这些都可能是后续跟进的最佳选择。

  • 我们必须解析单位值(二甲苯甚高频等),并在单位更改的控件中重置它们
  • 我测试了一些控件,我认为需要做一些工作来确保我们可以将默认值作为占位符传递给其余的控件挂钩。例如,箱控需要调整以处理顶部/右侧/底部/左侧输入的占位符。这是用于间距控制,如边距和填充。但任何进口的东西<单元控制/>直接例如边界宽度应该就行了👍

复制链接
成员 作者

选择隐藏此评论的原因

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

关于装置的优点@拉蒙吉德。我想我们可以与单位进行跟进,以避免增加该PR。

@拉蒙德
复制链接
成员

感谢您使用此功能,通过阅读代码,我学到了很多。就在我们讨论这是否也是一个好主意的时候(我认为是!)。

我根据测试说明进行了测试,并为各种块控件挂钩添加了默认值,所有这些看起来都像预期的那样工作,css变量被正确解析。

如果需要,我很乐意帮助确保占位符也适用于我们的控件。

期待这方面的更新!🙇

@大肆宣传
复制链接
贡献者

此机制对移动APP很有用,因为我们可以更容易地将样式应用于来自theme.json cc:@大肆宣传.

谢谢你的ping Jorge!我已经通知了在GSS附近工作的移动人员👍 (抄送@杰瑞克斯@enejb公司).

@奥安德雷格尔
复制链接
成员

在测试时,我错过了将用户值重置为line-hight控件中的主题值的功能,该控件在#34260

const设置=useSelect(
(选择)=>{
const settings=select(blockEditorStore).getSettings();
const settingsForBlock=获取(设置[
复制链接
成员

选择隐藏此评论的原因

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

嗯,正在查看这使用的是什么类型的数据。关于遗传如何/为什么会增加复杂性的一些头脑风暴需要考虑:

  • 有些CSS属性是继承的,有些则不是。
  • 一个块可以是顶级的,也可以嵌套在其他块中:为了确定我们需要遍历树并合并链的所有值的值。
  • CSS自定义属性:如果主题使用它们,则会破坏属性的CSS继承模型。

我同意此PR应仅限于从特定块获取数据。

if(!variable ||!isString(variable)){
返回变量;
}
const INTERNAL_REFERNCE_PREFIX=“变量:”;
复制链接
成员

选择隐藏此评论的原因

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

你认为使用显式名称来记录这些数据的来源是什么?我正沿着以下思路思考一些事情:

常量 用户_值_前缀 = '变量:';
常量 主题_值_前缀 = '变量(--wp--';
常量 主题_值_后缀 = ')';

复制链接
成员

选择隐藏此评论的原因

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

你觉得用什么替代上下文通过块名称? 我们不再使用上下文任何地方,所以我认为读者会更熟悉它块名称(我们未来的自我包括😅 ).

return getResolvedStyleVariable(features,blockName,result);
}

导出函数getResolvedStyleVariable(功能、上下文、变量){
复制链接
成员

选择隐藏此评论的原因

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

根据这个函数的名称,我不清楚它的用途。我们有什么替代方案来改进这一点?关于以下内容呢从样式获取值? 它与其他助手函数配合得很好从预设变量获取值从自定义变量获取值

复制链接
成员

选择隐藏此评论的原因

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

我注意到在把它移到这里之前,它被称为从变量中获取值,这个名字对我也适用。

特征,
上下文,
预设路径,
预设属性,
复制链接
成员

选择隐藏此评论的原因

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

给这两个命名怎么样预设属性名称预设属性值沟通他们是什么?

复制链接
成员

选择隐藏此评论的原因

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

似乎查找输入预设依据是为了找到预设对象预设属性名称与匹配预设属性值在所有可用资源中。

这里的复杂性在于,它需要考虑到1)可能存在块和全局预设,2)其中任何一个可能具有核心、主题和用户预设。这是可用的候选预设的完整列表,按优先级排序:

  1. 阻止来自用户的预设
  2. 阻止来自主题的预设
  3. 从核心块预设
  4. 来自用户的全局预设
  5. 主题的全局预设
  6. 来自核心的全局预设

我的理解是,我们应该选出第一位候选人预设属性名称比赛预设属性值那还不够吗?我看过介绍这个功能的公关#33149我不明白,当要查找的属性不是段塞.

复制链接
成员

选择隐藏此评论的原因

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

我在中更新了大旅行箱此函数对该算法的实现:

  1. 创建可用预设的列表,按优先级排序。
  2. 返回第一个预设。

其工作原理如#33149

代码,供参考:

功能 查找输入预设依据(
	样式
	块名称
	预设路径
	预设属性名称
	预设属性值
) {
	常量 候选人 = [];
	常量 起源 = [ '用户' '主题' “用户” ];

	常量 块预设 = 得到( 样式 [
		'设置'
		“块”
		块名称...预设路径
	] );
	起源.对于每个( ( 起源 ) => {
		如果 ( 块预设?.[ 起源 ] ) {
			块预设[ 起源 ].对于每个( ( 预设 ) => {
				如果 ( 预设[ 预设属性名称 ] === 预设属性值 ) {
					候选人.( 预设 );
				}
			} );
		}
	} );

	常量 全局预设 = 得到( 样式 [ '设置'...预设路径 ] );
	起源.对于每个( ( 起源 ) => {
		如果 ( 全局预设?.[ 起源 ] ) {
			全局预设[ 起源 ].对于每个( ( 预设 ) => {
				如果 ( 预设[ 预设属性名称 ] === 预设属性值 ) {
					候选人.( 预设 );
				}
			} );
		}
	} );

	返回 候选人.长度 >= 1?候选人[ 0 ]:未定义;
}

复制链接
成员 作者

@大戟 大戟 2021年8月31日

选择隐藏此评论的原因

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

您好!@奥安德雷格尔

我的理解是,我们应该返回presetPropertyName与presetProportyValue匹配的第一个候选者。这还不够吗?

我认为这还不够。
想象用户主题.json定义预设:

{颜色:“#000”slug:“黑色”,name:“黑色”}

主题定义了:

{颜色:“#001”slug:“黑色”,name:“黑色”}

如果我们搜索“#1个“如果没有递归,我们将返回主题预设,但不应返回,因为变量已被覆盖,现在没有带颜色的变量”#1个".
递归确保当我们找到预设时,没有其他具有相同slug和不同属性的优先级更高的预设,因为如果有预设,则应忽略。

复制链接
成员

选择隐藏此评论的原因

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

不错的一个👍 我已经进行了一些测试c78a322号以确保记录并保留此行为。

返回变量;
}

导出函数getPresetVariableRepresentingAValue(
复制链接
成员

选择隐藏此评论的原因

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

更多命名挑剔😅 在把它移到这里之前获取预设变量如果我们想给它更多的上下文,也许它可以获取预设变量源值,它也与此文件中的另一个导出函数对称。

@大戟 大戟 用力推动的这个 添加/api-to-expose-global-styles-to-blocks 分支 7立方厘米9立方厘米 6773622 比较 2021年8月31日17:25
@大戟
复制链接
成员 作者

您好!@拉蒙德@奥安德雷格尔,谢谢您的评论!您的反馈已得到应用/答复。让我知道是否有其他可能的改进,或者是否可以发货。

@邋遢鬼
复制链接
贡献者

你觉得这个试图做类似事情的公关怎么样?#41696

@蒂莫西BJacobs 蒂莫西·巴科布斯删除了他们的审查请求 2022年6月22日16:39
@吉奥罗牌手表
复制链接
成员

你觉得这个试图做类似事情的公关怎么样?#41696

@大戟,这个公关还是必要的吗?

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

你觉得这个试图做类似事情的公关怎么样?#41696

@大戟,这个公关还是必要的吗?

我们仍然需要这个PR或类似的东西,以便在后期编辑器中访问特定块的全局样式值。这方面的一个重要用例是反映块控件中的当前状态。如果块类型具有全局设置的填充,并且还具有允许为特定块设置自定义值的填充控件,则最初将填充控件设置为任何全局值都是有意义的#42173个.

#41696不能解决这个问题;它只允许我们将全局值设置为theme.json中的其他全局值。

@大戟
复制链接
成员 作者

当我尝试将段落的行高设置为自定义变量时,占位符如下所示:屏幕截图2021-09-03,12 27 03

可能在重设基期间出现了一些问题。如果我们想审查这份公关,我可以解决这个问题。

你觉得这个试图做类似事情的公关怎么样?#41696

PR是有意义的,它只影响引擎。在这个例子中,我们试图让块检查器反映当前不可能应用于块的样式。一个块可能具有从全局样式应用的非常大的字体大小,用户希望在特定情况下稍微减小它,但甚至不知道实际的字体大小。

我们仍然需要这个PR或类似的东西,以便在后期编辑器中访问特定块的全局样式值。这方面的一个重要用例是反映块控件中的当前状态。

确切地说,我仍然认为在块检查器上反映样式是我们想要做的事情。

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

可能在重设基期间出现了一些问题。如果我们想查看此公关,我可以修复此问题。

谢谢@大戟,如果你想恢复这方面的工作,我很乐意帮助你复习!

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

这个分支充满了冲突,所以我将开始将更改复制到一个新的分支,因为这会更容易😅

@大戟
复制链接
成员 作者

将开始关闭此请购单作为新分支。

免费注册 在GitHub上加入此对话.已经有帐户了吗?登录以发表评论
标签
[功能]块API 允许表达块范例的API。 框架 与更广泛的框架主题相关的问题,尤其是与javascript相关的问题 全局样式 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json
项目
还没有
开发

成功合并此请求可能会解决这些问题。

还没有