跳到内容
新发行

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

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

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

添加:在块转换期间保持样式的机制。 #37596

已合并
将1个提交合并到
2022年1月27日

对话

大戟
复制链接
成员

修复:#36745

此PR提出了一种在变换期间保持块样式的机制。该机制适用于颜色和字体大小,如果接受该PR,该机制将扩展到其他有意义的样式。

这是如何测试的?

我创建了一个段落。
我添加了自定义文本颜色。
我添加了命名背景色和命名链接色。
我添加了自定义字体大小。
我将段落转换为一个列表,并验证了所有样式都保留了下来。
我添加了另一个列表项。
我选择了一个预设的字体大小。
我将列表转换为段落,并验证所有样式都保留了下来。
我选择了这些段落,并将其转换回一个列表,并验证了列表中持久存在的样式。

@菲利佩科斯塔 大戟补充[类型]增强功能 改进建议。 [功能]块 块的总体功能 全球风格 任何与更广泛的全局样式工作相关的内容,包括样式引擎和主题.json标签2021年12月22日
@github-操作
复制链接

github-操作 机器人程序 评论2021年12月22日

尺寸变化:+309亿(0%)

总尺寸:1.14 MB

文件名 大小 更改
build/block-editor/index.min.js 141千字节 +303亿(0%)
build/blocks/index.min.js 46.4千字节 +6亿(0%)
ℹ️查看未更改
文件名 大小
build/a11y/index.min.js版本 960亿
build/admin-manifest/index.min.js 1.1千字节
build/annotations/index.min.js 2.75千字节
构建/api-fetch/index.min.js 2.22千字节
构建/auto/index.min.js 2.12千字节
build/blob/index.min.js 459亿
build/block-directory/index.min.js 6.28千字节
构建/块目录/样式-rtl.css 1.01千字节
构建/块目录/样式.css 1.01千字节
构建/块编辑器/默认编辑器样式-rtl.css 378亿
构建/块编辑器/默认编辑器样式.css 378亿
build/block-editor/style-rtl.css 14.6千字节
构建/块编辑器/样式.css 14.6千字节
build/block-library/blocks/archives/editor-rtl.css 61亿
build/block-library/blocks/archives/editor.css 60亿
构建/block-library/blocks/archives/style-rtl.css 65亿
构建/块库/块/档案/样式.css 65亿
build/block-library/blocks/audio/editor-rtl.css 150亿
构建/块库/blocks/audio/editor.css 150亿
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 470亿
build/block-library/blocks/button/editor.css 470亿
build/block-library/blocks/button/style-rtl.css 560亿
build/block-library/blocks/button/style.css 560亿
build/block-library/blocks/buttons/editor-rtl.css 292亿
build/block-library/blocks/buttons/editor.css 292亿
build/block-library/blocks/buttons/style-rtl.css 275亿
build/block-library/blocks/buttons/style.css 275亿
build/block-library/blocks/calendar/style-rtl.css 207亿
构建/块库/blocks/calendar/style.css 207亿
build/block-library/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 108亿
build/block-library/blocks/columns/editor.css 108亿
build/block-library/blocks/columns/style-rtl.css 406亿
build/block-library/blocks/columns/style.css 406亿
构建/块库/块/注释模板/style-rtl.css 127亿
build/block-library/blocks/comment-template/style.css 127亿
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123亿
build/block-library/blocks/comments-pagination-numbers/editor.css 121亿
build/block-library/blocks/comments-pagination/editor-rtl.css 222亿
build/block-library/blocks/comments-pageination/editor.css 209亿
build/block-library/blocks/comments-pagination/style-rtl.css 235亿
build/block-library/blocks/comments-pageination/style.css 231亿
build/block-library/blocks/comments-query-loop/editor-rtl.css 95亿
build/block-library/blocks/comments-query-loop/editor.css 95亿
build/block-library/blocks/cover/editor-rtl.css 546亿
build/block-library/blocks/cover/editor.css 547亿
build/block-library/blocks/cover/style-rtl.css 1.22千字节
build/block-library/blocks/cover/style.css 1.22千字节
build/block-library/blocks/embed/editor-rtl.css 293亿
build/block-library/blocks/embed/editor.css 293亿
build/block-library/blocks/embed/style-rtl.css 417亿
build/block-library/blocks/embed/style.css 417亿
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 965亿
build/block-library/blocks/galletry/editor.css 967亿
build/block-library/blocks/gallower/style-rtl.css 1.6千字节
build/block-library/blocks/gallower/style.css 1.6千字节
build/block-library/blocks/gallower/theme-rtl.css版本 122亿
构建/block-library/blocks/gallery/theme.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亿
build/block-library/blocks/group/style.css 57亿
构建/块-库/块/组/主题-rtl.css 78亿
构建/块-库/块/组/主题.css 78亿
build/block-library/blocks/heading/style-rtl.css 114亿
build/block-library/blocks/heading/style.css 114亿
build/block-library/blocks/html/editor-rtl.css 332磅
build/block-library/blocks/html/editor.css 333亿
build/block-library/blocks/image/editor-rtl.css 810亿
build/block-library/blocks/image/editor.css 809亿
build/block-library/blocks/image/style-rtl.css 507亿
build/block-library/blocks/image/style.css 511亿
构建/block-library/blocks/image/theme-rtl.css 124亿
构建/block-library/blocks/image/theme.css 124亿
build/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 199亿
构建/块库/blocks/latest posts/editor.css 198亿
build/block-library/blocks/platest-posts/style-rtl.css 447亿
build/block-library/blocks/platest-posts/style.css 446磅
build/block-library/blocks/list/style-rtl.css 94亿
build/block-library/blocks/list/style.css 94亿
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 493亿
build/block-library/blocks/media-text/style.css 490亿
build/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 649亿
build/block-library/blocks/navigation-link/editor.css 650亿
build/block-library/blocks/navigation-link/style-rtl.css 94亿
build/block-library/blocks/navigation-link/style.css 94亿
build/block-library/blocks/navigation-submenu/editor-rtl.css 299亿
build/block-library/blocks/navigation-submenu/editor.css 299亿
build/block-library/blocks/navigation-submenu/view.min.js 343亿
构建/block-library/blocks/navigation/editor-rtl.css 1.99千字节
构建/块库/blocks/navigation/editor.css 2千字节
build/block-library/blocks/navigation/style-rtl.css 1.85千字节
build/block-library/blocks/navigation/style.css 1.84千字节
build/block-library/blocks/navigation/view.min.js 2.81千字节
build/block-library/blocks/nextpage/editor-rtl.css 395亿
build/block-library/blocks/nextpage/editor.css 395亿
build/block-library/blocks/page-list/editor-rtl.css 401亿
build/block-library/blocks/page-list/editor.css 402亿
build/block-library/blocks/page-list/style-rtl.css 175亿
build/block-library/blocks/page-list/style.css 175亿
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 273亿
build/block-library/blocks/pragment/style.css 273亿
build/block-library/blocks/post-author/style-rtl.css 175亿
build/block-library/blocks/post-author/style.css 176亿
构建/块库/blocks/post注释表单/style-rtl.css 446亿
build/block-library/blocks/post-comments-form/style.css 446亿
build/block-library/blocks/post-comments/style-rtl.css 521亿
build/block-library/blocks/post-comments/style.css 521亿
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 721亿
build/block-library/blocks/post-featured-image/editor.css 721亿
build/block-library/blocks/post-featured-image/style-rtl.css 153亿
build/block-library/blocks/post-featured-image/style.css 153亿
build/block-library/blocks/post-template/editor-rtl.css 99亿
build/block-library/blocks/post-template/editor.css 98亿
build/block-library/blocks/post-template/style-rtl.css 323亿
build/block-library/blocks/post-template/style.css 323亿
构建/块库/blocks/post-terms/style-rtl.css 73亿
构建/块库/blocks/post-terms/style.css 73亿
build/block-library/blocks/post-title/style-rtl.css 80亿
build/block-library/blocks/post-title/style.css 80亿
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 389亿
build/block-library/blocks/pullquote/style.css 388亿
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 221亿
build/block-library/blocks/query-pagination/editor.css 211亿
build/block-library/blocks/query-pagination/style-rtl.css 234亿
build/block-library/blocks/query-pagination/style.css 231亿
构建/块库/blocks/query/editor-rtl.css 131亿
build/block-library/blocks/query/editor.css 132亿
build/block-library/blocks/quote/style-rtl.css 187亿
build/block-library/blocks/quote/style.css 187亿
build/block-library/blocks/quote/theme-rtl.css 223亿
构建/block-library/blocks/quote/theme.css 226亿
build/block-library/blocks/rss/editor-rtl.css 202磅
build/block-library/blocks/rss/editor.css 204亿
build/block-library/blocks/rss/style-rtl.css 289亿
build/block-library/blocks/rss/style.css 288亿
build/block-library/blocks/search/editor-rtl.css 165亿
build/block-library/blocks/search/editor.css 165亿
build/block-library/blocks/search/style-rtl.css 397亿
build/block-library/blocks/search/style.css 398磅
构建/block-library/blocks/search/theme-rtl.css 64亿
构建/block-library/blocks/search/theme.css 64亿
构建/块库/blocks/separator/editor-rtl.css 99亿
build/block-library/blocks/seleparator/editor.css 99亿
构建/块库/块/分隔符/style-rtl.css 245亿
build/block-library/blocks/seleparater/style.css 245亿
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 744亿
build/block-library/blocks/site-logo/editor.css 744亿
build/block-library/blocks/site-logo/style-rtl.css 181亿
build/block-library/blocks/site-logo/style.css 181亿
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亿
build/block-library/blocks/site-title/editor.css 84亿
build/block-library/blocks/social-link/editor-rtl.css 177亿
build/block-library/blocks/social-link/editor.css 177亿
build/block-library/blocks/social-links/editor-rtl.css 674亿
build/block-library/blocks/social-links/editor.css 673亿
build/block-library/blocks/social-links/style-rtl.css 1.32千字节
build/block-library/blocks/social-links/style.css 1.32千字节
build/block-library/blocks/spacer/editor-rtl.css 332磅
构建/块库/blocks/spacer/editor.css 332磅
构建/块库/blocks/spacer/style-rtl.css 48亿
build/block-library/blocks/spacer/style.css 48亿
build/block-library/blocks/table/editor-rtl.css 471亿
build/block-library/blocks/table/editor.css 472亿
build/block-library/blocks/table/style-rtl.css 481亿
build/block-library/blocks/table/style.css 481亿
build/block-library/blocks/table/theme-rtl.css 188亿
build/block-library/blocks/table/theme.css 188亿
build/block-library/blocks/tag-cloud/style-rtl.css 214亿
build/block-library/blocks/tag-cloud/style.css 215亿
build/block-library/blocks/template-part/editor-rtl.css 560亿
build/block-library/blocks/template-part/editor.css 559亿
build/block-library/blocks/template-part/theme-rtl.css 101亿
build/block-library/blocks/template-part/theme.css 101亿
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亿
构建/块库/blocks/video/editor-rtl.css 571亿
构建/块库/blocks/video/editor.css 公元572年
build/block-library/blocks/video/style-rtl.css 173亿
构建/块库/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 908亿
build/block-library/common.css 905亿
build/block-library/editor-rtl.css 10.1千字节
build/block-library/editor.css 10.1千字节
build/block-library/index.min.js 166千字节
build/block-library/reset-rtl.css 474亿
build/block-library/reset.css 474磅
build/block-library/style-rtl.css 10.8千字节
构建/块库/style.css 10.8千字节
构建/块库/theme-rtl.css 672亿
构建/块库/theme.css 676亿
build/block-serialization-default-parser/index.min.js 1.09千字节
build/block-serialization-specifi-parser/index.min.js 2.79千字节
build/components/index.min.js 215千字节
build/components/style-rtl.css 15.5千字节
build/components/style.css 15.5千字节
构建/合成/索引.min.js 11.2千字节
构建/core-data/index.min.js 13.4千字节
构建/定制e-widgets/index.min.js 11.4千字节
构建/定制e-widgets/style-rtl.css 1.5千字节
构建/定制e-widgets/style.css 1.49千字节
构建/数据控制/索引.min.js 631亿
build/data/index.min.js 7.49千字节
构建/日期/索引.min.js 31.9千字节
build/deprecated/index.min.js 485亿
build/dom-ready/index.min.js版本 304亿
构建/dom/index.min.js 4.5千字节
build/edit-navigation/index.min.js 16千字节
构建/编辑导航/样式-rtl.css 3.76千字节
构建/编辑导航/样式.css 3.76千字节
构建/编辑-发布/分类-rtl.css 546亿
构建/编辑post/classic.css 547亿
build/edit-post/index.min.js 29.6千字节
构建/编辑-发布/样式-rtl.css 7.15千字节
构建/编辑-发布/样式.css 7.14千字节
build/edit-site/index.min.js 41.5千字节
构建/编辑site/style-rtl.css 7.22千字节
构建/编辑site/style.css 7.21千字节
build/edit-widgets/index.min.js 16.5千字节
build/edit-widgets/style-rtl.css 4.17千字节
build/edit-widgets/style.css 4.17千字节
build/editor/index.min.js 38.4千字节
构建/编辑器/样式-rtl.css 3.71千字节
构建/编辑器/样式.css 3.71千字节
build/element/index.min.js 3.29千字节
build/escape-html/index.min.js 517亿
build/format-library/index.min.js 6.58千字节
build/format-library/style-rtl.css 571磅
构建/格式库/样式.css 571亿
build/hooks/index.min.js 1.63千字节
build/html/实体/index.min.js 424亿
构建/i18n/index.min.js 3.75千字节
构建/is-shallow-equal/index.min.js 501 B
构建/键盘快捷方式/index.min.js 1.8千字节
build/keycodes/index.min.js 1.39千字节
构建/list-reasable-blocks/index.min.js 1.72千字节
构建/list-rusable-blocks/style-rtl.css 838亿
build/list-rusable-blocks/style.css 838亿
build/media-utils/index.min.js 2.92千字节
build/notices/index.min.js 925亿
build/nux/index.min.js 2.08千字节
build/nux/style-rtl.css 747亿
build/nux/style.css 743亿
build/plugins/index.min.js 1.84千字节
build/primitives/index.min.js 924亿
build/priority-queue/index.min.js 582亿
build/react-i18n/index.min.js 671亿
build/react-refresh-entry/index.min.js 8.44千字节
build/react-refresh-runtime/index.min.js 7.31千字节
build/redux-routine/index.min.js 2.65千字节
构建/可重用块/index.min.js 2.22千字节
构建/可重用块/style-rtl.css 256亿
构建/可重用块/样式.css 256亿
构建/rich-text/index.min.js 11千字节
build/server-side-render/index.min.js 1.58千字节
build/shortcode/index.min.js 1.49千字节
构建/token-list/index.min.js 639亿
构建/url/index.min.js 1.9千字节
build/viewport/index.min.js 1.05千字节
build/warning/index.min.js 248亿
build/widgets/index.min.js 7.15千字节
构建/widgets/style-rtl.css 1.16千字节
build/widgets/style.css 1.16千字节
构建/wordcount/index.min.js 1.04千字节

