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

Global styles: background UI control labels #60264

Merged
merged 8 commits into from
Apr 15, 2024
Merged

Global styles: background UI control labels #60264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2059edb
Trying to change the header labels for background
ramonjd Mar 28, 2024
dfec541
Simplify copy
ramonjd Mar 28, 2024
5696edf
We don't need this wild check now that https://github.com/WordPress/g…
ramonjd Mar 28, 2024
a492281
Remove placeholder image icon and center text
ramonjd Apr 2, 2024
2b8443c
Fix spacing
ramonjd Apr 12, 2024
133f9c0
the background size panel displays by default in the site editor for …
ramonjd Apr 12, 2024
911089f
Update copy for unset image
ramonjd Apr 14, 2024
0524b17
Update border of button to match site logo upload button
ramonjd Apr 15, 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
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
<InspectorControls.Slot group="styles" />
<InspectorControls.Slot
group="background"
label={ __( 'Background' ) }
label={ __( 'Background image' ) }
/>
<PositionControls />
<div>
Expand Down
50 changes: 27 additions & 23 deletions packages/block-editor/src/components/global-styles/background-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ import MediaReplaceFlow from '../media-replace-flow';
import { store as blockEditorStore } from '../../store';

const IMAGE_BACKGROUND_TYPE = 'image';
const DEFAULT_CONTROLS = {
backgroundImage: true,
backgroundSize: false,
};

/**
* Checks site settings to see if the background panel may be used.
Expand Down Expand Up @@ -135,28 +139,30 @@ export const backgroundPositionToCoords = ( value ) => {
};

function InspectorImagePreview( { label, filename, url: imgUrl } ) {
const imgLabel = label || getFilename( imgUrl );
const imgLabel =
label || getFilename( imgUrl ) || __( 'Add background image' );

return (
<ItemGroup as="span">
<HStack justify="flex-start" as="span">
<span
className={ classnames(
'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
{
'has-image': imgUrl,
}
) }
aria-hidden
>
{ imgUrl && (
<HStack justify={ imgUrl ? 'flex-start' : 'center' } as="span">
{ imgUrl && (
<span
className={ classnames(
'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
{
'has-image': imgUrl,
}
) }
aria-hidden
>
<span
className="block-editor-global-styles-background-panel__inspector-image-indicator"
style={ {
backgroundImage: `url(${ imgUrl })`,
} }
/>
) }
</span>
</span>
) }
<FlexItem as="span">
<Truncate
numberOfLines={ 1 }
Expand Down Expand Up @@ -247,7 +253,7 @@ function BackgroundImageToolsPanelItem( {

const onFilesDrop = ( filesList ) => {
mediaUpload( {
allowedTypes: [ 'image' ],
allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
filesList,
onFileChange( [ image ] ) {
if ( isBlobURL( image?.url ) ) {
Expand Down Expand Up @@ -295,7 +301,7 @@ function BackgroundImageToolsPanelItem( {
onSelect={ onSelectMedia }
name={
<InspectorImagePreview
label={ __( 'Background image' ) }
label={ title }
filename={ title || __( 'Untitled' ) }
url={ url }
/>
Expand Down Expand Up @@ -518,6 +524,7 @@ function BackgroundToolsPanel( {
value,
panelId,
children,
headerLabel,
} ) {
const resetAll = () => {
const updatedValue = resetAllFilter( value );
Expand All @@ -527,8 +534,8 @@ function BackgroundToolsPanel( {
return (
<VStack
as={ ToolsPanel }
spacing={ 6 }
label={ __( 'Background' ) }
spacing={ 4 }
label={ headerLabel }
resetAll={ resetAll }
panelId={ panelId }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
Expand All @@ -538,11 +545,6 @@ function BackgroundToolsPanel( {
);
}

const DEFAULT_CONTROLS = {
backgroundImage: true,
backgroundSize: true,
};

export default function BackgroundPanel( {
as: Wrapper = BackgroundToolsPanel,
value,
Expand All @@ -552,6 +554,7 @@ export default function BackgroundPanel( {
panelId,
defaultControls = DEFAULT_CONTROLS,
defaultValues = {},
headerLabel = __( 'Background image' ),
} ) {
const resetAllFilter = useCallback( ( previousValue ) => {
return {
Expand All @@ -568,6 +571,7 @@ export default function BackgroundPanel( {
value={ value }
onChange={ onChange }
panelId={ panelId }
headerLabel={ headerLabel }
>
<BackgroundImageToolsPanelItem
onChange={ onChange }
Expand Down
10 changes: 2 additions & 8 deletions packages/block-editor/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@

button.components-button {
color: $gray-900;
box-shadow: inset 0 0 0 $border-width $gray-300;
box-shadow: inset 0 0 0 $border-width $gray-400;
width: 100%;
display: block;
height: $grid-unit-50;
Expand Down Expand Up @@ -111,17 +111,11 @@
}

.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
background: #fff linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); // Show a diagonal line (crossed out) for empty background image.
border-radius: $radius-round !important; // Override the default border-radius inherited from FlexItem.
box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
display: block;
width: 20px;
height: 20px;
flex: none;

&.has-image {
background: #fff; // No diagonal line for non-empty background image. A background color is in use to account for partially transparent images.
}
background: #fff;
}

.block-editor-global-styles-background-panel__inspector-image-indicator {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
/>
<InspectorControls.Slot
group="background"
label={ __( 'Background' ) }
label={ __( 'Background image' ) }
/>
<InspectorControls.Slot group="filter" />
<InspectorControls.Slot
Expand Down
10 changes: 10 additions & 0 deletions packages/edit-site/src/components/global-styles/background-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* WordPress dependencies
*/
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -28,13 +29,22 @@ export default function BackgroundPanel() {
} );
const [ settings ] = useGlobalSetting( '' );

const defaultControls = {
backgroundImage: true,
backgroundSize:
!! style?.background?.backgroundImage &&
!! inheritedStyle?.background?.backgroundImage,
};

return (
<StylesBackgroundPanel
inheritedValue={ inheritedStyle }
value={ style }
onChange={ setStyle }
settings={ settings }
headerLabel={ __( 'Image' ) }
defaultValues={ BACKGROUND_DEFAULT_VALUES }
defaultControls={ defaultControls }
/>
);
}
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/global-styles/root-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ function RootMenu() {
<NavigationButtonAsItem
icon={ image }
path="/background"
aria-label={ __( 'Background styles' ) }
aria-label={ __( 'Background image styles' ) }
>
{ __( 'Background' ) }
{ __( 'Background image' ) }
</NavigationButtonAsItem>
) }
</ItemGroup>
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/screen-background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function ScreenBackground() {
const hasBackgroundPanel = useHasBackgroundPanel( settings );
return (
<>
<ScreenHeader title={ __( 'Background' ) } />
<ScreenHeader title={ __( 'Background image' ) } />
{ hasBackgroundPanel && <BackgroundPanel /> }
</>
);
Expand Down
Loading