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.

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

[Mobile] Refactor gallery as nested image blocks #31306

Merged
Show file tree
Hide file tree
Changes from 42 commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
1521f52
Move native v1 Gallery components to v1 directory
mkevins Apr 26, 2021
8639891
Use v1 defaultColumnsNumber in native v1 gallery
mkevins Apr 26, 2021
91c09b8
Make onFocus optional in MediaPlaceholder
mkevins Apr 27, 2021
ffc22e7
Add useInnerBlocksProps hook
mkevins Apr 27, 2021
e688131
Enable __experimentalGalleryRefactor flag under __DEV__
mkevins Apr 29, 2021
c8fbc35
Add WIP v2 gallery
mkevins Apr 29, 2021
2f44f58
Add numColumns to block-list flat list
mkevins Apr 29, 2021
9fd5897
Temporarily comment out spinner for pending imagesize option
mkevins Apr 29, 2021
d646d59
Fix spacing
mkevins Apr 29, 2021
59ea082
Adjust styles to avoid appender overlap
mkevins Apr 30, 2021
683af04
Add gallery caption
mkevins Apr 30, 2021
a520018
Fix lint
mkevins May 4, 2021
1f0073d
Fix sass lint
mkevins May 4, 2021
4e3d981
Merge branch 'refactor/gallery-to-nested-image-blocks' into rnmobile/…
mkevins May 7, 2021
77091e2
Merge branch 'refactor/gallery-to-nested-image-blocks' into rnmobile/…
mkevins May 20, 2021
2c6e317
[Mobile] - Refactor gallery - cherry pick image edit native (#31826)
mkevins May 20, 2021
3221e23
Cherry-pick BlockListItem changes
mkevins May 24, 2021
7616231
Return early from render instead of renderContent
mkevins May 24, 2021
4d235fd
Cherry-pick plumb blockProps through BlockListBlock
mkevins May 24, 2021
df286d8
Cherry-pick add GridItem
mkevins May 24, 2021
f5ff38d
Cherry-pick BlockList
mkevins May 24, 2021
0e777c6
Cherry-pick StylePreview key change
mkevins May 24, 2021
acfcb7f
Cherry-pick blockProps and gridProperties in InnerBlocks
mkevins May 24, 2021
30d20b1
Use sass var for galleryAppender padding
mkevins May 24, 2021
8e89a84
Cherry-pick remaining gallery changes
mkevins May 24, 2021
2de17c3
Remove numColumns
mkevins May 26, 2021
931184a
Remove blockProps
mkevins May 26, 2021
e96cd3e
Fix gallery block.json (delete extra comma)
mkevins May 27, 2021
5c78270
Remove unused imageCrop
mkevins May 27, 2021
3c2f144
Merge branch 'refactor/gallery-to-nested-image-blocks' into rnmobile/…
mkevins May 31, 2021
46c8da7
Merge branch 'refactor/gallery-to-nested-image-blocks-upstream' into …
mkevins Jun 3, 2021
946aeab
Merge branch 'refactor/gallery-to-nested-image-blocks' into rnmobile/…
mkevins Jun 15, 2021
fb34126
Merge branch 'refactor/gallery-to-nested-image-blocks-upstream' into …
mkevins Jun 16, 2021
0527d39
Add back blockWidth contentContainerStyles in block list
mkevins May 31, 2021
a8c1f0e
Use boolean flags for variants in Platform module
mkevins May 31, 2021
1c1dc9d
Use boolean Platform flags
mkevins May 31, 2021
5f35c4c
Only render imageSizeOptions loading spinner on web
mkevins May 31, 2021
57a01f7
Add default for destructured context in image edit
mkevins Jun 1, 2021
0052b11
Temporarily hard-code experimenal gallery refactor flag to true
mkevins Jun 4, 2021
0d5fb18
Revert "Temporarily hard-code experimenal gallery refactor flag to true"
mkevins Jul 5, 2021
03d730b
Update experiments page with warning about the mobile app version
mkevins Jul 5, 2021
93fd471
Merge branch 'refactor/gallery-to-nested-image-blocks-upstream' into …
mkevins Jul 8, 2021
9ca69ea
Merge branch 'refactor/gallery-to-nested-image-blocks' into rnmobile/…
Aug 2, 2021
475f976
Changes new gallery flag name
Aug 2, 2021
5387ca0
Updates mobile warning
Aug 2, 2021
ec158f7
Removes the imageCount attribute
Aug 2, 2021
53ba376
Remove the isGrouped context
Aug 2, 2021
fe40795
Fixes lint issue
Aug 2, 2021
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 lib/experiments-page.php
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function gutenberg_initialize_experiments_settings() {
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => __( 'Enable the refactored gallery block', 'gutenberg' ),
'label' => __( 'Enable the refactored gallery block (Warning: The refactored gallery is not compatible with WordPress mobile apps prior to version 17.8. If you use the mobile app, please update to the latest version to avoid content loss.)', 'gutenberg' ),
'id' => 'gutenberg-gallery-refactor',
)
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import { ReadableContentView, alignmentHelpers } from '@wordpress/components';
*/
import BlockListBlock from './block';
import BlockInsertionPoint from './insertion-point';
import Grid from './grid-item';

import styles from './block-list-item.native.scss';
import { store as blockEditorStore } from '../../store';

Expand Down Expand Up @@ -104,7 +106,7 @@ export class BlockListItem extends Component {
];
}

