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

[RNMobile] Add featured image settings to the Latest Posts block #39257

Merged
merged 23 commits into from
Apr 27, 2022
Merged

[RNMobile] Add featured image settings to the Latest Posts block #39257

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
447f2a8
Add 'display featured image' toggle to settings
Mar 7, 2022
49a5824
Add 'link to featured image' toggle to settings
Mar 7, 2022
e49d8ef
Add alignment control to featured image settings
Mar 11, 2022
0ad7afe
Style BlockAlignmentControl within BottomSheet
Mar 11, 2022
61d12b7
Update new BottomSheet's label
Mar 11, 2022
30c62ac
Update CHANGELOG
Mar 11, 2022
9278d5f
Merge branch 'trunk' into rnmobile/update/latest-posts-featured-settings
Mar 11, 2022
466c655
Merge branch 'trunk' into rnmobile/update/latest-posts-featured-settings
Mar 21, 2022
ae2d3ae
Remove redundant new line (added by mistake)
Mar 21, 2022
9d99ffa
Revert BlockAlignmentControl implementation
Mar 24, 2022
f81bb40
Add alignment options via BottomSheetSelectControl
Mar 24, 2022
28235ad
Add separator between settings
Mar 24, 2022
21e52a1
Move BLOCK_ALIGNMENTS_CONTROLS to constants file
Mar 24, 2022
b5dbeec
Merge branch 'trunk' into rnmobile/update/latest-posts-featured-settings
Mar 25, 2022
0fe02e6
Refactor to make use of 'BlockAlignmentControl'
Apr 22, 2022
19b0e21
Create native version of 'ui.js'
Apr 22, 2022
c0799d1
Merge branch 'trunk' into rnmobile/update/latest-posts-featured-settings
Apr 22, 2022
40765b4
Remove native-specific code from web-only file
Apr 22, 2022
ec59670
Style BlockAlignmentControl within BottomSheet
Apr 22, 2022
dac3698
Move constants to dedicated file
Apr 22, 2022
9fb7b38
Remove unnecessary code in web-only file
Apr 22, 2022
abf44c8
Only pass props when components use them
Apr 22, 2022
30db2b0
Merge branch 'trunk' into rnmobile/update/latest-posts-featured-settings
Apr 27, 2022
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
22 changes: 22 additions & 0 deletions packages/block-library/src/latest-posts/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,25 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
alignNone,
positionCenter,
positionLeft,
positionRight,
} from '@wordpress/icons';

export const MIN_EXCERPT_LENGTH = 10;
export const MAX_EXCERPT_LENGTH = 100;
export const MAX_POSTS_COLUMNS = 6;

export const BLOCK_ALIGNMENTS_CONTROLS = [
{ value: undefined, label: __( 'None' ), icon: alignNone },
{ value: 'left', label: __( 'Align left' ), icon: positionLeft },
{
value: 'center',
label: __( 'Align center' ),
icon: positionCenter,
},
{ value: 'right', label: __( 'Align right' ), icon: positionRight },
];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we should expose a native-only constant in the constants file, if it's going to be used only in the edit.native.js file I might consider defining the constant there, wdyt?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes to this shared constants file have been removed following the recent refactor. 👍

59 changes: 58 additions & 1 deletion packages/block-library/src/latest-posts/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,19 @@ import {
ToggleControl,
RangeControl,
QueryControls,
BottomSheetSelectControl,
} from '@wordpress/components';
import { store as blocksStore } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import styles from './style.scss';
import { MIN_EXCERPT_LENGTH, MAX_EXCERPT_LENGTH } from './constants';
import {
MIN_EXCERPT_LENGTH,
MAX_EXCERPT_LENGTH,
BLOCK_ALIGNMENTS_CONTROLS,
} from './constants';

