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

[Mobile] - Full-width/wide alignment support for more blocks #25184

Merged
merged 8 commits into from
Oct 8, 2020
Merged

[Mobile] - Full-width/wide alignment support for more blocks #25184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8558de6
Mobile - Full-width/wide alignment options for all blocks except columns
Sep 9, 2020
d3b1ae7
Mobile - Gallery block support for full-width
Sep 23, 2020
bd3404d
Mobile - Block list - Add zindex to the selected border state
Sep 23, 2020
302697c
Merge branch 'master' into rnmobile/feature/full-width-wide-align-sup…
Sep 23, 2020
026bce0
Mobile - Gallery block - Remove unneeded square brackets
Sep 23, 2020
3836313
Merge branch 'master' into rnmobile/feature/full-width-wide-align-sup…
Oct 5, 2020
6b75b0e
Mobile - Gallery block - Move full width condition to const
Oct 5, 2020
29f1532
Mobile - Update CHANGELOG
Oct 5, 2020
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
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-list/block.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@ class BlockListBlock extends Component {
>
{ isSelected && (
<View
pointerEvents="box-none"
style={ [
styles.solidBorder,
isFullWidth &&
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-list/block.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
border-width: $block-selected-border-width;
border-radius: 4px;
border-style: solid;
z-index: 1;
}

.dashedBorder {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/align.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ addFilter(
'core/react-native-editor/align',
( settings, name ) => {
if (
! WIDE_ALIGNMENTS.supportedBlocks.includes( name ) &&
WIDE_ALIGNMENTS.excludeBlocks.includes( name ) &&
hasBlockSupport( settings, 'align' )
) {
const blockAlign = settings.supports.align;
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/gallery/gallery-styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
.galleryTilesContainerSelected {
margin-bottom: 16px;
}

.fullWidth {
margin-left: $block-edge-to-content;
margin-right: $block-edge-to-content;
}
8 changes: 7 additions & 1 deletion packages/block-library/src/gallery/gallery.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { BlockCaption } from '@wordpress/block-editor';
import { useState, useEffect } from '@wordpress/element';
import { mediaUploadSync } from '@wordpress/react-native-bridge';
import { useSelect } from '@wordpress/data';
import { WIDE_ALIGNMENTS } from '@wordpress/components';

const TILE_SPACING = 15;

Expand Down Expand Up @@ -54,6 +55,7 @@ export const Gallery = ( props ) => {
} = props;

const {
align,
columns = defaultColumnsNumber( attributes ),
imageCrop,
images,
Expand Down Expand Up @@ -82,6 +84,8 @@ export const Gallery = ( props ) => {
onFocusGalleryCaption();
};

const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full;

return (
<View style={ { flex: 1 } }>
<Tiles
Expand Down Expand Up @@ -127,7 +131,9 @@ export const Gallery = ( props ) => {
);
} ) }
</Tiles>
{ mediaPlaceholder }
<View style={ [ isFullWidth && styles.fullWidth ] }>
{ mediaPlaceholder }
</View>
<BlockCaption
clientId={ clientId }
isSelected={ isCaptionSelected }
Expand Down
10 changes: 3 additions & 7 deletions packages/components/src/mobile/readable-content-view/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,12 @@ const ReadableContentView = ( { align, reversed, children, style } ) => {
}

useEffect( () => {
if ( align === WIDE_ALIGNMENTS.alignments.wide ) {
Dimensions.addEventListener( 'change', onDimensionsChange );
}
Dimensions.addEventListener( 'change', onDimensionsChange );

return () => {
if ( align === WIDE_ALIGNMENTS.alignments.wide ) {
Dimensions.removeEventListener( 'change', onDimensionsChange );
}
Dimensions.removeEventListener( 'change', onDimensionsChange );
};
}, [ align ] );
}, [] );

function getWideStyles() {
if (
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/mobile/utils/alignments.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export const WIDE_ALIGNMENTS = {
wide: 'wide',
full: 'full',
},
supportedBlocks: [ 'core/cover', 'core/group', 'core/image' ],
excludeBlocks: [ 'core/columns' ],
};

export const ALIGNMENT_BREAKPOINTS = {
Expand Down
4 changes: 4 additions & 0 deletions packages/react-native-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ For each user feature we should also add a importance categorization label to i

## Unreleased

## 1.39.0

* [***] Full-width and wide alignment support for Video, Latest-posts, Gallery, Media & text, and Pullquote block [https://github.com/WordPress/gutenberg/pull/25184/]

## 1.38.0

[***] Add support for selecting user's post when configuring the link
Expand Down