[Mobile] Cover: Add Media Button when only colour is selected #23878

antonis · 2020-07-10T16:00:22Z

Fixes #23877 (parent wordpress-mobile/gutenberg-mobile#2275)

Related PRs:

This PR depends on #23870

gutenberg-mobile Cover: Add Background Media button when only background colour is set wordpress-mobile/gutenberg-mobile#2513
Depends on Create cover block with custom colour [Mobile] Create cover block with custom colour (without an image) #23870
Create cover block with only colour from a default palette [Mobile] Create cover block with only colour (from a default palette) without an image #23833
Clear media button in block settings [Mobile] Cover: Adds Clear media button in block settings #23794

Description

An image icon button has been added at the top-left of the component. When pressed the add media options are presented.

How has this been tested?

Add a cover block
Press on a colour from the palette
Verify that a new cover block with only colour is created
Verify that the new icon is presented at the top-left of the component
Tap on the icon and verify that the add media options are presented
Add a media and verify that it is applied in the background

Screenshots

Screenshot	Functionality

Types of changes

Enhancement

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

…th_custom_color

…dImageButton

…th_custom_color

…dImageButton

…th_custom_color # Conflicts: # packages/block-library/src/cover/style.native.scss # packages/components/src/color-palette/index.native.js

antonis · 2020-07-23T07:16:20Z

Thank you for the feedback @iamthomasbishop :)

I updated the button design and changed the text label.
Since the MediaUpload bottom sheet component already had a text for this I kept it "Choose image or video"

"Light background	Dark background

iamthomasbishop · 2020-07-23T18:09:43Z

I updated the button design and changed the text label.
Since the MediaUpload bottom sheet component already had a text for this I kept it "Choose image or video"

Perfect. Thank you @antonis !

This reverts commit 054a6b5.

This reverts commit df25f6b.

…dImageButton

mkevins

This is looking pretty good. I tested on Android, and the logic is working as expected. There is one issue with the button size / container size that makes tapping difficult. It seems that the tappable area is small, and offset from the button itself:

I inspected the layout and it seems that the views are rendered outside their container (so they don't capture the event). E.g. the red rectangle is the outer view and the blue one is the child view:

It seems that aside from being offset, the size of the touchable is that of the inner view (inner view, e.g. icon, is the red rectangle):

I tried locally changing the order (so TouchableWithoutFeedback wraps View), but the problem still persisted, so perhaps a change is needed elsewhere, either instead of or in addition to that.

mkevins · 2020-07-27T04:40:23Z

packages/block-library/src/cover/edit.native.js

+			{ renderBackground( getMediaOptions ) }
+			{ isParentSelected &&
+				hasOnlyColorBackground &&
+				addMediaButton( openMediaOptionsRef.current ) }


Do we need to pass this here? Maybe we can use it directly in addMediaButton. Wdyt?

Hello @mkevins 👋
thank you for your feedback, I really appreciate it :)
You are right, the parameter can be accessed directly. I updated the PR changing this and fixing the tappable area.

mkevins

Looks good and it's working correctly now. Nice work @antonis ! 🎉

