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

Jump to bottom

Try: Indicate when text color in post editor is inherited from Global Styles #55952

Closed
wants to merge 5 commits into from
Closed

Try: Indicate when text color in post editor is inherited from Global Styles #55952

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
98c4c0d
Add the experimental setting & first test
michalczaplinski Nov 7, 2023
735ea13
Handle the inherited values correctly
michalczaplinski Nov 7, 2023
e81701f
Merge branch 'trunk' into experiment/show-styles-inherited-values
michalczaplinski Dec 7, 2023
b857070
Merge branch 'trunk' into experiment/show-styles-inherited-values
michalczaplinski Mar 7, 2024
40a4b4b
Remove experimental connections and pattern syncing options
michalczaplinski Mar 7, 2024
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
3 changes: 3 additions & 0 deletions lib/experimental/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ function gutenberg_enable_experiments() {
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-grid-interactivity', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGridInteractivity = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-styles-inheritance-ui', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalStylesInheritanceUI = true', 'before' );
}
if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
}
Expand Down
12 changes: 12 additions & 0 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,18 @@ function gutenberg_initialize_experiments_settings() {
)
);

add_settings_field(
'gutenberg-styles-inheritance-ui',
__( 'Styles Inheritance UI', 'gutenberg' ),
'gutenberg_display_experiment_field',
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => __( 'Styles Inheritance UI', 'gutenberg' ),
'id' => 'gutenberg-styles-inheritance-ui',
)
);