压缩尺寸作用

@大戟 大戟 用力推动这个 添加/keep-styles-during-block-transforms 分支2次,最近一次 数据库681e5 6032402 比较 2021年12月27日14:29
复制链接
贡献者

@ntsekouras公司 ntsekouras公司 留下了评论

选择隐藏此评论的原因

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

谢谢你为这个Jorge工作!

这个问题更加复杂,因为我们可以一次转换多个块,而这里我们不考虑这一点(考虑第一个块的属性)。。我还没有深入考虑过这一点,但我们也应该考虑在产生1-1转换或使用Innerblocks创建包装块的块之间进行任何可能的不同处理。

它实际上提醒了我匹配块模式的情况在这里.

我有一段录音,显示了多选两段的用例,并显示了转换为的预览:标题和组

屏幕。记录2021-12-27.at.7.05.13.PM.mov

packages/block-editor/src/hooks/utils.js 过时的 显示已解决 隐藏已解决
@大戟 大戟 用力推动这个 添加/keep-styles-during-block-transforms 分支2次,最近一次 b7b4f99 54dfa35型 比较 2022年1月20日22:33
@大戟
复制链接
成员 作者

@ntsekouras公司,我扩展了逻辑以涵盖您提到的案例。它现在应该可以很好地处理大多数情况。

