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.

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

WIP: Resizable HTML block. #14730

Closed
wants to merge 134 commits into from
Closed

WIP: Resizable HTML block. #14730

wants to merge 134 commits into from

Conversation

nicolad
Copy link
Member

@nicolad nicolad commented Mar 31, 2019

Description

Fixes: #8245

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.

Copy link
Member

@ellatrix ellatrix left a comment

Choose a reason for hiding this comment

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

If we make the text area not auto resize by default, then we have this for free from the browser? Perhaps PlainText should accept a rows prop to be passed down to textarea. The presence of this prop would also disable autoresizing.

@ellatrix ellatrix added [Block] HTML Affects the the HTML Block [Type] Enhancement A suggestion for improvement. labels Apr 2, 2019
@karmatosed karmatosed added the Needs Design Feedback Needs general design feedback. label May 28, 2019
@sarahmonster
Copy link
Member

@nicolad It looks like this PR could use a design review. Would it be possible for you to rebase so we can test it out

@nicolad
Copy link
Member Author

nicolad commented May 30, 2019

@nicolad It looks like this PR could use a design review. Would it be possible for you to rebase so we can test it out

Hi @sarahmonster, I've synced this branch with master, thx for letting me know.
I will loop back on this when I will be less busy with a11y PRs.

@mapk
Copy link
Contributor

mapk commented Jun 15, 2019

I've just tested this and didn't notice any resizing abilities. Am I missing something here?

html

Maybe we can make this block react similarly to the recent Shortcode block changes? The Shortcode block grows as text is typed to a limited height. Once the height reaches 250px it stops growing and just adds a scroll ability. Would that work better?

*Sorry, I clicked the wrong button there. I didn't mean to close this PR.

@mapk mapk closed this Jun 15, 2019
@mapk mapk reopened this Jun 15, 2019
mkevins and others added 9 commits June 15, 2019 17:21
…ctor (#15701)

* Rename variables for clarity in inline paste

* Update selection via onSelectionUpdate after inline paste

* Remove unused forceSelectionUpdate function
…15878)

* Focus RichText on mount if block is selected and says so

Some blocks have multiple RichText or a RichText among other children.
Example: Quote blocks has 2 RichTexts and Image block has a RichText for
the caption. We want to control when and which of those RichTexts will
request focus. On the web side, the DOM is used to search for a inputbox
to focus but on RN, we don't have a DOM to search.

Instead, this commit makes the assumption that a RichText always request
focus if its parent has passed `true` in `isSelected` and only if the
parent hasn't inhibited that behavior by using the `noFocusOnMount`
prop.

* Simplify the passing of noFocusOnMount

* Fix grammar in comment

* Rename prop to mark it as unstable
* Fix menu item colors

Fixes #15387

This PR fixes an inconsistency in menu item colors. There were some redundant CSS that had not been cleaned up properly with the move to the color mixins.

Additionally it replaces the use of opacity for the lighter text in the menus, and uses the color variables instead, as those colors do not need to work on differently colored backgrounds, just white.

* Address feedback.
* Move misplaced editor styles to editor.css

* Add comment & rename files.
aduth and others added 12 commits June 15, 2019 17:21
…gn (#16035)

* Block library: Refactor Heading block to use class names for text align

* Fix Heading icon in the collapsed mode

* Add missing label for the level dropdown menu

* Block library: Revert attribute name change for text align

* Remove code which moves text alignment control to the block toolbar
* [Mobile] Disable Video block on Android for v1.7.0 release (#16149)

* Disable Video block on Android for v1.7.0 release

* Add import statement to check platform

* [RNMobile] Narrow down blur on unmount to replaceable only (#16151)

* Remove focus from RichText when unmounting

In #15999 this behavior was changed to prevent the keyboard from disappearing
when you press Enter to create a new paragraph.

This worked in that case, but had the side effect of TextInputState still
thinking a dead view had focus, and causing a crash in some scenarios.

* Only blur a RichText in replaceable block

That RichText won't have the chance to blur earlier so, we need to do it
on unmount. But, non replaceable blocks wont need to blur their RichText
on unmount because that will happen normally in componentDidUpdate().

* Rename to an unstable, very goal-named name

* Compute shouldBlurOnUnmount inside RichText

* Fix no-duplicate-imports lint issue

* Fix comma-dangle lint error

* Remove trailing space from comment
…6089)

* Update video player to open the URL by browser

* Render play button even if video is not ready to play yet

* Add/update alert messages

* Revert back warn to error

* Do not show play button until video player has a height

* Resolve merge conflicts that re-introduced a removed file
* Fixes #14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.

Applied max height to html block.
@nicolad nicolad closed this Jun 15, 2019
@nicolad nicolad deleted the update/resizable-html-block branch June 15, 2019 14:42
@nicolad nicolad added the [Status] Not Implemented Issue/PR we will (likely) not implement. label Aug 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] HTML Affects the the HTML Block Needs Design Feedback Needs general design feedback. [Status] Not Implemented Issue/PR we will (likely) not implement. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make custom HTML blocks resizable