Add "Learn more about CSS" help text to Custom CSS control

[richtabor]

What?

Closes #46669 by replacing the redundant help text with the same "Learn more about CSS" link that currently exists in the Customizer.

Why?

• Remove duplicative/confusing help text (current help text suggests CSS is applied to a "template", but it is applied throughout the site).
• Present a teachable moment for those users who want to deploy additional CSS on their site.

How?

Leverages the ExternalLink component, using the same link that is currently employed in the Customizer.

Testing Instructions

1. Enable the Global styles custom CSS experiment
2. Open the Site Editor.
3. View the Global Styles sidebar.
4. Click on "Custom"
5. View the control with new help text

Screenshot

Current:

Suggested:

[github-actions]

Size Change: -2 B (0%)

Total Size: 1.33 MB

Filename	Size	Change
build/edit-site/index.min.js	66.4 kB	-2 B (0%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	993 B
build/annotations/index.min.js	2.78 kB
build/api-fetch/index.min.js	2.27 kB
build/autop/index.min.js	2.15 kB
build/blob/index.min.js	487 B
build/block-directory/index.min.js	7.16 kB
build/block-directory/style-rtl.css	1.04 kB
build/block-directory/style.css	1.04 kB
build/block-editor/content-rtl.css	2.96 kB
build/block-editor/content.css	2.96 kB
build/block-editor/default-editor-styles-rtl.css	403 B
build/block-editor/default-editor-styles.css	403 B
build/block-editor/index.min.js	184 kB
build/block-editor/style-rtl.css	14.6 kB
build/block-editor/style.css	14.6 kB
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	90 B
build/block-library/blocks/archives/style.css	90 B
build/block-library/blocks/audio/editor-rtl.css	150 B
build/block-library/blocks/audio/editor.css	150 B
build/block-library/blocks/audio/style-rtl.css	122 B
build/block-library/blocks/audio/style.css	122 B
build/block-library/blocks/audio/theme-rtl.css	138 B
build/block-library/blocks/audio/theme.css	138 B
build/block-library/blocks/avatar/editor-rtl.css	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	84 B
build/block-library/blocks/avatar/style.css	84 B
build/block-library/blocks/block/editor-rtl.css	305 B
build/block-library/blocks/block/editor.css	305 B
build/block-library/blocks/button/editor-rtl.css	485 B
build/block-library/blocks/button/editor.css	485 B
build/block-library/blocks/button/style-rtl.css	532 B
build/block-library/blocks/button/style.css	532 B
build/block-library/blocks/buttons/editor-rtl.css	337 B
build/block-library/blocks/buttons/editor.css	337 B
build/block-library/blocks/buttons/style-rtl.css	332 B
build/block-library/blocks/buttons/style.css	332 B
build/block-library/blocks/calendar/style-rtl.css	239 B
build/block-library/blocks/calendar/style.css	239 B
build/block-library/blocks/categories/editor-rtl.css	84 B
build/block-library/blocks/categories/editor.css	83 B
build/block-library/blocks/categories/style-rtl.css	100 B
build/block-library/blocks/categories/style.css	100 B
build/block-library/blocks/code/editor-rtl.css	53 B
build/block-library/blocks/code/editor.css	53 B
build/block-library/blocks/code/style-rtl.css	121 B
build/block-library/blocks/code/style.css	121 B
build/block-library/blocks/code/theme-rtl.css	124 B
build/block-library/blocks/code/theme.css	124 B
build/block-library/blocks/columns/editor-rtl.css	108 B
build/block-library/blocks/columns/editor.css	108 B
build/block-library/blocks/columns/style-rtl.css	406 B
build/block-library/blocks/columns/style.css	406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	125 B
build/block-library/blocks/comment-author-avatar/editor.css	125 B
build/block-library/blocks/comment-content/style-rtl.css	92 B
build/block-library/blocks/comment-content/style.css	92 B
build/block-library/blocks/comment-template/style-rtl.css	199 B
build/block-library/blocks/comment-template/style.css	198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	123 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	222 B
build/block-library/blocks/comments-pagination/editor.css	209 B
build/block-library/blocks/comments-pagination/style-rtl.css	235 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-title/editor-rtl.css	75 B
build/block-library/blocks/comments-title/editor.css	75 B
build/block-library/blocks/comments/editor-rtl.css	840 B
build/block-library/blocks/comments/editor.css	839 B
build/block-library/blocks/comments/style-rtl.css	637 B
build/block-library/blocks/comments/style.css	636 B
build/block-library/blocks/cover/editor-rtl.css	612 B
build/block-library/blocks/cover/editor.css	613 B
build/block-library/blocks/cover/style-rtl.css	1.57 kB
build/block-library/blocks/cover/style.css	1.56 kB
build/block-library/blocks/embed/editor-rtl.css	293 B
build/block-library/blocks/embed/editor.css	293 B
build/block-library/blocks/embed/style-rtl.css	410 B
build/block-library/blocks/embed/style.css	410 B
build/block-library/blocks/embed/theme-rtl.css	138 B
build/block-library/blocks/embed/theme.css	138 B
build/block-library/blocks/file/editor-rtl.css	300 B
build/block-library/blocks/file/editor.css	300 B
build/block-library/blocks/file/style-rtl.css	253 B
build/block-library/blocks/file/style.css	254 B
build/block-library/blocks/file/view.min.js	353 B
build/block-library/blocks/freeform/editor-rtl.css	2.44 kB
build/block-library/blocks/freeform/editor.css	2.44 kB
build/block-library/blocks/gallery/editor-rtl.css	984 B
build/block-library/blocks/gallery/editor.css	988 B
build/block-library/blocks/gallery/style-rtl.css	1.55 kB
build/block-library/blocks/gallery/style.css	1.55 kB
build/block-library/blocks/gallery/theme-rtl.css	122 B
build/block-library/blocks/gallery/theme.css	122 B
build/block-library/blocks/group/editor-rtl.css	654 B
build/block-library/blocks/group/editor.css	654 B
build/block-library/blocks/group/style-rtl.css	57 B
build/block-library/blocks/group/style.css	57 B
build/block-library/blocks/group/theme-rtl.css	78 B
build/block-library/blocks/group/theme.css	78 B
build/block-library/blocks/heading/style-rtl.css	76 B
build/block-library/blocks/heading/style.css	76 B
build/block-library/blocks/html/editor-rtl.css	332 B
build/block-library/blocks/html/editor.css	333 B
build/block-library/blocks/image/editor-rtl.css	829 B
build/block-library/blocks/image/editor.css	828 B
build/block-library/blocks/image/style-rtl.css	627 B
build/block-library/blocks/image/style.css	630 B
build/block-library/blocks/image/theme-rtl.css	137 B
build/block-library/blocks/image/theme.css	137 B
build/block-library/blocks/latest-comments/style-rtl.css	298 B
build/block-library/blocks/latest-comments/style.css	298 B
build/block-library/blocks/latest-posts/editor-rtl.css	213 B
build/block-library/blocks/latest-posts/editor.css	212 B
build/block-library/blocks/latest-posts/style-rtl.css	478 B
build/block-library/blocks/latest-posts/style.css	478 B
build/block-library/blocks/list/style-rtl.css	88 B
build/block-library/blocks/list/style.css	88 B
build/block-library/blocks/media-text/editor-rtl.css	266 B
build/block-library/blocks/media-text/editor.css	263 B
build/block-library/blocks/media-text/style-rtl.css	507 B
build/block-library/blocks/media-text/style.css	505 B
build/block-library/blocks/more/editor-rtl.css	431 B
build/block-library/blocks/more/editor.css	431 B
build/block-library/blocks/navigation-link/editor-rtl.css	716 B
build/block-library/blocks/navigation-link/editor.css	715 B
build/block-library/blocks/navigation-link/style-rtl.css	115 B
build/block-library/blocks/navigation-link/style.css	115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	299 B
build/block-library/blocks/navigation-submenu/editor.css	299 B
build/block-library/blocks/navigation/editor-rtl.css	2.13 kB
build/block-library/blocks/navigation/editor.css	2.14 kB
build/block-library/blocks/navigation/style-rtl.css	2.22 kB
build/block-library/blocks/navigation/style.css	2.2 kB
build/block-library/blocks/navigation/view-modal.min.js	2.81 kB
build/block-library/blocks/navigation/view.min.js	447 B
build/block-library/blocks/nextpage/editor-rtl.css	395 B
build/block-library/blocks/nextpage/editor.css	395 B
build/block-library/blocks/page-list/editor-rtl.css	376 B
build/block-library/blocks/page-list/editor.css	376 B
build/block-library/blocks/page-list/style-rtl.css	175 B
build/block-library/blocks/page-list/style.css	175 B
build/block-library/blocks/paragraph/editor-rtl.css	174 B
build/block-library/blocks/paragraph/editor.css	174 B
build/block-library/blocks/paragraph/style-rtl.css	279 B
build/block-library/blocks/paragraph/style.css	281 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/editor-rtl.css	96 B
build/block-library/blocks/post-comments-form/editor.css	96 B
build/block-library/blocks/post-comments-form/style-rtl.css	501 B
build/block-library/blocks/post-comments-form/style.css	501 B
build/block-library/blocks/post-date/style-rtl.css	61 B
build/block-library/blocks/post-date/style.css	61 B
build/block-library/blocks/post-excerpt/editor-rtl.css	73 B
build/block-library/blocks/post-excerpt/editor.css	73 B
build/block-library/blocks/post-excerpt/style-rtl.css	69 B
build/block-library/blocks/post-excerpt/style.css	69 B
build/block-library/blocks/post-featured-image/editor-rtl.css	586 B
build/block-library/blocks/post-featured-image/editor.css	584 B
build/block-library/blocks/post-featured-image/style-rtl.css	318 B
build/block-library/blocks/post-featured-image/style.css	318 B
build/block-library/blocks/post-navigation-link/style-rtl.css	153 B
build/block-library/blocks/post-navigation-link/style.css	153 B
build/block-library/blocks/post-template/editor-rtl.css	99 B
build/block-library/blocks/post-template/editor.css	98 B
build/block-library/blocks/post-template/style-rtl.css	282 B
build/block-library/blocks/post-template/style.css	282 B
build/block-library/blocks/post-terms/style-rtl.css	96 B
build/block-library/blocks/post-terms/style.css	96 B
build/block-library/blocks/post-title/style-rtl.css	100 B
build/block-library/blocks/post-title/style.css	100 B
build/block-library/blocks/preformatted/style-rtl.css	103 B
build/block-library/blocks/preformatted/style.css	103 B
build/block-library/blocks/pullquote/editor-rtl.css	135 B
build/block-library/blocks/pullquote/editor.css	135 B
build/block-library/blocks/pullquote/style-rtl.css	326 B
build/block-library/blocks/pullquote/style.css	325 B
build/block-library/blocks/pullquote/theme-rtl.css	167 B
build/block-library/blocks/pullquote/theme.css	167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B
build/block-library/blocks/query-pagination/editor-rtl.css	221 B
build/block-library/blocks/query-pagination/editor.css	211 B
build/block-library/blocks/query-pagination/style-rtl.css	288 B
build/block-library/blocks/query-pagination/style.css	284 B
build/block-library/blocks/query-title/style-rtl.css	63 B
build/block-library/blocks/query-title/style.css	63 B
build/block-library/blocks/query/editor-rtl.css	440 B
build/block-library/blocks/query/editor.css	440 B
build/block-library/blocks/quote/style-rtl.css	213 B
build/block-library/blocks/quote/style.css	213 B
build/block-library/blocks/quote/theme-rtl.css	223 B
build/block-library/blocks/quote/theme.css	226 B
build/block-library/blocks/read-more/style-rtl.css	132 B
build/block-library/blocks/read-more/style.css	132 B
build/block-library/blocks/rss/editor-rtl.css	202 B
build/block-library/blocks/rss/editor.css	204 B
build/block-library/blocks/rss/style-rtl.css	289 B
build/block-library/blocks/rss/style.css	288 B
build/block-library/blocks/search/editor-rtl.css	165 B
build/block-library/blocks/search/editor.css	165 B
build/block-library/blocks/search/style-rtl.css	409 B
build/block-library/blocks/search/style.css	406 B
build/block-library/blocks/search/theme-rtl.css	114 B
build/block-library/blocks/search/theme.css	114 B
build/block-library/blocks/separator/editor-rtl.css	146 B
build/block-library/blocks/separator/editor.css	146 B
build/block-library/blocks/separator/style-rtl.css	234 B
build/block-library/blocks/separator/style.css	234 B
build/block-library/blocks/separator/theme-rtl.css	194 B
build/block-library/blocks/separator/theme.css	194 B
build/block-library/blocks/shortcode/editor-rtl.css	474 B
build/block-library/blocks/shortcode/editor.css	474 B
build/block-library/blocks/site-logo/editor-rtl.css	490 B
build/block-library/blocks/site-logo/editor.css	490 B
build/block-library/blocks/site-logo/style-rtl.css	203 B
build/block-library/blocks/site-logo/style.css	203 B
build/block-library/blocks/site-tagline/editor-rtl.css	86 B
build/block-library/blocks/site-tagline/editor.css	86 B
build/block-library/blocks/site-title/editor-rtl.css	116 B
build/block-library/blocks/site-title/editor.css	116 B
build/block-library/blocks/site-title/style-rtl.css	57 B
build/block-library/blocks/site-title/style.css	57 B
build/block-library/blocks/social-link/editor-rtl.css	184 B
build/block-library/blocks/social-link/editor.css	184 B
build/block-library/blocks/social-links/editor-rtl.css	674 B
build/block-library/blocks/social-links/editor.css	673 B
build/block-library/blocks/social-links/style-rtl.css	1.4 kB
build/block-library/blocks/social-links/style.css	1.39 kB
build/block-library/blocks/spacer/editor-rtl.css	332 B
build/block-library/blocks/spacer/editor.css	332 B
build/block-library/blocks/spacer/style-rtl.css	48 B
build/block-library/blocks/spacer/style.css	48 B
build/block-library/blocks/table/editor-rtl.css	457 B
build/block-library/blocks/table/editor.css	457 B
build/block-library/blocks/table/style-rtl.css	651 B
build/block-library/blocks/table/style.css	650 B
build/block-library/blocks/table/theme-rtl.css	157 B
build/block-library/blocks/table/theme.css	157 B
build/block-library/blocks/tag-cloud/style-rtl.css	251 B
build/block-library/blocks/tag-cloud/style.css	253 B
build/block-library/blocks/template-part/editor-rtl.css	404 B
build/block-library/blocks/template-part/editor.css	404 B
build/block-library/blocks/template-part/theme-rtl.css	101 B
build/block-library/blocks/template-part/theme.css	101 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B
build/block-library/blocks/text-columns/editor.css	95 B
build/block-library/blocks/text-columns/style-rtl.css	166 B
build/block-library/blocks/text-columns/style.css	166 B
build/block-library/blocks/verse/style-rtl.css	99 B
build/block-library/blocks/verse/style.css	99 B
build/block-library/blocks/video/editor-rtl.css	691 B
build/block-library/blocks/video/editor.css	694 B
build/block-library/blocks/video/style-rtl.css	179 B
build/block-library/blocks/video/style.css	179 B
build/block-library/blocks/video/theme-rtl.css	139 B
build/block-library/blocks/video/theme.css	139 B
build/block-library/classic-rtl.css	162 B
build/block-library/classic.css	162 B
build/block-library/common-rtl.css	1.05 kB
build/block-library/common.css	1.05 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/editor-rtl.css	11.7 kB
build/block-library/editor.css	11.7 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/index.min.js	199 kB
build/block-library/reset-rtl.css	478 B
build/block-library/reset.css	478 B
build/block-library/style-rtl.css	12.4 kB
build/block-library/style.css	12.4 kB
build/block-library/theme-rtl.css	698 B
build/block-library/theme.css	703 B
build/block-serialization-default-parser/index.min.js	1.13 kB
build/block-serialization-spec-parser/index.min.js	2.83 kB
build/blocks/index.min.js	50.4 kB
build/components/index.min.js	203 kB
build/components/style-rtl.css	11.6 kB
build/components/style.css	11.6 kB
build/compose/index.min.js	12.3 kB
build/core-data/index.min.js	15.9 kB
build/customize-widgets/index.min.js	11.7 kB
build/customize-widgets/style-rtl.css	1.41 kB
build/customize-widgets/style.css	1.41 kB
build/data-controls/index.min.js	663 B
build/data/index.min.js	7.69 kB
build/date/index.min.js	32.1 kB
build/deprecated/index.min.js	518 B
build/dom-ready/index.min.js	336 B
build/dom/index.min.js	4.71 kB
build/edit-navigation/index.min.js	16.2 kB
build/edit-navigation/style-rtl.css	4.12 kB
build/edit-navigation/style.css	4.13 kB
build/edit-post/classic-rtl.css	571 B
build/edit-post/classic.css	571 B
build/edit-post/index.min.js	34.4 kB
build/edit-post/style-rtl.css	7.45 kB
build/edit-post/style.css	7.44 kB
build/edit-site/style-rtl.css	9.3 kB
build/edit-site/style.css	9.3 kB
build/edit-widgets/index.min.js	16.8 kB
build/edit-widgets/style-rtl.css	4.46 kB
build/edit-widgets/style.css	4.47 kB
build/editor/index.min.js	44.1 kB
build/editor/style-rtl.css	3.69 kB
build/editor/style.css	3.68 kB
build/element/index.min.js	4.93 kB
build/escape-html/index.min.js	548 B
build/experiments/index.min.js	882 B
build/format-library/index.min.js	7.2 kB
build/format-library/style-rtl.css	598 B
build/format-library/style.css	597 B
build/hooks/index.min.js	1.66 kB
build/html-entities/index.min.js	454 B
build/i18n/index.min.js	3.79 kB
build/is-shallow-equal/index.min.js	535 B
build/keyboard-shortcuts/index.min.js	1.79 kB
build/keycodes/index.min.js	1.88 kB
build/list-reusable-blocks/index.min.js	2.13 kB
build/list-reusable-blocks/style-rtl.css	865 B
build/list-reusable-blocks/style.css	865 B
build/media-utils/index.min.js	2.94 kB
build/notices/index.min.js	977 B
build/plugins/index.min.js	1.95 kB
build/preferences-persistence/index.min.js	2.23 kB
build/preferences/index.min.js	1.35 kB
build/primitives/index.min.js	960 B
build/priority-queue/index.min.js	1.59 kB
build/react-i18n/index.min.js	702 B
build/react-refresh-entry/index.min.js	8.44 kB
build/react-refresh-runtime/index.min.js	7.31 kB
build/redux-routine/index.min.js	2.75 kB
build/reusable-blocks/index.min.js	2.26 kB
build/reusable-blocks/style-rtl.css	283 B
build/reusable-blocks/style.css	283 B
build/rich-text/index.min.js	10.8 kB
build/server-side-render/index.min.js	2.09 kB
build/shortcode/index.min.js	1.52 kB
build/style-engine/index.min.js	1.53 kB
build/token-list/index.min.js	650 B
build/url/index.min.js	3.7 kB
build/vendors/inert-polyfill.min.js	2.48 kB
build/vendors/react-dom.min.js	41.8 kB
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	1.09 kB
build/warning/index.min.js	280 B
build/widgets/index.min.js	7.31 kB
build/widgets/style-rtl.css	1.18 kB
build/widgets/style.css	1.18 kB
build/wordcount/index.min.js	1.06 kB

_{compressed-size-action}

[carolinan]

I agree that this link is important.

Hopefully the part about needing to save is self explanatory. Otherwise we can use a text that only mentions saving, and leaves out the template context?

[talldan]

Glen is AFK at the moment, so I'll try to be a stand in reviewer.

The change looks good to me, so I'll merge it. Thanks for working on it 🎉

It'd be good to start a secondary task to update the documentation as I noticed it says this:

Starting with WordPress 4.7, you can now add custom CSS to your own theme from the Appearance Customize Screen, without the need for additional plugins or directly editing themes and child themes.

It could additionally mention global styles now.

[carolinan]

I think the docs should be updated once it is not experimental and not limited to the plugin.