@ntsekouras公司
复制链接
贡献者

嘿Jorge!您认为可以将此功能集成到切换到块类型块API? 我只是做了一个快速测试(没有代码检查),似乎工作得很好,但在我看来,通过在块支持挂钩中添加代码,这是一个有点临时/“断开”的解决方案。在区块API中没有达到这一点有具体原因吗?

@菲利佩科斯塔
复制链接
成员 作者

嘿,豪尔赫!您认为可以将此功能集成到切换到块类型阻止API? 我只是做了一个快速测试(没有代码检查),似乎工作得很好,但在我看来,通过在块支持挂钩中添加代码,这是一个有点临时/“断开”的解决方案。在区块API中没有达到这一点有具体原因吗?

@ntsekouras公司,

我只是做了一个快速测试(没有代码检查),似乎工作得很好,但在我看来,通过在块支持挂钩中添加代码,这是一个有点临时/“断开”的解决方案。在区块API中没有达到这一点有具体原因吗?

与样式相关的所有内容都是作为块支持挂钩实现的,样式就像插件一样实现。甚至添加样式标记和类都是作为钩子实现的,例如:inhttps://raw.githubusercontent.com/WordPress/gutenberg/54dfa3527d9101dabb35cf6d630b6e25b809523c/packages/block-editor/src/hooks/color.jsaddSaveProps函数。UI也在ColorEdit的挂钩中实现。因此,我们的块API甚至不知道颜色、排版等。我认为,如果与此功能相关的一切都在挂钩中(UI、标记等),那么处理转换的方式也应该在挂钩中。如果我们将其添加到块API中,我们就打破了抽象,API会意识到颜色、排版等。如果我们直接将转换(相关性较小)添加到引擎中,那么标记(基本部分)是作为挂钩添加的,而不是直接添加到引擎吗?