class LatestPostsEdit extends Component {
constructor() {
Expand All @@ -43,6 +48,15 @@ class LatestPostsEdit extends Component {
);
this.onSetExcerptLength = this.onSetExcerptLength.bind( this );
this.onSetDisplayPostDate = this.onSetDisplayPostDate.bind( this );
this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.bind(
this
);
this.onSetFeaturedImageAlign = this.onSetFeaturedImageAlign.bind(
this
);
this.onSetAddLinkToFeaturedImage = this.onSetAddLinkToFeaturedImage.bind(
this
);
this.onSetOrder = this.onSetOrder.bind( this );
this.onSetOrderBy = this.onSetOrderBy.bind( this );
this.onSetPostsToShow = this.onSetPostsToShow.bind( this );
Expand Down Expand Up @@ -95,6 +109,21 @@ class LatestPostsEdit extends Component {
setAttributes( { displayPostDate: value } );
}

onSetDisplayFeaturedImage( value ) {
const { setAttributes } = this.props;
setAttributes( { displayFeaturedImage: value } );
}

onSetAddLinkToFeaturedImage( value ) {
const { setAttributes } = this.props;
setAttributes( { addLinkToFeaturedImage: value } );
}

onSetFeaturedImageAlign( value ) {
const { setAttributes } = this.props;
setAttributes( { featuredImageAlign: value } );
}

onSetOrder( value ) {
const { setAttributes } = this.props;
setAttributes( { order: value } );
Expand Down Expand Up @@ -124,6 +153,9 @@ class LatestPostsEdit extends Component {
displayPostContentRadio,
excerptLength,
displayPostDate,
displayFeaturedImage,
featuredImageAlign,
addLinkToFeaturedImage,
order,
orderBy,
postsToShow,
Expand Down Expand Up @@ -166,6 +198,31 @@ class LatestPostsEdit extends Component {
onChange={ this.onSetDisplayPostDate }
/>
</PanelBody>

<PanelBody title={ __( 'Featured image settings' ) }>
<ToggleControl
label={ __( 'Display featured image' ) }
checked={ displayFeaturedImage }
onChange={ this.onSetDisplayFeaturedImage }
/>
{ displayFeaturedImage && (
<>
<BottomSheetSelectControl
label={ __( 'Image alignment' ) }
options={ BLOCK_ALIGNMENTS_CONTROLS }
onChange={ this.onSetFeaturedImageAlign }
value={ featuredImageAlign }
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the future, it would be great if BlockAlignmentControl renders this component (i.e. BottomSheetSelectControl) underneath, this way we won't need to set up the options and we could use it here.

I was checking the previous commits where you introduced isBottomSheetControl prop in BlockAlignmentUI, and I was wondering if we could follow that approach for this. But, I noticed that it most likely imply a big refactor because we would need to implement the native version of the Block Alignment Toolbar component to provide here the BottomSheetSelectControl component.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fluiddot, thank you for the suggestion! I've gone ahead with the proposed refactor, introducing the isBottomSheetControl prop again. As this required a significant number of changes to the ui.js file, I created a separate native version in 19b0e21.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thank you very much @SiobhyB for tackling this 🙇.

I'd like to clarify that with my previous comment I didn't want to imply that we had to do the refactor in this PR, but I'm happy to see you sorted it out 😊. I'll try to take a look as soon as possible at the latest changes.

<ToggleControl
label={ __( 'Add link to featured image' ) }
checked={ addLinkToFeaturedImage }
onChange={ this.onSetAddLinkToFeaturedImage }
separatorType={ 'topFullWidth' }
/>
</>
) }
</PanelBody>

<PanelBody title={ __( 'Sorting and filtering' ) }>
<QueryControls
{ ...{ order, orderBy } }
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/mobile/bottom-sheet-select-control/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const BottomSheetSelectControl = ( {
customActionButton
separatorType="none"
label={ item.label }
icon={ item.icon }
onPress={ onChangeValue( item.value ) }
leftAlign={ true }
key={ index }
Expand Down
2 changes: 2 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,8 @@ For each user feature we should also add a importance categorization label to i

## Unreleased

- [*] Add featured image settings to Latest Posts block [#39257]

## 1.72.0

- [*] Add GIF badge for animated GIFs uploaded to Image blocks [#38996]
Expand Down