From c5b3a9d100676adbc89ef726d43b29c923e27b35 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 28 Jun 2021 23:52:39 +0100 Subject: [PATCH 01/13] Ignore edits to featured image in undo history "editEntityRecord" includes an "undoIgnore: true" parameter that makes it possible to ignore an edit in the undo history. Reference: https://developer.wordpress.org/block-editor/reference-guides/data/data-core/#editEntityRecord With this commit, that parameter is set to true so that a new undo level *isn't* created after the featured image is updated via the app. --- packages/edit-post/src/editor.native.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/editor.native.js b/packages/edit-post/src/editor.native.js index cc79e0fb006c3..ea9dbf9eeaab0 100644 --- a/packages/edit-post/src/editor.native.js +++ b/packages/edit-post/src/editor.native.js @@ -93,9 +93,15 @@ class Editor extends Component { this.subscriptionParentFeaturedImageIdNativeUpdated = subscribeFeaturedImageIdNativeUpdated( ( payload ) => { - editEntityRecord( 'postType', postType, postId, { - featured_media: payload.featuredImageId, - } ); + editEntityRecord( + 'postType', + postType, + postId, + { featured_media: payload.featuredImageId }, + { + undoIgnore: true, + } + ); } ); } From 3611fa9e3e4f9ab385bba295f63d28c1e2c86b46 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 30 Jul 2021 17:09:26 +0100 Subject: [PATCH 02/13] Add "featured image" section heading By adding the settings for changing a featured image under their own section heading, it's being clearly separated from the other sections. This will help with the overall alignment/rhythm of the settings panel, which is important given we're adding an additional note. --- packages/block-library/src/image/edit.native.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 5ea885333ad69..ebe3341951602 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -474,13 +474,7 @@ export class ImageEdit extends Component { /> ); - return ( - - { isFeaturedImage - ? removeFeaturedButton() - : setFeaturedButton() } - - ); + return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton(); } render() { @@ -564,9 +558,11 @@ export class ImageEdit extends Component { { this.getLinkSettings( true ) } - { androidOnly && - canImageBeFeatured && - this.getSetFeaturedButton( isFeaturedImage ) } + + { androidOnly && + canImageBeFeatured && + this.getSetFeaturedButton( isFeaturedImage ) } + ); From 958cbad6420a88ca076b84eed24299e54bab9e1e Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 30 Jul 2021 17:42:40 +0100 Subject: [PATCH 03/13] Add FooterMessageControl to settings We're adding a note to the image block's setting to let users know that they won't be able to revert changes via the undo/redo button. --- packages/block-library/src/image/edit.native.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index ebe3341951602..bb7a58de1055a 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -26,6 +26,7 @@ import { BottomSheet, BottomSheetTextControl, BottomSheetSelectControl, + FooterMessageControl, FooterMessageLink, Badge, } from '@wordpress/components'; @@ -563,6 +564,13 @@ export class ImageEdit extends Component { canImageBeFeatured && this.getSetFeaturedButton( isFeaturedImage ) } + + + ); From f5740397251d62b6e3bd9c001fd2cb26f3eb57b5 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 30 Jul 2021 17:44:20 +0100 Subject: [PATCH 04/13] Tweak featured button styles With this commit, we're aligning the featured button to the left and changing its border to display at the bottom. This follows design feedback here: https://github.com/WordPress/gutenberg/pull/33057#issuecomment-889507618 --- packages/block-library/src/image/styles.native.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 66f4a02cb6621..7de41e5a7e94f 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -32,15 +32,15 @@ } .setFeaturedButton { - border-top-width: $border-width; - border-top-color: $light-gray-400; - padding: $grid-unit-20; - text-align: center; + border-bottom-width: $border-width; + border-bottom-color: $light-gray-400; + padding-bottom: $grid-unit-20; + text-align: left; color: $blue-50; } .setFeaturedButtonDark { - border-top-color: $gray-70; + border-bottom-color: $gray-70; color: $blue-30; } From 27f2623b0344d51f0a25d39f1422d6e905cbf114 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 2 Aug 2021 10:17:41 +0100 Subject: [PATCH 05/13] Tweaks to footer text This commit updates the footer text following feedback from editorial. --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index bb7a58de1055a..15f8ab5effd81 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -567,7 +567,7 @@ export class ImageEdit extends Component { From 89f15ac3194348db92a207ecacae507f569d5252 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 2 Aug 2021 10:24:45 +0100 Subject: [PATCH 06/13] Remove bottom border from button --- packages/block-library/src/image/styles.native.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 7de41e5a7e94f..96e2a3a1a1da8 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -32,15 +32,12 @@ } .setFeaturedButton { - border-bottom-width: $border-width; - border-bottom-color: $light-gray-400; padding-bottom: $grid-unit-20; text-align: left; color: $blue-50; } .setFeaturedButtonDark { - border-bottom-color: $gray-70; color: $blue-30; } From 6ac5e797187a5aaaf07a938dca8d01292f32c319 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 2 Aug 2021 14:25:08 +0100 Subject: [PATCH 07/13] Remove bottom padding from button --- packages/block-library/src/image/styles.native.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 96e2a3a1a1da8..c936811e1601d 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -32,7 +32,6 @@ } .setFeaturedButton { - padding-bottom: $grid-unit-20; text-align: left; color: $blue-50; } From 604db688e091f6eae0715385f901ddbe91ac713d Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 6 Aug 2021 10:50:17 +0100 Subject: [PATCH 08/13] Align button and footer text to top With this commit, the content in the "Set as Featured" button and the footer message is aligned to the top of their containers. This will prevent flexbox from automatically adding spacing to the top of their containers, which goes against the design we want. --- packages/block-library/src/image/edit.native.js | 3 +++ packages/block-library/src/image/styles.native.scss | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 15f8ab5effd81..deba0b6ecdb7b 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -461,6 +461,7 @@ export class ImageEdit extends Component { setFeaturedButtonStyle, styles.removeFeaturedButton, ] } + cellContainerStyle={ styles.setFeaturedCellContainer } onPress={ () => this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET ) } @@ -471,6 +472,7 @@ export class ImageEdit extends Component { this.onSetFeatured( attributes.id ) } /> ); @@ -569,6 +571,7 @@ export class ImageEdit extends Component { label={ __( 'Changes to featured image will not be affected by the undo/redo buttons.' ) } + cellContainerStyle={ styles.setFeaturedCellContainer } /> diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index c936811e1601d..b642d6c93b71c 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -31,6 +31,10 @@ padding-bottom: $grid-unit; } +.setFeaturedCellContainer { + align-items: flex-start; +} + .setFeaturedButton { text-align: left; color: $blue-50; From 795f309b6ed315105fca159ef1df5503ae336556 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 6 Aug 2021 10:55:02 +0100 Subject: [PATCH 09/13] Add title style to "Featured Image" panel As we need to tweak the spacing around the panel's title, I've added a new "titleStyle" prop to the PanelBody component. That prop is then used to remove the bottom spacing for the "Featured Image" panel's title. The prop can now be re-used by anyone else who needs to tweak the title in a PanelBody in the future. --- packages/block-library/src/image/edit.native.js | 5 ++++- packages/block-library/src/image/styles.native.scss | 4 ++++ packages/components/src/panel/body.native.js | 6 ++++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index deba0b6ecdb7b..d2992e60b2b8a 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -561,7 +561,10 @@ export class ImageEdit extends Component { { this.getLinkSettings( true ) } - + { androidOnly && canImageBeFeatured && this.getSetFeaturedButton( isFeaturedImage ) } diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index b642d6c93b71c..2280214b80408 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -31,6 +31,10 @@ padding-bottom: $grid-unit; } +.featuredImagePanelTitle { + padding-bottom: 0; +} + .setFeaturedCellContainer { align-items: flex-start; } diff --git a/packages/components/src/panel/body.native.js b/packages/components/src/panel/body.native.js index 60d75ef7b16de..a2c055112fe43 100644 --- a/packages/components/src/panel/body.native.js +++ b/packages/components/src/panel/body.native.js @@ -9,11 +9,13 @@ import { Text, View } from 'react-native'; import styles from './body.scss'; import BottomSeparatorCover from './bottom-separator-cover'; -export function PanelBody( { children, title, style = {} } ) { +export function PanelBody( { children, title, style, titleStyle = {} } ) { return ( { title && ( - { title } + + { title } + ) } { children } From fa0d455f2dd86aacd515b28342a0c0f253952adf Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 6 Aug 2021 10:58:28 +0100 Subject: [PATCH 10/13] Add top/bottom padding to button Following the previous changes, this commit increases the height and "tappable area" of the "Set/Remove as Featured Image" button by adding both top and bottom padding. --- packages/block-library/src/image/styles.native.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 2280214b80408..d85a592778294 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -42,6 +42,7 @@ .setFeaturedButton { text-align: left; color: $blue-50; + padding: $grid-unit-15 0; } .setFeaturedButtonDark { From 658d0054501f589402b674f006caec38aadc893c Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 6 Aug 2021 16:29:53 +0100 Subject: [PATCH 11/13] Update function name Due to an error when merging, the code was referencing an old function name, "getSetFeaturedButton". It should instead reference the name name, "getFeaturedButtonPanel". --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index a3f32d59b2ee8..4a34b91492e83 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -566,7 +566,7 @@ export class ImageEdit extends Component { titleStyle={ styles.featuredImagePanelTitle } > { canImageBeFeatured && - this.getSetFeaturedButton( isFeaturedImage ) } + this.getFeaturedButtonPanel( isFeaturedImage ) } Date: Fri, 6 Aug 2021 16:36:59 +0100 Subject: [PATCH 12/13] Update selector name For consistency with other selectors, this commit updates the name of "setFeaturedCellContainer" to "setFeaturedButtonCellContainer". --- packages/block-library/src/image/edit.native.js | 8 +++++--- packages/block-library/src/image/styles.native.scss | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 4a34b91492e83..1f05d34cc1342 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -461,7 +461,7 @@ export class ImageEdit extends Component { setFeaturedButtonStyle, styles.removeFeaturedButton, ] } - cellContainerStyle={ styles.setFeaturedCellContainer } + cellContainerStyle={ styles.setFeaturedButtonCellContainer } onPress={ () => this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET ) } @@ -472,7 +472,7 @@ export class ImageEdit extends Component { this.onSetFeatured( attributes.id ) } /> ); @@ -573,7 +573,9 @@ export class ImageEdit extends Component { label={ __( 'Changes to featured image will not be affected by the undo/redo buttons.' ) } - cellContainerStyle={ styles.setFeaturedCellContainer } + cellContainerStyle={ + styles.setFeaturedButtonCellContainer + } /> diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index d85a592778294..4c2ad06c4da7f 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -35,7 +35,7 @@ padding-bottom: 0; } -.setFeaturedCellContainer { +.setFeaturedButtonCellContainer { align-items: flex-start; } From 56625086337fe41cd4ad18b4240f56f37c2cf3d1 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 9 Aug 2021 10:53:43 +0100 Subject: [PATCH 13/13] Group FooterMessageControl into "Featured" panel The placement of the component is moved within the main "Featured Image" panel, as this is more semantically correct than having the component within its own, separate panel. --- packages/block-library/src/image/edit.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1f05d34cc1342..83d561d8aad9a 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -462,6 +462,7 @@ export class ImageEdit extends Component { styles.removeFeaturedButton, ] } cellContainerStyle={ styles.setFeaturedButtonCellContainer } + separatorType={ 'none' } onPress={ () => this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET ) } @@ -473,6 +474,7 @@ export class ImageEdit extends Component { label={ __( 'Set as Featured Image ' ) } labelStyle={ setFeaturedButtonStyle } cellContainerStyle={ styles.setFeaturedButtonCellContainer } + separatorType={ 'none' } onPress={ () => this.onSetFeatured( attributes.id ) } /> ); @@ -567,8 +569,6 @@ export class ImageEdit extends Component { > { canImageBeFeatured && this.getFeaturedButtonPanel( isFeaturedImage ) } - -