@ntsekouras公司
复制链接
贡献者

如果我们将其添加到块API中,我们将打破API对颜色、排版等的抽象。

是的,你说得对!看来我的评论太仓促了😄 . 明天早上我将首先进行适当的复习。

复制链接
贡献者

@ntsekouras公司 ntsekouras公司 留下了评论

选择隐藏此评论的原因

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

谢谢Jorge!这在我的测试中似乎很有效。我们应该增加一个小的e2e测试吗?

软件包/块编辑器/src/hooks/utils.js 显示已解决 隐藏已解决
packages/block-editor/src/hooks/font-size.js 显示已解决 隐藏已解决
@大戟 大戟 用力推动这个 添加/keep-styles-during-block-transforms 分支 54dfa35型 6349892 比较 2022年1月26日16:26
复制链接
贡献者

@ntsekouras公司 ntsekouras公司 留下了评论

选择隐藏此评论的原因

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

谢谢@大戟!

我仍然认为一些e2e测试会很好😄

@大戟 大戟合并提交4e6538天进入之内 大旅行箱 2022年1月27日
@大戟 大戟删除了 添加/keep-styles-during-block-transforms 分支 2022年1月27日11:51
@大戟
复制链接
成员 作者

谢谢你的评论@ntsekouras公司.

我正在进行一些端到端测试:)

免费注册 在GitHub上加入此对话.已经有帐户了吗?登录以发表评论
标签
[Feature]块 块的总体功能 全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json [类型]增强功能 改进建议。
项目
还没有
开发

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

更改块类型时保留块字体大小和颜色调整
2名参与者