render() {
renderContent() {
const {
blockAlignment,
clientId,
Expand All @@ -123,10 +125,6 @@ export class BlockListItem extends Component {
contentResizeMode === 'stretch' && stretchStyle;
const { isContainerRelated } = alignmentHelpers;

if ( ! blockWidth ) {
return null;
}

return (
<ReadableContentView
align={ blockAlignment }
Expand Down Expand Up @@ -162,6 +160,34 @@ export class BlockListItem extends Component {
</ReadableContentView>
);
}

render() {
const {
gridProperties,
clientId,
parentWidth,
items,
blockWidth,
} = this.props;

if ( ! blockWidth ) {
return null;
}

if ( gridProperties ) {
return (
<Grid
numOfColumns={ gridProperties.numColumns }
tileCount={ items.length }
index={ items.indexOf( clientId ) }
maxWidth={ parentWidth }
>
{ this.renderContent() }
</Grid>
);
}
return this.renderContent();
}
}

export default compose( [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,7 @@
.fullAlignmentPadding {
padding: $block-edge-to-content;
}

.gridItem {
overflow: visible;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/**
* External dependencies
*/
import { View } from 'react-native';

/**
* Internal dependencies
*/
import styles from './block-list-item.scss';

function Grid( props ) {
/**
* Since we don't have `calc()`, we must calculate our spacings here in
* order to preserve even spacing between tiles and equal width for tiles
* in a given row.
*
* In order to ensure equal sizing of tile contents, we distribute the
* spacing such that each tile has an equal "share" of the fixed spacing. To
* keep the tiles properly aligned within their rows, we calculate the left
* and right paddings based on the tile's relative position within the row.
*
* Note: we use padding instead of margins so that the fixed spacing is
* included within the relative spacing (i.e. width percentage), and
* wrapping behavior is preserved.
*
* - The left most tile in a row must have left padding of zero.
* - The right most tile in a row must have a right padding of zero.
*
* The values of these left and right paddings are interpolated for tiles in
* between. The right padding is complementary with the left padding of the
* next tile (i.e. the right padding of [tile n] + the left padding of
* [tile n + 1] will be equal for all tiles except the last one in a given
* row).
*
*/
const { numOfColumns, children, tileCount, index, maxWidth } = props;
const lastTile = tileCount - 1;
const lastRow = Math.floor( lastTile / numOfColumns );

const row = Math.floor( index / numOfColumns );
const rowLength =
row === lastRow ? ( lastTile % numOfColumns ) + 1 : numOfColumns;

return (
<View
style={ [
{
width: maxWidth / rowLength,
},
styles.gridItem,
] }
>
{ children }
</View>
);
}

export default Grid;
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/block-list/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const getStyles = (
const computedStyles = [
isStackedHorizontally && styles.horizontal,
horizontalAlignment && styles[ `is-aligned-${ horizontalAlignment }` ],
styles.overflowVisible,
];
stylesMemo[ styleName ] = computedStyles;
return computedStyles;
Expand Down Expand Up @@ -128,6 +129,7 @@ export class BlockList extends Component {
onDeleteBlock,
contentStyle,
renderAppender,
gridProperties,
} = this.props;
const { blockWidth } = this.state;
if (
Expand All @@ -136,7 +138,8 @@ export class BlockList extends Component {
this.extraData.onDeleteBlock !== onDeleteBlock ||
this.extraData.contentStyle !== contentStyle ||
this.extraData.renderAppender !== renderAppender ||
this.extraData.blockWidth !== blockWidth
this.extraData.blockWidth !== blockWidth ||
this.extraData.gridProperties !== gridProperties
) {
this.extraData = {
parentWidth,
Expand All @@ -145,6 +148,7 @@ export class BlockList extends Component {
contentStyle,
renderAppender,
blockWidth,
gridProperties,
};
}
return this.extraData;
Expand Down Expand Up @@ -312,9 +316,11 @@ export class BlockList extends Component {
onDeleteBlock,
rootClientId,
isStackedHorizontally,
blockClientIds,
parentWidth,
marginVertical = styles.defaultBlock.marginTop,
marginHorizontal = styles.defaultBlock.marginLeft,
gridProperties,
} = this.props;
const { blockWidth } = this.state;
return (
Expand All @@ -333,6 +339,8 @@ export class BlockList extends Component {
this.shouldShowInnerBlockAppender
}
blockWidth={ blockWidth }
gridProperties={ gridProperties }
items={ blockClientIds }
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
return (
<Animated.View
style={ [ outlineStyle, { opacity }, styles[ name ] ] }
key={ outlineStyle.borderColor }
key={ JSON.stringify( outlineStyle ) }
/>
);
} );
Expand Down
5 changes: 4 additions & 1 deletion packages/block-editor/src/components/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ export * from './colors';
export * from './gradients';
export * from './font-sizes';
export { AlignmentControl, AlignmentToolbar } from './alignment-control';
export { default as InnerBlocks } from './inner-blocks';
export {
default as InnerBlocks,
useInnerBlocksProps as __experimentalUseInnerBlocksProps,
} from './inner-blocks';
export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
export { default as InspectorControls } from './inspector-controls';
export {
Expand Down
41 changes: 41 additions & 0 deletions packages/block-editor/src/components/inner-blocks/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { useSelect } from '@wordpress/data';
import { getBlockType, withBlockContentContext } from '@wordpress/blocks';
import { useRef } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -23,6 +24,44 @@ import { BlockContextProvider } from '../block-context';
import { defaultLayout, LayoutProvider } from '../block-list/layout';
import { store as blockEditorStore } from '../../store';

/**
* This hook is used to lightly mark an element as an inner blocks wrapper
* element. Call this hook and pass the returned props to the element to mark as
* an inner blocks wrapper, automatically rendering inner blocks as children. If
* you define a ref for the element, it is important to pass the ref to this
* hook, which the hook in turn will pass to the component through the props it
* returns. Optionally, you can also pass any other props through this hook, and
* they will be merged and returned.
*
* @param {Object} props Optional. Props to pass to the element. Must contain
* the ref if one is defined.
* @param {Object} options Optional. Inner blocks options.
*
* @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
*/
export function useInnerBlocksProps( props = {}, options = {} ) {
const fallbackRef = useRef();
const { clientId } = useBlockEditContext();

const ref = props.ref || fallbackRef;
const InnerBlocks =
options.value && options.onChange
? ControlledInnerBlocks
: UncontrolledInnerBlocks;

return {
...props,
ref,
children: (
<InnerBlocks
{ ...options }
clientId={ clientId }
wrapperRef={ ref }
/>
),
};
}

/**
* InnerBlocks is a component which allows a single block to have multiple blocks
* as children. The UncontrolledInnerBlocks component is used whenever the inner
Expand Down Expand Up @@ -53,6 +92,7 @@ function UncontrolledInnerBlocks( props ) {
filterInnerBlocks,
blockWidth,
__experimentalLayout: layout = defaultLayout,
gridProperties,
} = props;

const block = useSelect(
Expand Down Expand Up @@ -86,6 +126,7 @@ function UncontrolledInnerBlocks( props ) {
onAddBlock={ onAddBlock }
onDeleteBlock={ onDeleteBlock }
filterInnerBlocks={ filterInnerBlocks }
gridProperties={ gridProperties }
blockWidth={ blockWidth }
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ function MediaPlaceholder( props ) {
labels = {},
icon,
onSelect,
onFocus,
__experimentalOnlyMediaLibrary,
isAppender,
disableMediaButtons,
Expand Down Expand Up @@ -175,7 +176,7 @@ function MediaPlaceholder( props ) {
accessibilityRole={ 'button' }
accessibilityHint={ accessibilityHint }
onPress={ ( event ) => {
props.onFocus( event );
onFocus?.( event );
open();
} }
>
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/store/defaults.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import {

const SETTINGS_DEFAULTS = {
...SETTINGS,
// FOR TESTING ONLY - Later, this will come from a REST API
// eslint-disable-next-line no-undef
__experimentalGalleryRefactor: __DEV__,
alignWide: true,
};

Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/gallery/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@
},
"providesContext": {
"allowResize": "allowResize",
"isGrouped": "isGrouped"
"isGrouped": "isGrouped",
"imageCrop": "imageCrop"
},
"supports": {
"anchor": true,
Expand Down
20 changes: 8 additions & 12 deletions packages/block-library/src/gallery/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,13 @@ const linkOptions = [
];
const ALLOWED_MEDIA_TYPES = [ 'image' ];

const PLACEHOLDER_TEXT = Platform.select( {
web: __(
'Drag images, upload new ones or select files from your library.'
),
native: __( 'ADD MEDIA' ),
} );

const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( {
web: {},
native: { type: 'stepper' },
} );
const PLACEHOLDER_TEXT = Platform.isNative
? __( 'ADD MEDIA' )
: __( 'Drag images, upload new ones or select files from your library.' );

const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
? { type: 'stepper' }
: {};

function GalleryEdit( props ) {
const {
Expand Down Expand Up @@ -499,7 +495,7 @@ function GalleryEdit( props ) {
hideCancelButton={ true }
/>
) }
{ ! imageSizeOptions && (
{ Platform.isWeb && ! imageSizeOptions && (
<BaseControl className={ 'gallery-image-sizes' }>
<BaseControl.VisualLabel>
{ __( 'Image size' ) }
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/gallery/gallery-styles.native.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.galleryTilesContainerSelected {
margin-bottom: 16px;
@import "./v1/gallery-styles.native.scss";

.galleryAppender {
padding-top: $grid-unit-20;
}

.fullWidth {
Expand Down
Loading