register_setting(
'gutenberg-experiments',
'gutenberg-experiments'
Expand Down
32 changes: 28 additions & 4 deletions packages/block-editor/src/components/global-styles/color-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ const popoverProps = {
shift: true,
};

const LabeledColorIndicators = ( { indicators, label } ) => (
const LabeledColorIndicators = ( { indicators, label, hasInheritedValue } ) => (
<HStack justify="flex-start">
<ZStack isLayered={ false } offset={ -8 }>
{ indicators.map( ( indicator, index ) => (
Expand All @@ -166,6 +166,18 @@ const LabeledColorIndicators = ( { indicators, label } ) => (
<FlexItem
className="block-editor-panel-color-gradient-settings__color-name"
title={ label }
// If it has an inherited value, we want to label with purple background
// and purple text.
style={
hasInheritedValue
? {
backgroundColor: '#FAF5FE',
color: '#7A00DF',
borderRadius: 3,
padding: '4px 3px',
}
: undefined
}
Copy link
Contributor

Choose a reason for hiding this comment

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

This is interesting, just noting that the "inheritValue" prop is a common prop to all the *Panel components and that in global styles for "block panels" it's possible to be set with the value set at the "root level" of global styles for instance.

So basically, the behavior you're introducing here is also going to trigger in the global styles sidebar for blocks. I think that's probably fine but it's something to be aware of.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

the behavior you're introducing here is also going to trigger in the global styles sidebar for blocks

yup, thanks for pointing that out! I noticed it as well, but I haven't tried to fix it at all yet.

>
{ label }
</FlexItem>
Expand All @@ -179,14 +191,15 @@ function ColorPanelTab( {
setValue,
colorGradientControlSettings,
} ) {
const value = userValue || inheritedValue;
return (
<ColorGradientControl
{ ...colorGradientControlSettings }
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
colorValue={ isGradient ? undefined : inheritedValue }
gradientValue={ isGradient ? inheritedValue : undefined }
colorValue={ isGradient ? undefined : value }
gradientValue={ isGradient ? value : undefined }
onColorChange={ isGradient ? undefined : setValue }
onGradientChange={ isGradient ? setValue : undefined }
clearable={ inheritedValue === userValue }
Expand All @@ -198,6 +211,7 @@ function ColorPanelTab( {
function ColorPanelDropdown( {
label,
hasValue,
hasInheritedValue,
resetValue,
isShownByDefault,
indicators,
Expand Down Expand Up @@ -243,6 +257,7 @@ function ColorPanelDropdown( {
<LabeledColorIndicators
indicators={ indicators }
label={ label }
hasInheritedValue={ hasInheritedValue }
/>
</Button>
);
Expand Down Expand Up @@ -522,8 +537,9 @@ export default function ColorPanel( {
label: __( 'Text' ),
hasValue: hasTextColor,
resetValue: resetTextColor,
hasInheritedValue: !! textColor && ! userTextColor,
isShownByDefault: defaultControls.text,
indicators: [ textColor ],
indicators: [ userTextColor || textColor ],
tabs: [
{
key: 'text',
Expand All @@ -538,6 +554,10 @@ export default function ColorPanel( {
key: 'background',
label: __( 'Background' ),
hasValue: hasBackground,
hasInheritedValue:
( !! backgroundColor || !! gradient ) &&
! userBackgroundColor &&
! userGradient,
resetValue: resetBackground,
isShownByDefault: defaultControls.background,
indicators: [ gradient ?? backgroundColor ],
Expand All @@ -563,6 +583,10 @@ export default function ColorPanel( {
key: 'link',
label: __( 'Link' ),
hasValue: hasLink,
hasInheritedValue:
( !! linkColor || !! hoverLinkColor ) &&
! userLinkColor &&
! userHoverLinkColor,
resetValue: resetLink,
isShownByDefault: defaultControls.link,
indicators: [ linkColor, hoverLinkColor ],
Expand Down
5 changes: 5 additions & 0 deletions packages/block-editor/src/hooks/color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
default as StylesColorPanel,
} from '../components/global-styles/color-panel';
import BlockColorContrastChecker from './contrast-checker';
import { useGlobalStyle } from '../components/global-styles';
import { store as blockEditorStore } from '../store';

export const COLOR_SUPPORT_KEY = 'color';
Expand Down Expand Up @@ -269,6 +270,9 @@ function ColorInspectorControl( { children, resetAllFilter } ) {

export function ColorEdit( { clientId, name, setAttributes, settings } ) {
const isEnabled = useHasColorPanel( settings );

const [ userValue ] = useGlobalStyle( '', name, 'user' );

function selector( select ) {
const { style, textColor, backgroundColor, gradient } =
select( blockEditorStore ).getBlockAttributes( clientId ) || {};
Expand Down Expand Up @@ -317,6 +321,7 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) {
<StylesColorPanel
as={ ColorInspectorControl }
panelId={ clientId }
inheritedValue={ userValue }
settings={ settings }
value={ value }
onChange={ onChange }
Expand Down
33 changes: 18 additions & 15 deletions packages/edit-post/src/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { useMemo } from '@wordpress/element';
import { SlotFillProvider } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { CommandMenu } from '@wordpress/commands';
import { GlobalStylesProvider } from '@wordpress/edit-site';

/**
* Internal dependencies
Expand Down Expand Up @@ -86,21 +87,23 @@ function Editor( {

return (
<SlotFillProvider>
<ExperimentalEditorProvider
settings={ editorSettings }
post={ post }
initialEdits={ initialEdits }
useSubRegistry={ false }
__unstableTemplate={ template }
{ ...props }
>
<ErrorBoundary>
<CommandMenu />
<EditorInitialization />
<Layout initialPost={ initialPost } />
</ErrorBoundary>
<PostLockedModal />
</ExperimentalEditorProvider>
<GlobalStylesProvider>
<ExperimentalEditorProvider
settings={ editorSettings }
post={ post }
initialEdits={ initialEdits }
useSubRegistry={ false }
__unstableTemplate={ template }
{ ...props }
>
<ErrorBoundary>
<CommandMenu />
<EditorInitialization />
<Layout initialPost={ initialPost } />
</ErrorBoundary>
<PostLockedModal />
</ExperimentalEditorProvider>
</GlobalStylesProvider>
</SlotFillProvider>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,4 @@ export { default as PluginSidebarMoreMenuItem } from './components/header-edit-m
export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
export { store } from './store';
export { GlobalStylesProvider } from './components/global-styles/global-styles-provider';
Loading