Feature: Add new wp-base-styles css file to provide high base variables to be used across the admin

[fabiankaegy]

Trac ticket: https://core.trac.wordpress.org/ticket/49930 (part of) & https://core.trac.wordpress.org/ticket/64308

Note

This is a backport for WordPress/gutenberg#69130

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props fabiankaegy, wildworks.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[fabiankaegy]

Hey @t-hamano 👋 Given you've helped getting this merged into Gutenberg, would you be able to review this patch here also?

[t-hamano]

I haven't testedthis PR yet, but probably we also need to enqueue RTL CSS, right?

[fabiankaegy]

@t-hamano my understanding is we don't because it only adds color CSS variables :)

[t-hamano]

I see, but the CSS for RTL is actually bundled with core, so maybe that should be removed 🤔

[fabiankaegy]

@t-hamano I think we would need to adjust the build in the Gutenberg repo for this so it doesn't emit the file in the first place 🤔 That should be handled separately though as the package is already bundled like this in core right now. it just isn't used for anything. This PR only adds the usage of the file that is already in that location.

[t-hamano]

We also need to add wp-base-styles here:

wordpress-develop/src/wp-includes/script-loader.php

Lines 1668 to 1678 in b47e1c7

	// Only add CONTENT styles here that should be enqueued in the iframe!
	$wp_edit_blocks_dependencies = array(
	'wp-components',
	/*
	* This needs to be added before the block library styles,
	* The block library styles override the "reset" styles.
	*/
	'wp-reset-editor-styles',
	'wp-block-library',
	'wp-block-editor-content',
	);

Otherwise, the user color scheme is not applied to the elements inside the iframed editor. See WordPress/gutenberg#69130 (comment)

[fabiankaegy]

We also need to add wp-base-styles here:

wordpress-develop/src/wp-includes/script-loader.php

Lines 1668 to 1678 in b47e1c7

	// Only add CONTENT styles here that should be enqueued in the iframe!
	$wp_edit_blocks_dependencies = array(
	'wp-components',
	/*
	* This needs to be added before the block library styles,
	* The block library styles override the "reset" styles.
	*/
	'wp-reset-editor-styles',
	'wp-block-library',
	'wp-block-editor-content',
	);

Otherwise, the user color scheme is not applied to the elements inside the iframed editor. See WordPress/gutenberg#69130 (comment)

Ahhh great catch! Fixed in 5d015f4

[t-hamano]

Looks good to me 👍

[fabiankaegy]

This was committed in https://core.trac.wordpress.org/changeset/61517