Skip to content

Commit

Permalink
Move tests, move styles, remove duplicate code from block support hook
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonjd
ramonjd committed Mar 1, 2024
1 parent d191244 commit 1ed8dd0
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 650 deletions.
115 changes: 65 additions & 50 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 @@ -26,7 +26,7 @@ import {
import { __, sprintf } from '@wordpress/i18n';
import { store as noticesStore } from '@wordpress/notices';
import { getFilename } from '@wordpress/url';
import { useCallback, useRef } from '@wordpress/element';
import { useCallback, Platform, useRef } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { focus } from '@wordpress/dom';
import { isBlobURL } from '@wordpress/blob';
Expand All @@ -39,10 +39,18 @@ import { setImmutably } from '../../utils/object';
import MediaReplaceFlow from '../media-replace-flow';
import { store as blockEditorStore } from '../../store';

export const IMAGE_BACKGROUND_TYPE = 'image';
const IMAGE_BACKGROUND_TYPE = 'image';

/**
* Checks site settings to see if the background panel may be used.
* `settings.background.backgroundSize` exists also,
* but can only be used if settings?.background?.backgroundImage is `true`.
*
* @param {Object} settings Site settings
* @return {boolean} Whether site settings has activated background panel.
*/
export function useHasBackgroundPanel( settings ) {
return !! settings?.background?.backgroundImage;
return Platform.OS === 'web' && settings?.background?.backgroundImage;
}

/**
Expand All @@ -51,7 +59,7 @@ export function useHasBackgroundPanel( settings ) {
* as background position.
*
* @param {Object} style Style attribute.
* @return {boolean} Whether or not the block has a background size value set.
* @return {boolean} Whether the block has a background size value set.
*/
export function hasBackgroundSizeValue( style ) {
return (
Expand All @@ -65,21 +73,38 @@ export function hasBackgroundSizeValue( style ) {
* attributes.
*
* @param {Object} style Style attribute.
* @return {boolean} Whether or not the block has a background image value set.
* @return {boolean} Whether the block has a background image value set.
*/
export function hasBackgroundImageValue( style ) {
const hasValue =
return (
!! style?.background?.backgroundImage?.id ||
!! style?.background?.backgroundImage?.url;

return hasValue;
!! style?.background?.backgroundImage?.url
);
}

export const hasNumericalBackgroundPosition = ( value ) =>
typeof value === 'string' &&
value.split( ' ' ).every( ( v ) => ! isNaN( parseFloat( v ) ) );

/**
* Get the help text for the background size control.
*
* @param {string} value backgroundSize value.
* @return {string} Translated help text.
*/
function backgroundSizeHelpText( value ) {
if ( value === 'cover' || value === undefined ) {
return __( 'Image covers the space evenly.' );
}
if ( value === 'contain' ) {
return __( 'Image is contained without distortion.' );
}
return __( 'Specify a fixed width.' );
}

/**
* Coverts decimal x and y coords from FocalPointPicker to percentage-based values
* to use as backgroundPosition value.
*
* @param {{x?:number, y?:number}} value FocalPointPicker coords.
* @return {string} backgroundPosition value.
*/
export const coordsToBackgroundPosition = ( value ) => {
if ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {
return undefined;
Expand All @@ -91,6 +116,12 @@ export const coordsToBackgroundPosition = ( value ) => {
return `${ x * 100 }% ${ y * 100 }%`;
};

/**
* Coverts backgroundPosition value to x and y coords for FocalPointPicker.
*
* @param {string} value backgroundPosition value.
* @return {{x?:number, y?:number}} FocalPointPicker coords.
*/
export const backgroundPositionToCoords = ( value ) => {
if ( ! value ) {
return { x: undefined, y: undefined };
Expand All @@ -103,24 +134,14 @@ export const backgroundPositionToCoords = ( value ) => {
return { x, y };
};

function backgroundSizeHelpText( value ) {
if ( value === 'cover' || value === undefined ) {
return __( 'Image covers the space evenly.' );
}
if ( value === 'contain' ) {
return __( 'Image is contained without distortion.' );
}
return __( 'Specify a fixed width.' );
}

function InspectorImagePreview( { label, filename, url: imgUrl } ) {
const imgLabel = label || getFilename( imgUrl );
return (
<ItemGroup as="span">
<HStack justify="flex-start" as="span">
<span
className={ classnames(
'block-editor-hooks__background__inspector-image-indicator-wrapper',
'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
{
'has-image': imgUrl,
}
Expand All @@ -129,7 +150,7 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
>
{ imgUrl && (
<span
className="block-editor-hooks__background__inspector-image-indicator"
className="block-editor-global-styles-background-panel__inspector-image-indicator"
style={ {
backgroundImage: `url(${ imgUrl })`,
} }
Expand All @@ -139,7 +160,7 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
<FlexItem as="span">
<Truncate
numberOfLines={ 1 }
className="block-editor-hooks__background__inspector-media-replace-title"
className="block-editor-global-styles-background-panel__inspector-media-replace-title"
>
{ imgLabel }
</Truncate>
Expand All @@ -165,19 +186,13 @@ function BackgroundImageToolsPanelItem( {
style,
inheritedValue,
} ) {
const { mediaUpload } = useSelect(
( select ) => {
const { getSettings } = select( blockEditorStore );

return {
mediaUpload: getSettings().mediaUpload,
};
},
[ panelId ]
const mediaUpload = useSelect(
( select ) => select( blockEditorStore ).getSettings().mediaUpload,
[]
);

const { id, title, url } = style?.background?.backgroundImage || {
...inheritedValue?.background.backgroundImage,
...inheritedValue?.background?.backgroundImage,
};

const replaceContainerRef = useRef();
Expand Down Expand Up @@ -269,7 +284,7 @@ function BackgroundImageToolsPanelItem( {
panelId={ panelId }
>
<div
className="block-editor-hooks__background__inspector-media-replace-container"
className="block-editor-global-styles-background-panel__inspector-media-replace-container"
ref={ replaceContainerRef }
>
<MediaReplaceFlow
Expand Down Expand Up @@ -396,14 +411,15 @@ function BackgroundSizeToolsPanelItem( {
);
};

const updateBackgroundPosition = ( next ) =>
const updateBackgroundPosition = ( next ) => {
onChange(
setImmutably(
style,
[ 'background', 'backgroundPosition' ],
coordsToBackgroundPosition( next )
)
);
};

const toggleIsRepeated = () =>
onChange(
Expand Down Expand Up @@ -527,15 +543,14 @@ export default function BackgroundPanel( {
panelId,
defaultControls = DEFAULT_CONTROLS,
} ) {
const hasBackGroundSizeControl =
hasNumericalBackgroundPosition( settings?.background?.backgroundSize ) ||
hasNumericalBackgroundPosition( inheritedValue?.background?.backgroundSize );
const resetAllFilter = useCallback( ( previousValue ) => {
return {
...previousValue,
background: {},
};
}, [] );
const shouldShowBackgroundSizeControls =
settings?.background?.backgroundSize;

return (
<Wrapper
Expand All @@ -551,15 +566,15 @@ export default function BackgroundPanel( {
style={ value }
inheritedValue={ inheritedValue }
/>
<BackgroundSizeToolsPanelItem
onChange={ onChange }
panelId={ panelId }
isShownByDefault={
hasBackGroundSizeControl || defaultControls.backgroundSize
}
style={ value }
inheritedValue={ inheritedValue }
/>
{ shouldShowBackgroundSizeControls && (
<BackgroundSizeToolsPanelItem
onChange={ onChange }
panelId={ panelId }
isShownByDefault={ defaultControls.backgroundSize }
style={ value }
inheritedValue={ inheritedValue }
/>
) }
</Wrapper>
);
}
77 changes: 77 additions & 0 deletions packages/block-editor/src/components/global-styles/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,80 @@
/*rtl:ignore*/
direction: ltr;
}

.block-editor-global-styles-background-panel__inspector-media-replace-container {
position: relative;
// Since there is no option to skip rendering the drag'n'drop icon in drop
// zone, we hide it for now.
.components-drop-zone__content-icon {
display: none;
}

button.components-button {
color: $gray-900;
box-shadow: inset 0 0 0 $border-width $gray-300;
width: 100%;
display: block;
height: $grid-unit-50;

&:hover {
color: var(--wp-admin-theme-color);
}

&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}

.block-editor-global-styles-background-panel__inspector-media-replace-title {
word-break: break-all;
// The Button component is white-space: nowrap, and that won't work with line-clamp.
white-space: normal;

// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
text-align: start;
text-align-last: center;
}

.components-dropdown {
display: block;
}
}

.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.
}
}

.block-editor-global-styles-background-panel__inspector-image-indicator {
background-size: cover;
border-radius: $radius-round;
width: 20px;
height: 20px;
display: block;
position: relative;
}

.block-editor-global-styles-background-panel__inspector-image-indicator::after {
content: "";
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
border-radius: $radius-round;
box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
border: 1px solid transparent;
box-sizing: inherit;
}

37 changes: 36 additions & 1 deletion ...block-editor/src/hooks/test/background.js → ...ts/global-styles/test/background-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
import {
backgroundPositionToCoords,
coordsToBackgroundPosition,
} from '../background';
hasBackgroundImageValue,
} from '../background-panel';

describe( 'backgroundPositionToCoords', () => {
it( 'should return the correct coordinates for a percentage value using 2-value syntax', () => {
Expand Down Expand Up @@ -48,3 +49,37 @@ describe( 'coordsToBackgroundPosition', () => {
expect( coordsToBackgroundPosition( {} ) ).toBeUndefined();
} );
} );

describe( 'hasBackgroundImageValue', () => {
it( 'should return `true` when id and url exist', () => {
expect(
hasBackgroundImageValue( {
background: { backgroundImage: { id: 1, url: 'url' } },
} )
).toBe( true );
} );

it( 'should return `true` when only url exists', () => {
expect(
hasBackgroundImageValue( {
background: { backgroundImage: { url: 'url' } },
} )
).toBe( true );
} );

it( 'should return `true` when only id exists', () => {
expect(
hasBackgroundImageValue( {
background: { backgroundImage: { id: 1 } },
} )
).toBe( true );
} );

it( 'should return `false` when id and url do not exist', () => {
expect(
hasBackgroundImageValue( {
background: { backgroundImage: {} },
} )
).toBe( false );
} );
} );
Loading

0 comments on commit 1ed8dd0

Please sign in to comment.