From 447f2a863d9b91914b6cb4ee680da07c1657c442 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 7 Mar 2022 14:50:35 +0000 Subject: [PATCH 01/18] Add 'display featured image' toggle to settings With this commit a 'display featured image' toggle is added to the Latest Post block's settings. This has been added to a new 'Featured image settings' panel. --- .../src/latest-posts/edit.native.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index 08f1f5abe9b58c..e42e86bc446efb 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -43,6 +43,9 @@ class LatestPostsEdit extends Component { ); this.onSetExcerptLength = this.onSetExcerptLength.bind( this ); this.onSetDisplayPostDate = this.onSetDisplayPostDate.bind( this ); + this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.bind( + this + ); this.onSetOrder = this.onSetOrder.bind( this ); this.onSetOrderBy = this.onSetOrderBy.bind( this ); this.onSetPostsToShow = this.onSetPostsToShow.bind( this ); @@ -95,6 +98,11 @@ class LatestPostsEdit extends Component { setAttributes( { displayPostDate: value } ); } + onSetDisplayFeaturedImage( value ) { + const { setAttributes } = this.props; + setAttributes( { displayFeaturedImage: value } ); + } + onSetOrder( value ) { const { setAttributes } = this.props; setAttributes( { order: value } ); @@ -124,6 +132,7 @@ class LatestPostsEdit extends Component { displayPostContentRadio, excerptLength, displayPostDate, + displayFeaturedImage, order, orderBy, postsToShow, @@ -166,6 +175,15 @@ class LatestPostsEdit extends Component { onChange={ this.onSetDisplayPostDate } /> + + + + + Date: Mon, 7 Mar 2022 15:03:15 +0000 Subject: [PATCH 02/18] Add 'link to featured image' toggle to settings The new 'link to featured image' toggle that's added with this commit will only be visible when the 'displayFeaturedImage' toggle is set to true. --- .../src/latest-posts/edit.native.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index e42e86bc446efb..03a045d41d65f6 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -46,6 +46,9 @@ class LatestPostsEdit extends Component { this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.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 ); @@ -103,6 +106,11 @@ class LatestPostsEdit extends Component { setAttributes( { displayFeaturedImage: value } ); } + onSetAddLinkToFeaturedImage( value ) { + const { setAttributes } = this.props; + setAttributes( { addLinkToFeaturedImage: value } ); + } + onSetOrder( value ) { const { setAttributes } = this.props; setAttributes( { order: value } ); @@ -133,6 +141,7 @@ class LatestPostsEdit extends Component { excerptLength, displayPostDate, displayFeaturedImage, + addLinkToFeaturedImage, order, orderBy, postsToShow, @@ -182,6 +191,15 @@ class LatestPostsEdit extends Component { checked={ displayFeaturedImage } onChange={ this.onSetDisplayFeaturedImage } /> + { displayFeaturedImage && ( + <> + + + ) } From e49d8ef098eeb6f74090e307d39cd283ed27c032 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 11 Mar 2022 16:36:49 +0000 Subject: [PATCH 03/18] Add alignment control to featured image settings With this commit, the 'BlockAlignmentControl' component is used to add alignment settings under the Latest Post block's featured image settings/section. --- .../src/latest-posts/edit.native.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index 03a045d41d65f6..6634667702258b 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -12,7 +12,10 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { postList as icon } from '@wordpress/icons'; -import { InspectorControls } from '@wordpress/block-editor'; +import { + InspectorControls, + BlockAlignmentControl, +} from '@wordpress/block-editor'; import apiFetch from '@wordpress/api-fetch'; import { Icon, @@ -46,6 +49,9 @@ class LatestPostsEdit extends Component { this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.bind( this ); + this.onSetFeaturedImageAlign = this.onSetFeaturedImageAlign.bind( + this + ); this.onSetAddLinkToFeaturedImage = this.onSetAddLinkToFeaturedImage.bind( this ); @@ -111,6 +117,11 @@ class LatestPostsEdit extends Component { setAttributes( { addLinkToFeaturedImage: value } ); } + onSetFeaturedImageAlign( value ) { + const { setAttributes } = this.props; + setAttributes( { featuredImageAlign: value } ); + } + onSetOrder( value ) { const { setAttributes } = this.props; setAttributes( { order: value } ); @@ -141,6 +152,7 @@ class LatestPostsEdit extends Component { excerptLength, displayPostDate, displayFeaturedImage, + featuredImageAlign, addLinkToFeaturedImage, order, orderBy, @@ -193,6 +205,11 @@ class LatestPostsEdit extends Component { /> { displayFeaturedImage && ( <> + Date: Fri, 11 Mar 2022 18:21:18 +0000 Subject: [PATCH 04/18] Style BlockAlignmentControl within BottomSheet Prior to this commit, the BlockAlignmentControl component was only set up to display as a toolbar button on native. With this commit, a "isBottomSheetControl" prop is introduced to enable the component to be styled in a way that's appropriate within BottomSheets. --- .../components/block-alignment-control/ui.js | 5 +++++ .../src/latest-posts/edit.native.js | 1 + .../src/dropdown-menu/index.native.js | 21 +++++++++++++++++-- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js index 1c5a8b3b587160..86edae46421ff7 100644 --- a/packages/block-editor/src/components/block-alignment-control/ui.js +++ b/packages/block-editor/src/components/block-alignment-control/ui.js @@ -67,6 +67,7 @@ function BlockAlignmentUI( { controls, isToolbar, isCollapsed = true, + isBottomSheetControl = false, } ) { const enabledControls = useAvailableAlignments( controls ); const hasEnabledControls = !! enabledControls.length; @@ -92,6 +93,7 @@ function BlockAlignmentUI( { label: __( 'Align' ), toggleProps: { describedBy: __( 'Change alignment' ) }, }; + const extraProps = isToolbar || Platform.isNative ? { @@ -108,6 +110,9 @@ function BlockAlignmentUI( { }; } ), + ...( Platform.isNative && { + isBottomSheetControl, + } ), } : { children: ( { onClose } ) => { diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index 6634667702258b..d96a3bd7015c27 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -209,6 +209,7 @@ class LatestPostsEdit extends Component { value={ featuredImageAlign } onChange={ this.onSetFeaturedImageAlign } controls={ [ 'left', 'center', 'right' ] } + isBottomSheetControl={ true } /> (