Skip to content

Commit

Permalink
After rebase
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonjd
ramonjd committed Mar 28, 2024
1 parent 99b8ea6 commit 4e1c637
Show file tree
Hide file tree
Showing 2 changed files with 255 additions and 29 deletions.
257 changes: 231 additions & 26 deletions packages/block-editor/src/components/global-styles/background-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import {
__experimentalItemGroup as ItemGroup,
__experimentalHStack as HStack,
__experimentalTruncate as Truncate,
Dropdown,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { store as noticesStore } from '@wordpress/notices';
Expand All @@ -30,6 +32,7 @@ import { useCallback, Platform, useRef } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { focus } from '@wordpress/dom';
import { isBlobURL } from '@wordpress/blob';
import { reusableBlock, Icon } from '@wordpress/icons';

/**
* Internal dependencies
Expand All @@ -41,6 +44,12 @@ import { store as blockEditorStore } from '../../store';

const IMAGE_BACKGROUND_TYPE = 'image';

const BACKGROUND_POPOVER_PROPS = {
placement: 'left-start',
offset: 36,
shift: true,
};

/**
* Checks site settings to see if the background panel may be used.
* `settings.background.backgroundSize` exists also,
Expand Down Expand Up @@ -134,10 +143,142 @@ export const backgroundPositionToCoords = ( value ) => {
return { x, y };
};

function InspectorImagePreview( { label, filename, url: imgUrl } ) {
function InspectorImagePreviewToggle( {
label,
filename,
url: imgUrl,
children,
allowPopover = false,
} ) {
const imgLabel = label || getFilename( imgUrl );
// @TODO abstract
if ( ! allowPopover ) {
return (
<ItemGroup
as="span"
className="block-editor-global-styles-background-panel__image-preview"
>
<HStack
justify="flex-start"
as="span"
className="block-editor-global-styles-background-panel__image-preview-content"
>
<span
className={ classnames(
'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
{
'has-image': imgUrl,
}
) }
aria-hidden
>
{ imgUrl && (
<span
className="block-editor-global-styles-background-panel__inspector-image-indicator"
style={ {
backgroundImage: `url(${ imgUrl })`,
} }
/>
) }
</span>
<FlexItem as="span">
<Truncate
numberOfLines={ 1 }
className="block-editor-global-styles-background-panel__inspector-media-replace-title"
>
{ imgLabel }
</Truncate>
<VisuallyHidden as="span">
{ filename
? sprintf(
/* translators: %s: file name */
__( 'Selected image: %s' ),
filename
)
: __( 'No image selected' ) }
</VisuallyHidden>
</FlexItem>
</HStack>
</ItemGroup>
);
}
return (
<ItemGroup as="span">
<Dropdown
popoverProps={ BACKGROUND_POPOVER_PROPS }
className="block-editor-global-styles-background-panel__inspector-media-replace"
renderToggle={ ( { onToggle, isOpen } ) => {
const toggleProps = {
onClick: onToggle,
className: classnames(
'block-editor-global-styles-background-panel__dropdown-toggle',
{ 'is-open': isOpen }
),
'aria-expanded': isOpen,
'aria-label': __(
'Background size, position and repeat options.'
),
};
return (
<ItemGroup as="button" { ...toggleProps }>
<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 && (
<span
className="block-editor-global-styles-background-panel__inspector-image-indicator"
style={ {
backgroundImage: `url(${ imgUrl })`,
} }
/>
) }
</span>
<FlexItem as="span">
<Truncate
numberOfLines={ 1 }
className="block-editor-global-styles-background-panel__inspector-media-replace-title"
>
{ imgLabel }
</Truncate>
<VisuallyHidden as="span">
{ filename
? sprintf(
/* translators: %s: file name */
__( 'Selected image: %s' ),
filename
)
: __( 'No image selected' ) }
</VisuallyHidden>
</FlexItem>
</HStack>
</ItemGroup>
);
} }
renderContent={ ( { onClose } ) => (
<DropdownContentWrapper>{ children }</DropdownContentWrapper>
) }
/>
);
}

