Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix link color for roles without unfiltered_html capabilities #25411

Closed
wants to merge 9 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions lib/global-styles.php
Original file line number Diff line number Diff line change
Expand Up @@ -875,6 +875,53 @@ function gutenberg_experimental_global_styles_register_cpt() {
register_post_type( 'wp_global_styles', $args );
}

/**
* Tell kses not to remove from the block markup (from style attribute)
* the CSS variables the block editor may add.
*
* @param array $allowed_attr List of allowed attributes.
* @return array Filtered result.
*/
function gutenberg_experimental_global_styles_allow_css_var_name( $allowed_attr ) {
return array_merge(
$allowed_attr,
array(
'--wp--style--color--link',
)
);
}

/**
* Tell kses to allow certain values for the properties
* the block editor may add.
*
* @param boolean $allow_css Whether or not this rule should be allowed.
* @param string $css_test_string The CSS rule to process.
* @return boolean Filtered result.
*/
function gutenberg_experimental_global_styles_allow_css_var_value( $allow_css, $css_test_string ) {
$parts = explode( ':', $css_test_string, 2 );
$property_name = trim( $parts[0] );
$property_value = trim( $parts[1] );

// Pass through if we're not processing the link color property.
if ( '--wp--style--color--link' !== $property_name ) {
return $allow_css;
}

// Pass through if $allow_css true. This means the link color has a valid color value
// (the user selected a custom color).
if ( $allow_css ) {
return $allow_css;
}

// We want to be specific in testing that the value for link color
// matches this: var(--wp--preset--color--<value-with-alphanumeric-chars-or-hyphen>).
return preg_match( '/^var\(--wp--preset--color--[A-Za-z0-9-]*\)$/', $property_value );
}

add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' );
add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' );
add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );
add_filter( 'safe_style_css', 'gutenberg_experimental_global_styles_allow_css_var_name' );
Copy link
Member Author

@oandregal oandregal Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kses has several checks when filtering post content, this is the relevant function when it comes to filter the style attribute:

  • check whether the property name is one of the allowed (see)
  • check that the property value doesn't have extraneous characters (checks for parentheses for example) (see)

add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_experimental_global_styles_allow_css_var_value', 10, 2 );
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Link color control serializes markup properly 1`] = `
"<!-- wp:paragraph {\\"style\\":{\\"color\\":{\\"link\\":\\"var:preset|color|black\\"}}} -->
<p class=\\"has-link-color\\" style=\\"--wp--style--color--link:var(--wp--preset--color--black)\\">This is <a href=\\"https://wordpress.org/gutenberg\\">Gutenberg</a></p>
<!-- /wp:paragraph -->"
`;
73 changes: 73 additions & 0 deletions packages/e2e-tests/specs/editor/various/link-color.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/**
* WordPress dependencies
*/
import {
clickBlockAppender,
createNewPost,
getEditedPostContent,
pressKeyWithModifier,
publishPost,
} from '@wordpress/e2e-test-utils';

describe( 'Link color', () => {
beforeEach( async () => {
await createNewPost();
} );

const waitForAutoFocus = async () => {
await page.waitForFunction(
() => !! document.activeElement.closest( '.block-editor-url-input' )
);
};

it( 'control serializes markup properly', async () => {
// Create a block with some text
await clickBlockAppender();
await page.keyboard.type( 'This is Gutenberg' );

// Select some text
await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );

// Click on the Link button
await page.click( 'button[aria-label="Link"]' );

// Wait for the URL field to auto-focus
await waitForAutoFocus();

// Type a URL
await page.keyboard.type( 'https://wordpress.org/gutenberg' );

// Submit the link
await page.keyboard.press( 'Enter' );

// Simulate the theme has support for link color
await page.evaluate( () => {
wp.data.dispatch( 'core/block-editor' ).updateSettings( {
__experimentalFeatures: {
global: {
color: { link: true },
},
},
} );
} );

// Open color panel
await page.click(
'.block-editor-panel-color-gradient-settings .components-panel__body-toggle'
);

// Select first color
await page.click(
'.block-editor-panel-color-gradient-settings > .block-editor-color-gradient-control:last-child .components-circular-option-picker__option:first-child'
);

// Save post.
// We want to test that the link color control data
// persists after kses runs (kses filters out some markup,
// such as CSS variables within the style property).
await publishPost();

// Snapshot contains .has-link-color class and inline CSS variable
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
} );