Skip to content

Commit

Permalink
Merge branch 'trunk' into line-height-control-margin
Browse files Browse the repository at this point in the history
  • Loading branch information
mirka authored Aug 6, 2024
2 parents 7237302 + 8b5cdba commit e6aaf6a
Show file tree
Hide file tree
Showing 26 changed files with 513 additions and 196 deletions.
4 changes: 4 additions & 0 deletions packages/block-editor/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@

- `LineHeightControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#64281](https://github.com/WordPress/gutenberg/pull/64281)).

### Enhancements

- `FontFamilyControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#64280](https://github.com/WordPress/gutenberg/pull/64280)).

## 13.4.0 (2024-07-24)

## 13.3.0 (2024-07-10)
Expand Down
8 changes: 8 additions & 0 deletions packages/block-editor/src/components/font-family/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const MyFontFamilyControl = () => {
onChange={ ( newFontFamily ) => {
setFontFamily( newFontFamily );
} }
__nextHasNoMarginBottom
/>
);
};
Expand Down Expand Up @@ -69,3 +70,10 @@ The current font family value.
- Default: ''

The rest of the props are passed down to the underlying `<SelectControl />` instance.

#### `__nextHasNoMarginBottom`

- **Type:** `boolean`
- **Default:** `false`

Start opting into the new margin-free styles that will become the default in a future version.
16 changes: 16 additions & 0 deletions packages/block-editor/src/components/font-family/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* WordPress dependencies
*/
import { SelectControl } from '@wordpress/components';
import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';

/**
Expand All @@ -10,6 +11,8 @@ import { __ } from '@wordpress/i18n';
import { useSettings } from '../use-settings';

export default function FontFamilyControl( {
/** Start opting into the new margin-free styles that will become the default in a future version. */
__nextHasNoMarginBottom = false,
value = '',
onChange,
fontFamilies,
Expand All @@ -33,8 +36,21 @@ export default function FontFamilyControl( {
};
} ),
];

if ( ! __nextHasNoMarginBottom ) {
deprecated(
'Bottom margin styles for wp.blockEditor.FontFamilyControl',
{
since: '6.7',
version: '7.0',
hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
}
);
}

return (
<SelectControl
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
label={ __( 'Font' ) }
options={ options }
value={ value }
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import FontFamilyControl from '..';

export default {
component: FontFamilyControl,
title: 'BlockEditor/FontFamilyControl',
};

export const Default = {
render: function Template( props ) {
const [ value, setValue ] = useState();
return (
<FontFamilyControl
onChange={ setValue }
value={ value }
{ ...props }
/>
);
},
args: {
fontFamilies: [
{
fontFace: [
{
fontFamily: 'Inter',
fontStretch: 'normal',
fontStyle: 'normal',
fontWeight: '200 900',
src: [
'file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf',
],
},
],
fontFamily: '"Inter", sans-serif',
name: 'Inter',
slug: 'inter',
},
{
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
name: 'System Font',
slug: 'system-font',
},
],
__nextHasNoMarginBottom: true,
},
};
61 changes: 54 additions & 7 deletions packages/block-editor/src/components/grid/use-grid-layout-sync.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { usePrevious } from '@wordpress/compose';
*/
import { store as blockEditorStore } from '../../store';
import { GridRect } from './utils';
import { setImmutably } from '../../utils/object';

export function useGridLayoutSync( { clientId: gridClientId } ) {
const { gridLayout, blockOrder, selectedBlockLayout } = useSelect(
Expand All @@ -26,7 +27,8 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
[ gridClientId ]
);

const { getBlockAttributes } = useSelect( blockEditorStore );
const { getBlockAttributes, getBlockRootClientId } =
useSelect( blockEditorStore );
const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );

Expand All @@ -40,6 +42,7 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
const previousIsManualPlacement = usePrevious(
gridLayout.isManualPlacement
);
const previousBlockOrder = usePrevious( blockOrder );

useEffect( () => {
const updates = {};
Expand Down Expand Up @@ -123,6 +126,46 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
},
};
}

// Unset grid layout attributes for blocks removed from the grid.
for ( const clientId of previousBlockOrder ?? [] ) {
if ( ! blockOrder.includes( clientId ) ) {
const rootClientId = getBlockRootClientId( clientId );

// Block was removed from the editor, so nothing to do.
if ( rootClientId === null ) {
continue;
}

// Check if the block is being moved to another grid.
// If so, do nothing and let the new grid parent handle
// the attributes.
const rootAttributes = getBlockAttributes( rootClientId );
if ( rootAttributes?.layout?.type === 'grid' ) {
continue;
}

const attributes = getBlockAttributes( clientId );
const {
columnStart,
rowStart,
columnSpan,
rowSpan,
...layout
} = attributes.style?.layout ?? {};

if ( columnStart || rowStart || columnSpan || rowSpan ) {
const hasEmptyLayoutAttribute =
Object.keys( layout ).length === 0;

updates[ clientId ] = setImmutably(
attributes,
[ 'style', 'layout' ],
hasEmptyLayoutAttribute ? undefined : layout
);
}
}
}
} else {
// Remove all of the columnStart and rowStart values
// when switching from manual to auto mode,
Expand All @@ -133,12 +176,14 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
attributes.style?.layout ?? {};
// Only update attributes if columnStart or rowStart are set.
if ( columnStart || rowStart ) {
updates[ clientId ] = {
style: {
...attributes.style,
layout,
},
};
const hasEmptyLayoutAttribute =
Object.keys( layout ).length === 0;

updates[ clientId ] = setImmutably(
attributes,
[ 'style', 'layout' ],
hasEmptyLayoutAttribute ? undefined : layout
);
}
}
}
Expand Down Expand Up @@ -166,12 +211,14 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
// Actual deps to sync:
gridClientId,
gridLayout,
previousBlockOrder,
blockOrder,
previouslySelectedBlockRect,
previousIsManualPlacement,
// These won't change, but the linter thinks they might:
__unstableMarkNextChangeAsNotPersistent,
getBlockAttributes,
getBlockRootClientId,
updateBlockAttributes,
] );
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
privateApis as componentsPrivateApis,
CustomSelectControl,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useState, useMemo } from '@wordpress/element';
Expand All @@ -31,11 +31,6 @@ import {
getPresetValueFromCustomValue,
isValueSpacingPreset,
} from '../utils';
import { unlock } from '../../../lock-unlock';

