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] Prevent "Undo Level" after Setting Featured Image via Image Block #33057

Merged
merged 19 commits into from
Aug 9, 2021
Merged

[RNMobile] Prevent "Undo Level" after Setting Featured Image via Image Block #33057

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c5b3a9d
Ignore edits to featured image in undo history
Jun 28, 2021
34a092c
Merge branch 'trunk' into fix/featured-button-undo-redo-functionality
Jul 8, 2021
a75aa91
Merge branch 'trunk' into fix/featured-button-undo-redo-functionality
Jul 13, 2021
8c7f6d9
Merge branch 'trunk' into fix/featured-button-undo-redo-functionality
Jul 26, 2021
3611fa9
Add "featured image" section heading
Jul 30, 2021
958cbad
Add FooterMessageControl to settings
Jul 30, 2021
f574039
Tweak featured button styles
Jul 30, 2021
27f2623
Tweaks to footer text
Aug 2, 2021
89f15ac
Remove bottom border from button
Aug 2, 2021
47fb632
Merge branch 'trunk' into fix/featured-button-undo-redo-functionality
Aug 2, 2021
6ac5e79
Remove bottom padding from button
Aug 2, 2021
604db68
Align button and footer text to top
Aug 6, 2021
795f309
Add title style to "Featured Image" panel
Aug 6, 2021
fa0d455
Add top/bottom padding to button
Aug 6, 2021
a14cbe6
Merge branch 'trunk' into fix/featured-button-undo-redo-functionality
SiobhyB Aug 6, 2021
658d005
Update function name
Aug 6, 2021
2856d5a
Update selector name
Aug 6, 2021
823df2b
Merge branch 'trunk' into fix/featured-button-undo-redo-functionality
Aug 9, 2021
5662508
Group FooterMessageControl into "Featured" panel
Aug 9, 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
30 changes: 21 additions & 9 deletions packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
BottomSheet,
BottomSheetTextControl,
BottomSheetSelectControl,
FooterMessageControl,
FooterMessageLink,
Badge,
} from '@wordpress/components';
Expand Down Expand Up @@ -460,6 +461,7 @@ export class ImageEdit extends Component {
setFeaturedButtonStyle,
styles.removeFeaturedButton,
] }
cellContainerStyle={ styles.setFeaturedButtonCellContainer }
onPress={ () =>
this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET )
}
Expand All @@ -470,17 +472,12 @@ export class ImageEdit extends Component {
<BottomSheet.Cell
label={ __( 'Set as Featured Image ' ) }
labelStyle={ setFeaturedButtonStyle }
cellContainerStyle={ styles.setFeaturedButtonCellContainer }
onPress={ () => this.onSetFeatured( attributes.id ) }
/>
);

return (
<PanelBody>
{ isFeaturedImage
? removeFeaturedButton()
: setFeaturedButton() }
</PanelBody>
);
return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton();
}

render() {
Expand Down Expand Up @@ -564,8 +561,23 @@ export class ImageEdit extends Component {
<PanelBody title={ __( 'Link Settings' ) }>
{ this.getLinkSettings( true ) }
</PanelBody>
{ canImageBeFeatured &&
this.getFeaturedButtonPanel( isFeaturedImage ) }
<PanelBody
title={ __( 'Featured Image' ) }
titleStyle={ styles.featuredImagePanelTitle }
>
{ canImageBeFeatured &&
this.getFeaturedButtonPanel( isFeaturedImage ) }
</PanelBody>
<PanelBody>
<FooterMessageControl
label={ __(
'Changes to featured image will not be affected by the undo/redo buttons.'
) }
cellContainerStyle={
styles.setFeaturedButtonCellContainer
}
/>
</PanelBody>
Copy link
Contributor

Choose a reason for hiding this comment

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

I was wondering if we really need to have the footer message under a new panel body, if the purpose is to prevent rendering a separator, you could disable it by passing the prop separatorType="none" to the BottomSheet.Cell components defined in the getFeaturedButtonPanel function. This way you could render the FooterMessageControl component in the same panel body as the featured button.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You're right that there's no meaningful reason for the footer message to exist in its own panel body. I've gone ahead to move it within the featured panel in 5662508, and have removed the separator as per your suggestion. :)

</InspectorControls>
);

Expand Down
15 changes: 10 additions & 5 deletions packages/block-library/src/image/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,21 @@
padding-bottom: $grid-unit;
}

.featuredImagePanelTitle {
padding-bottom: 0;
}

.setFeaturedButtonCellContainer {
align-items: flex-start;
}

.setFeaturedButton {
border-top-width: $border-width;
border-top-color: $light-gray-400;
padding: $grid-unit-20;
text-align: center;
text-align: left;
color: $blue-50;
padding: $grid-unit-15 0;
}

.setFeaturedButtonDark {
border-top-color: $gray-70;
color: $blue-30;
}

Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/panel/body.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<View style={ [ styles.panelContainer, style ] }>
{ title && (
<Text style={ styles.sectionHeaderText }>{ title }</Text>
<Text style={ [ styles.sectionHeaderText, titleStyle ] }>
{ title }
</Text>
) }
{ children }
<BottomSeparatorCover />
Expand Down
12 changes: 9 additions & 3 deletions packages/edit-post/src/editor.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
);
}
);
}
Expand Down