function InspectorImagePreview( {
label,
title,
url: imgUrl,
//as = 'span',
//className = 'block-editor-global-styles-background-panel__image-preview',
...otherProps
} ) {
const imgLabel = label || getFilename( imgUrl ) || __( 'Add image' );
const filename = title || __( 'Unitled' );
return (
<ItemGroup { ...otherProps }>
<HStack justify="flex-start" as="span">
<span
className={ classnames(
Expand Down Expand Up @@ -179,12 +320,71 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
);
}

function BackgroundImageControls( {
hasImageValue,
settings,
url,
title,
children,
} ) {
const shouldShowBackgroundSizeControls =
hasImageValue &&
( settings?.background?.backgroundSize ||
settings?.background?.backgroundPosition ||
settings?.background?.backgroundRepeat );

if ( ! shouldShowBackgroundSizeControls ) {
return (
<InspectorImagePreview
label={ title }
url={ url }
as="span"
className="block-editor-global-styles-background-panel__image-preview"
/>
);
}

return (
<Dropdown
popoverProps={ BACKGROUND_POPOVER_PROPS }
className="block-editor-global-styles-background-panel__inspector-media-replace"
renderToggle={ ( { onToggle, isOpen } ) => {
const toggleProps = {
onClick: onToggle,
className: classnames(
'block-editor-global-styles-background-panel__dropdown-toggle',
{ 'is-open': isOpen }
),
'aria-expanded': isOpen,
'aria-label': __(
'Background size, position and repeat options.'
),
};
return (
<InspectorImagePreview
label={ title }
filename={ title }
url={ url }
as={ 'button' }
{ ...toggleProps }
/>
);
} }
renderContent={ () => (
<DropdownContentWrapper>{ children }</DropdownContentWrapper>
) }
/>
);
}

function BackgroundImageToolsPanelItem( {
panelId,
isShownByDefault,
defaultControls,
onChange,
style,
inheritedValue,
defaultValues,
settings,
} ) {
const mediaUpload = useSelect(
( select ) => select( blockEditorStore ).getSettings().mediaUpload,
Expand Down Expand Up @@ -273,33 +473,48 @@ function BackgroundImageToolsPanelItem( {
hasBackgroundImageValue( style ) ||
hasBackgroundImageValue( inheritedValue );

const shouldShowBackgroundImageControls =
hasValue &&
( settings?.background?.backgroundSize ||
settings?.background?.backgroundPosition ||
settings?.background?.backgroundRepeat );

return (
<ToolsPanelItem
className="single-column"
hasValue={ () => hasValue }
label={ __( 'Background image' ) }
onDeselect={ resetBackgroundImage }
isShownByDefault={ isShownByDefault }
isShownByDefault={ defaultControls.backgroundImage }
resetAllFilter={ resetAllFilter }
panelId={ panelId }
>
<div
className="block-editor-global-styles-background-panel__inspector-media-replace-container"
ref={ replaceContainerRef }
>
<InspectorImagePreviewToggle
label={ __( 'Background image' ) }
filename={ title || __( 'Untitled' ) }
url={ url }
allowPopover={ shouldShowBackgroundImageControls }
>
<BackgroundSizeToolsPanelItem
onChange={ onChange }
panelId={ panelId }
defaultControls={ defaultControls }
style={ style }
inheritedValue={ inheritedValue }
defaultValues={ defaultValues }
/>
</InspectorImagePreviewToggle>
<MediaReplaceFlow
mediaId={ id }
mediaURL={ url }
allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
accept="image/*"
onSelect={ onSelectMedia }
name={
<InspectorImagePreview
label={ __( 'Background image' ) }
filename={ title || __( 'Untitled' ) }
url={ url }
/>
}
name={ <Icon icon={ reusableBlock } /> }
variant="secondary"
>
{ hasValue && (
Expand Down Expand Up @@ -331,11 +546,11 @@ function BackgroundImageToolsPanelItem( {

function BackgroundSizeToolsPanelItem( {
panelId,
isShownByDefault,
onChange,
style,
inheritedValue,
defaultValues,
defaultControls,
} ) {
const sizeValue =
style?.background?.backgroundSize ||
Expand Down Expand Up @@ -457,8 +672,8 @@ function BackgroundSizeToolsPanelItem( {
hasValue={ () => hasValue }
label={ __( 'Size' ) }
onDeselect={ resetBackgroundSize }
isShownByDefault={ isShownByDefault }
resetAllFilter={ resetAllFilter }
isShownByDefault={ defaultControls.backgroundSize }
panelId={ panelId }
>
<FocalPointPicker
Expand Down Expand Up @@ -559,8 +774,6 @@ export default function BackgroundPanel( {
background: {},
};
}, [] );
const shouldShowBackgroundSizeControls =
settings?.background?.backgroundSize;

return (
<Wrapper
Expand All @@ -572,20 +785,12 @@ export default function BackgroundPanel( {
<BackgroundImageToolsPanelItem
onChange={ onChange }
panelId={ panelId }
isShownByDefault={ defaultControls.backgroundImage }
defaultControls={ defaultControls }
style={ value }
inheritedValue={ inheritedValue }
defaultValues={ defaultValues }
settings={ settings }
/>
{ shouldShowBackgroundSizeControls && (
<BackgroundSizeToolsPanelItem
onChange={ onChange }
panelId={ panelId }
isShownByDefault={ defaultControls.backgroundSize }
style={ value }
inheritedValue={ inheritedValue }
defaultValues={ defaultValues }
/>
) }
</Wrapper>
);
}
Loading

0 comments on commit 4e1c637

Please sign in to comment.