const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
componentsPrivateApis
);

const CUSTOM_VALUE_SETTINGS = {
px: { max: 300, steps: 1 },
Expand Down
80 changes: 66 additions & 14 deletions packages/block-editor/src/components/use-block-drop-zone/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -301,15 +301,18 @@ export default function useBlockDropZone( {
operation: 'insert',
} );

const { getBlockType } = useSelect( blocksStore );
const { getBlockType, getBlockVariations, getGroupingBlockName } =
useSelect( blocksStore );
const {
canInsertBlockType,
getBlockListSettings,
getBlocks,
getBlockIndex,
getDraggedBlockClientIds,
getBlockNamesByClientId,
getAllowedBlocks,
isDragging,
isGroupable,
} = unlock( useSelect( blockEditorStore ) );
const {
showInsertionPoint,
Expand Down Expand Up @@ -385,21 +388,66 @@ export default function useBlockDropZone( {
};
} );

const dropTargetPosition = getDropTargetPosition(
blocksData,
{ x: event.clientX, y: event.clientY },
getBlockListSettings( targetRootClientId )?.orientation,
{
dropZoneElement,
parentBlockClientId,
parentBlockOrientation: parentBlockClientId
? getBlockListSettings( parentBlockClientId )
?.orientation
: undefined,
rootBlockIndex: getBlockIndex( targetRootClientId ),
}
);

const [ targetIndex, operation, nearestSide ] =
getDropTargetPosition(
blocksData,
{ x: event.clientX, y: event.clientY },
getBlockListSettings( targetRootClientId )?.orientation,
{
dropZoneElement,
parentBlockClientId,
parentBlockOrientation: parentBlockClientId
? getBlockListSettings( parentBlockClientId )
?.orientation
: undefined,
rootBlockIndex: getBlockIndex( targetRootClientId ),
}
dropTargetPosition;

if ( operation === 'group' ) {
const targetBlock = blocks[ targetIndex ];
const areAllImages = [
targetBlock.name,
...draggedBlockNames,
].every( ( name ) => name === 'core/image' );
const canInsertGalleryBlock = canInsertBlockType(
'core/gallery',
targetRootClientId
);
const areGroupableBlocks = isGroupable( [
targetBlock.clientId,
getDraggedBlockClientIds(),
] );
const groupBlockVariations = getBlockVariations(
getGroupingBlockName(),
'block'
);
const canInsertRow =
groupBlockVariations &&
groupBlockVariations.find(
( { name } ) => name === 'group-row'
);

// If the dragged blocks and the target block are all images,
// check if it is creatable either a Row variation or a Gallery block.
if (
areAllImages &&
! canInsertGalleryBlock &&
( ! areGroupableBlocks || ! canInsertRow )
) {
return;
}
// If the dragged blocks and the target block are not all images,
// check if it is creatable a Row variation.
if (
! areAllImages &&
( ! areGroupableBlocks || ! canInsertRow )
) {
return;
}
}

registry.batch( () => {
setDropTarget( {
Expand Down Expand Up @@ -436,6 +484,10 @@ export default function useBlockDropZone( {
showInsertionPoint,
isDragging,
startDragging,
canInsertBlockType,
getBlockVariations,
getGroupingBlockName,
isGroupable,
]
),
200
Expand Down
10 changes: 1 addition & 9 deletions packages/block-editor/src/components/use-on-block-drop/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,6 @@ export default function useOnBlockDrop(
getBlocksByClientId,
getSettings,
getBlock,
isGroupable,
} = useSelect( blockEditorStore );
const { getGroupingBlockName } = useSelect( blocksStore );
const {
Expand All @@ -255,17 +254,11 @@ export default function useOnBlockDrop(
if ( ! Array.isArray( blocks ) ) {
blocks = [ blocks ];
}

const clientIds = getBlockOrder( targetRootClientId );
const clientId = clientIds[ targetBlockIndex ];
const blocksClientIds = blocks.map( ( block ) => block.clientId );
const areGroupableBlocks = isGroupable( [
...blocksClientIds,
clientId,
] );
if ( operation === 'replace' ) {
replaceBlocks( clientId, blocks, undefined, initialPosition );
} else if ( operation === 'group' && areGroupableBlocks ) {
} else if ( operation === 'group' ) {
const targetBlock = getBlock( clientId );
if ( nearestSide === 'left' ) {
blocks.push( targetBlock );
Expand Down Expand Up @@ -325,7 +318,6 @@ export default function useOnBlockDrop(
getBlockOrder,
targetRootClientId,
targetBlockIndex,
isGroupable,
operation,
replaceBlocks,
getBlock,
Expand Down
Loading

0 comments on commit e6aaf6a

Please sign in to comment.