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.

Sign up for GitHub

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

Try a block editor setting to limit use of custom css to unfiltered html capability #46666

Closed
wants to merge 5 commits into from
Closed

Try a block editor setting to limit use of custom css to unfiltered html capability #46666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
79fc9be
Try a block editor setting to limit use of custom css to unfiltered h…
glendaviesnz Dec 20, 2022
3c0915a
Add handling of custom css in remove_insecure_properties
glendaviesnz Dec 20, 2022
c8391da
Add filter so plugins/themes have option to extend which users can ad…
glendaviesnz Dec 22, 2022
5d32940
Don't sanitize global custon css if kses filters enabled but user has…
glendaviesnz Dec 23, 2022
2dd5fc6
Remove experimental flag
glendaviesnz Dec 23, 2022
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
13 changes: 9 additions & 4 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2702,16 +2702,21 @@ public static function remove_insecure_properties( $theme_json ) {

$theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );

$blocks_metadata = static::get_blocks_metadata();
$style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata );
$blocks_metadata = static::get_blocks_metadata();
$style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata );
$can_user_edit_global_custom_css = apply_filters( 'enable_global_styles_custom_css', current_user_can( 'unfiltered_html' ) );

foreach ( $style_nodes as $metadata ) {
$input = _wp_array_get( $theme_json, $metadata['path'], array() );
if ( empty( $input ) ) {
continue;
}

$output = static::remove_insecure_styles( $input );
// The global styles custom CSS is not sanitized, but can only be edited by default by users with unfiltered_html capability.
if ( is_array( $input ) && 'css' === key( $input ) && $can_user_edit_global_custom_css ) {
$output = $input;
} else {
$output = static::remove_insecure_styles( $input );
}

/*
* Get a reference to element name from path.
Expand Down
4 changes: 3 additions & 1 deletion lib/compat/wordpress-6.2/block-editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
* @return array New block editor settings.
*/
function gutenberg_get_block_editor_settings_6_2( $settings ) {
$can_user_edit_global_custom_css = apply_filters( 'enable_global_styles_custom_css', current_user_can( 'unfiltered_html' ) );
Copy link
Contributor

@mmtr mmtr Dec 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
$can_user_edit_global_custom_css = apply_filters( 'enable_global_styles_custom_css', current_user_can( 'unfiltered_html' ) );
$can_user_edit_global_custom_css = apply_filters( 'enable_global_styles_custom_css', current_user_can( 'edit_css' ) );

I think this should check the edit_css capability by default, so it's consistent with the capability checked for the Custom CSS setting in the Customizer: https://core.trac.wordpress.org/browser/trunk/src/wp-includes/customize/class-wp-customize-custom-css-setting.php?rev=51785#L43


if ( wp_theme_has_theme_json() ) {
// Add the custom CSS as separate style sheet so any invalid CSS entered by users does not break other global styles.
$settings['styles'][] = array(
Expand All @@ -21,7 +23,7 @@ function gutenberg_get_block_editor_settings_6_2( $settings ) {
'isGlobalStyles' => true,
);
}

$settings['__experimentalCanUserEditGlobalCustomCSS'] = ! $can_user_edit_global_custom_css ? false : true;
return $settings;
}

Expand Down
3 changes: 0 additions & 3 deletions lib/experimental/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,6 @@ function gutenberg_enable_experiments() {
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-inspector-tabs', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockInspectorTabs = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-global-styles-custom-css', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGlobalStylesCustomCSS = true', 'before' );
}
}

add_action( 'admin_init', 'gutenberg_enable_experiments' );
16 changes: 0 additions & 16 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,22 +89,6 @@ function gutenberg_initialize_experiments_settings() {
)
);

add_settings_field(
'gutenberg-global-styles-custom-css',
__( 'Global styles custom css ', 'gutenberg' ),
'gutenberg_display_experiment_field',
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => sprintf(
/* translators: %s: WordPress documentation for roles and capabilities. */
__( 'Test the Global Styles custom CSS field in the site editor. This requires a user to have <a href="%s">unfiltered html capabilities</a>.', 'gutenberg' ),
'https://wordpress.org/support/article/roles-and-capabilities/#unfiltered_html'
),
'id' => 'gutenberg-global-styles-custom-css',
)
);

register_setting(
'gutenberg-experiments',
'gutenberg-experiments'
Expand Down
10 changes: 7 additions & 3 deletions packages/edit-site/src/components/global-styles/screen-root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { isRTL, __ } from '@wordpress/i18n';
import { chevronLeft, chevronRight } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { store as blockEditorStore } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand All @@ -26,6 +27,11 @@ import ContextMenu from './context-menu';
import StylesPreview from './preview';

function ScreenRoot() {
const canUserEditGlobalCustomCSS = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
return getSettings().__experimentalCanUserEditGlobalCustomCSS;
} );

const { variations } = useSelect( ( select ) => {
return {
variations:
Expand All @@ -35,8 +41,6 @@ function ScreenRoot() {
};
}, [] );

const __experimentalGlobalStylesCustomCSS =
window?.__experimentalEnableGlobalStylesCustomCSS;
return (
<Card size="small">
<CardBody>
Expand Down Expand Up @@ -102,7 +106,7 @@ function ScreenRoot() {
</ItemGroup>
</CardBody>

{ __experimentalGlobalStylesCustomCSS && (
{ canUserEditGlobalCustomCSS && (
<>
<CardDivider />
<CardBody>
Expand Down