I left one minor suggestion (as a patch, since the GitHub diff context couldn't capture it as a "one-click-suggestion"), not a blocker though.

packages/block-library/src/cover/edit.native.js

Antonis Lilis added 4 commits July 9, 2020 18:23

Create cover block with only colour (from a default palette)

c608052

Added custom colour swatch

508f015

Custom Color picker action

96b1582

Hide the block settings button

8c13787

antonis mentioned this pull request Jul 10, 2020

Cover: Allow creating the block with only color/gradient backgrounds (without an image) wordpress-mobile/gutenberg-mobile#2275

Closed

Add image button

6783f1b

antonis force-pushed the rnmobile/CoverAddImageButton branch from fa81921 to 6783f1b Compare July 13, 2020 09:49

antonis marked this pull request as ready for review July 13, 2020 09:50

This was referenced Jul 13, 2020

[Mobile] Cover: Adds Clear media button in block settings #23794

Merged

[Mobile] Create cover block with only colour (from a default palette) without an image #23833

Merged

[Mobile] Create cover block with custom colour (without an image) #23870

Merged

Antonis Lilis added 3 commits July 13, 2020 14:36

Use noop instead of empty arrow function

6e83663

Use default settings colors

3919a7d

WIP: Changes Based on design feedback

a2eee4b

antonis added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Jul 14, 2020

antonis self-assigned this Jul 14, 2020

antonis linked an issue Jul 14, 2020 that may be closed by this pull request

[Mobile] Cover: Add Media Button when only colour is selected #23877

Closed

antonis added [Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Enhancement A suggestion for improvement. labels Jul 14, 2020

Antonis Lilis added 11 commits July 14, 2020 10:52

Merge branch 'master' into rnmobile/23831_Cover_Only_color

83668c7

Merge branch 'master' into rnmobile/23831_Cover_Only_color

c71346a

Merge branch 'rnmobile/23831_Cover_Only_color' into rnmobile/Cover_wi…

a41dc37

…th_custom_color

Merge branch 'rnmobile/Cover_with_custom_color' into rnmobile/CoverAd…

4ea83e7

…dImageButton

Show palette with both hardcoded and theme colors

0cbe0c1

Customise media placeholder styles only for the cover component

a0cd93b

Merge branch 'rnmobile/23831_Cover_Only_color' into rnmobile/Cover_wi…

30d5ccb

…th_custom_color

Merge branch 'rnmobile/Cover_with_custom_color' into rnmobile/CoverAd…

494356a

…dImageButton

Pass only modified media-placeholder styles

7aec919

Pass only modified color-palette styles

a152a4a

Merge branch 'rnmobile/23831_Cover_Only_color' into rnmobile/Cover_wi…

53d5435

…th_custom_color # Conflicts: # packages/block-library/src/cover/style.native.scss # packages/components/src/color-palette/index.native.js

Antonis Lilis added 3 commits July 23, 2020 13:19

PR review fixes

537211c

Extra fixes to avoid inconsistent states

df25f6b

Lint fix and comment

054a6b5

Antonis Lilis added 8 commits July 24, 2020 09:59

Revert "Lint fix and comment"

852f9a4

This reverts commit 054a6b5.

Revert "Extra fixes to avoid inconsistent states"

f529dae

This reverts commit df25f6b.

Review changes

a623b1b

Android hardware button handling

b4ab716

Merge branch 'master' into rnmobile/Cover_with_custom_color

979e8d4

Lint fix

a416741

Merge branch 'rnmobile/Cover_with_custom_color' into rnmobile/CoverAd…

c307b4c

…dImageButton

Syntactical fix

3b43cc7

antonis marked this pull request as draft July 24, 2020 10:12

Antonis Lilis added 2 commits July 24, 2020 14:35

Merge branch 'master' into rnmobile/CoverAddImageButton

8d623a1

Merge fixes

1c53bdd

antonis force-pushed the rnmobile/CoverAddImageButton branch from 7e52411 to 1c53bdd Compare July 24, 2020 14:12

antonis requested review from geriux and mkevins July 24, 2020 14:18

antonis marked this pull request as ready for review July 24, 2020 15:01

mkevins reviewed Jul 27, 2020

View reviewed changes

antonis requested a review from chipsnyder July 27, 2020 06:10

Antonis Lilis added 2 commits July 27, 2020 09:29

Merge branch 'master' into rnmobile/CoverAddImageButton

25971f0

Review fixes

b4fa6a4

antonis mentioned this pull request Jul 27, 2020

Cover: Add Background Media button when only background colour is set wordpress-mobile/gutenberg-mobile#2513

Merged

2 tasks

antonis requested a review from mkevins July 27, 2020 15:02

mkevins approved these changes Jul 28, 2020

View reviewed changes

packages/block-library/src/cover/edit.native.js Outdated Show resolved Hide resolved

layout improvement

00f6f1f

antonis merged commit a483555 into WordPress:master Jul 28, 2020

github-actions bot added this to the Gutenberg 8.7 milestone Jul 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Mobile] Cover: Add Media Button when only colour is selected #23878

[Mobile] Cover: Add Media Button when only colour is selected #23878

antonis commented Jul 10, 2020 •

edited

Loading

antonis commented Jul 23, 2020

iamthomasbishop commented Jul 23, 2020

mkevins left a comment

mkevins Jul 27, 2020

antonis Jul 27, 2020

mkevins left a comment

[Mobile] Cover: Add Media Button when only colour is selected #23878

[Mobile] Cover: Add Media Button when only colour is selected #23878

Conversation

antonis commented Jul 10, 2020 • edited Loading

Related PRs:

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

antonis commented Jul 23, 2020

iamthomasbishop commented Jul 23, 2020

mkevins left a comment

Choose a reason for hiding this comment

mkevins Jul 27, 2020

Choose a reason for hiding this comment

antonis Jul 27, 2020

Choose a reason for hiding this comment

mkevins left a comment

Choose a reason for hiding this comment

antonis commented Jul 10, 2020 •

edited

Loading