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

Background image: update controls defaults and layout #62000

Merged
merged 4 commits into from
May 28, 2024
Merged

Background image: update controls defaults and layout #62000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b873ef9
Background image: add functionality to remove a theme's default, site…
ramonjd May 27, 2024
5f40475
Background image: harmonize headings, update copy including changing …
ramonjd May 27, 2024
7f3cd34
Merge remote-tracking branch 'origin/update/background-image-control-…
ramonjd May 27, 2024
eac1723
Make sure the visually hidden labels are correct - use either the ima…
ramonjd May 27, 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
65 changes: 40 additions & 25 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 @@ -100,7 +100,7 @@ function backgroundSizeHelpText( value ) {
if ( value === 'contain' ) {
return __( 'Image is contained without distortion.' );
}
return __( 'Specify a fixed width.' );
return __( 'Image has a fixed width.' );
}

/**
Expand Down Expand Up @@ -172,13 +172,13 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
{ imgLabel }
</Truncate>
<VisuallyHidden as="span">
{ filename
{ imgUrl
? sprintf(
/* translators: %s: file name */
__( 'Selected image: %s' ),
filename
__( 'Background image: %s' ),
filename || imgLabel
)
: __( 'No image selected' ) }
: __( 'No background image selected' ) }
</VisuallyHidden>
</FlexItem>
</HStack>
Expand Down Expand Up @@ -302,7 +302,7 @@ function BackgroundImageToolsPanelItem( {
name={
<InspectorImagePreview
label={ title }
filename={ title || __( 'Untitled' ) }
filename={ title }
url={ getResolvedThemeFilePath(
url,
themeFileURIs
Expand Down Expand Up @@ -421,6 +421,14 @@ function BackgroundSizeToolsPanelItem( {
nextRepeat = undefined;
}

/*
* Next will be null when the input is cleared,
* in which case the value should be 'auto'.
*/
if ( ! next && currentValueForToggle === 'auto' ) {
next = 'auto';
}

onChange(
setImmutably( style, [ 'background' ], {
...style?.background,
Expand Down Expand Up @@ -484,7 +492,9 @@ function BackgroundSizeToolsPanelItem( {
value={ currentValueForToggle }
onChange={ updateBackgroundSize }
isBlock
help={ backgroundSizeHelpText( sizeValue ) }
help={ backgroundSizeHelpText(
sizeValue || defaultValues?.backgroundSize
) }
>
<ToggleGroupControlOption
key={ 'cover' }
Expand All @@ -497,27 +507,32 @@ function BackgroundSizeToolsPanelItem( {
label={ __( 'Contain' ) }
/>
<ToggleGroupControlOption
key={ 'fixed' }
key={ 'tile' }
value={ 'auto' }
label={ __( 'Fixed' ) }
label={ __( 'Tile' ) }
/>
</ToggleGroupControl>
{ currentValueForToggle !== undefined &&
currentValueForToggle !== 'cover' &&
currentValueForToggle !== 'contain' ? (
<UnitControl
size={ '__unstable-large' }
onChange={ updateBackgroundSize }
value={ sizeValue }
/>
) : null }
{ currentValueForToggle !== 'cover' && (
<ToggleControl
label={ __( 'Repeat' ) }
checked={ repeatCheckedValue }
onChange={ toggleIsRepeated }
/>
) }
<HStack justify="flex-start" spacing={ 2 } as="span">
{ currentValueForToggle !== undefined &&
currentValueForToggle !== 'cover' &&
currentValueForToggle !== 'contain' ? (
<UnitControl
aria-label={ __( 'Background image width' ) }
onChange={ updateBackgroundSize }
value={ sizeValue }
size={ '__unstable-large' }
__unstableInputWidth="100px"
min={ 0 }
/>
) : null }
{ currentValueForToggle !== 'cover' && (
<ToggleControl
label={ __( 'Repeat' ) }
checked={ repeatCheckedValue }
onChange={ toggleIsRepeated }
/>
) }
</HStack>
</VStack>
);
}
Expand Down
2 changes: 0 additions & 2 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,7 +2,6 @@
* WordPress dependencies
*/
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -59,7 +58,6 @@ export default function BackgroundPanel() {
value={ style }
onChange={ setStyle }
settings={ settings }
headerLabel={ __( 'Background' ) }
defaultValues={ BACKGROUND_DEFAULT_VALUES }
defaultControls={ defaultControls }
themeFileURIs={ _links?.[ 'wp:theme-file' ] }
Expand Down
Loading