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

Try: Improve scrolling of navigation menu on small screens #12644

Merged
merged 4 commits into from Dec 24, 2018

Conversation

@jasmussen
Copy link
Contributor

jasmussen commented Dec 6, 2018

We scroll the editing canvas, the inspector sidebar, and the block library independently at desktop breakpoints. We do this so that the sidebar inspector can stay in view even if you have scrolled far down the editing canvas, and to avoid scroll bleed.

However because the navigation sidebar (on the left) has flyout menus on the desktop breakpoints, we can't yet scroll this one separately. If a user has a bunch of plugins installed that add menu items, or a small screen, these manu items might go beyond the visible height of the viewport. To make these accessible regardless, when this happens the body element scrolls to let you reach them.

In this situation, there is currently an issue where the editing canvas might scroll out of view when you scroll to the bottom of the sidebar.

This PR improves that situation by making the editing canvas position: fixed;, same as the sidebar is. This ensures that the entire editor scrolls with you down the page, as you scroll the body content.

This needs a good testing. position: fixed; does not inherit from a relative parent, which means we have to specifiy a matrix of left margins to accommodate for the different configurations of the navigation menu: auto-collapsed, manually collapsed, or the default width. To test, please verify that everything works as intended. Please test:

  • All breakpoints beyond the 600px small breakpoint.
  • Fullscreen and not fullscreen modes.
  • With the navigation menu auto collapsing, and explicitly collapsed.
  • With the inspector sidebar present or hidden.
  • With metaboxes present and not present.

Before:

master

After:

this branch

@jasmussen jasmussen self-assigned this Dec 6, 2018

@jasmussen jasmussen requested review from mtias and WordPress/gutenberg-core Dec 6, 2018

@chrisvanpatten

This comment has been minimized.

Copy link
Contributor

chrisvanpatten commented Dec 6, 2018

Oh @jasmussen you're my hero — this has bugged me for a while but I have been too busy to wade in. Planning to give this a test in the next day or so!

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Dec 8, 2018

Just a note to make sure we test with meta boxes too (and IE) :)

@jasmussen jasmussen added this to the 4.8 milestone Dec 10, 2018

@jasmussen jasmussen force-pushed the try/improve-left-menu-scrolling branch from 93631d3 to e2d1f71 Dec 10, 2018

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 10, 2018

Rebased, and did further testing. Edge and IE look fine. Edge:

edge

IE:

ie11

Note, IE has some weird overlaying autohiding scrollbars which we can do nothing about, but this is unchanged in this PR and simply how IE11 works.

Discovered a small metabox issue I'm investigating, so this is more of a progress report. Nope, there wasn't an issue. I was testing without the Gutenberg plugin enabled ¯_(ツ)_/¯

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 10, 2018

There's an e2e test that keeps failing, but I don't understand why as it seems entirely unrelated:

 FAIL  test/e2e/specs/writing-flow.test.js (14.037s)
  ● adding blocks › Should navigate inner blocks with arrow keys

    expect(received).toBe(expected) // Object.is equality

    Expected: "First column paragraph"
    Received: "Second column paragraph"

      50 |              await page.keyboard.press( 'ArrowUp' );
      51 |              activeElementText = await page.evaluate( () => document.activeElement.textContent );
    > 52 |              expect( activeElementText ).toBe( 'First column paragraph' );
@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 10, 2018

Further testing with metaboxes present. Chrome:

chrome

Firefox:

firefox

Safari:

safari

Edge:

edge

IE11:

ie11

☝️Bummer — see the metaboxes overlapping. That rings a bell. But as it turns out, this is also an issue in master:

ie11 master

Turns out IE11 is so bad it renders as if the browser is in quirks mode. I will look for an IE11 hack.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 10, 2018

Okay, found a rather delightful and simple fix (478e9bc) that makes the flexing work in IE11. Here's a swath of new testing. IE11:

ie11

Edge:

edge

Chrome:

chrome

Firefox:

firefox

Safari:

safari

The iphone simulator for good measure:

iphone

I feel pretty good about this one. But would still appreciate your sanity checks, but also advice on why the checks are failing.

@jasmussen jasmussen requested review from WordPress/gutenberg-core and removed request for WordPress/gutenberg-core Dec 14, 2018

@tofumatt
Copy link
Member

tofumatt left a comment

This looks complicated but aside from a few tweaks the SCSS looks fine to me. Thanks for all the comments.

margin-left: $admin-sidebar-width-collapsed;
}

// Undo this for fullscreen mode.

This comment has been minimized.

@tofumatt

tofumatt Dec 14, 2018

Member

What is being undone here? Could you clarify what "this" is? 😄

bottom: 0;
left: 0;
right: 0;
top: $header-height + $admin-bar-height; // Because this is scoped to break-medium and larger, the admin-bar is always this height.

This comment has been minimized.

@tofumatt

tofumatt Dec 14, 2018

Member

These comments after each attribute get really long and make for quite long line-lengths. If they could be moved around that'd be grand, but having them relate to the attributes is handy too, so no worries if you wanna leave 'em as-is.

@chrisvanpatten
Copy link
Contributor

chrisvanpatten left a comment

Looks good from a UX perspective for me. The test fails might be fixed by a rebase, they seem unrelated. I can't get e2e tests working locally so I can't test, unfortunately.

@tofumatt

This comment has been minimized.

Copy link
Member

tofumatt commented Dec 14, 2018

@chrisvanpatten chrisvanpatten force-pushed the try/improve-left-menu-scrolling branch from 300c502 to f6cb5c0 Dec 14, 2018

@chrisvanpatten

This comment has been minimized.

Copy link
Contributor

chrisvanpatten commented Dec 14, 2018

I rebased and pushed but Travis is still failing. However the failure was that phpcs couldn't be found, so I'm inclined to think it's an issue in Travis. Restarting the tests and crossing my fingers 🤞

@chrisvanpatten chrisvanpatten force-pushed the try/improve-left-menu-scrolling branch from f6cb5c0 to 68b945b Dec 14, 2018

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Dec 20, 2018

Another rebase here should fix the tests.

jasmussen added some commits Dec 6, 2018

Try: Improve scrolling of navigation menu on small screens
We scroll the editing canvas, the inspector sidebar, and the block library independently at desktop breakpoints. We do this so that the sidebar inspector can stay in view even if you have scrolled far down the editing canvas, and to avoid scroll bleed.

However because the navigation sidebar (on the left) has flyout menus on the desktop breakpoints, we can't yet scroll this one separately. If a user has a bunch of plugins installed that add menu items, or a small screen, these manu items might go beyond the visible height of the viewport. To make these accessible regardless, when this happens the `body` element scrolls to let you reach them.

In this situation, there is currently an issue where the editing canvas might scroll out of view when you scroll to the bottom of the sidebar.

This PR improves that situation by making the editing canvas `position: fixed;`, same as the sidebar is. This ensures that the entire editor scrolls with you down the page, as you scroll the `body` content.

This needs a good testing. `position: fixed;` does not inherit from a relative parent, which means we have to specifiy a matrix of left margins to accommodate for the different configurations of the navigation menu: auto-collapsed, manually collapsed, or the default width. To test, please verify that everything works as intended. Please test:

- All breakpoints beyond the 600px small breakpoint.
- Fullscreen and not fullscreen modes.
- With the navigation menu auto collapsing, and explicitly collapsed.
- With the inspector sidebar present or hidden.
- With metaboxes present and not present.

@jasmussen jasmussen force-pushed the try/improve-left-menu-scrolling branch from 68b945b to ef00060 Dec 20, 2018

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 20, 2018

Rebased, hoping the tests will pass.

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Dec 20, 2018

It seems that the test failure is legit here. (the writing flow failure). Would be good if someone could take a look @WordPress/gutenberg-core

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 20, 2018

Yep, I'm not sure why a change in scrolling behavior should cause the test: #12644 (comment)

Would deeply appreciate some insights. 💕

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Dec 20, 2018

Yep, I'm not sure why a change in scrolling behavior should cause the test: #12644 (comment)

This could have a small impact on the width of the columns for instance, and this means maybe while previously we had to do two arrow ups to move to the first row of the block, we need to do only one at the moment.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 20, 2018

This could have a small impact on the width of the columns for instance, and this means maybe while previously we had to do two arrow ups to move to the first row of the block, we need to do only one at the moment.

Makes sense, and I could probably "fix the test" to make it pass. But I wouldn't necessarily fully understand what I did in the process, and I would rather if someone who was involved with the original test, or understands it better than I do, help give insight, as I'm worried about breaking the tests by "fixing" them.

@include break-medium() {
// Because the body element scrolls the navigation sidebar, we have to use position fixed here.
// Otherwise you would scroll the editing canvas out of view when you scroll the sidebar.
position: fixed;

This comment has been minimized.

@youknowriad

youknowriad Dec 20, 2018

Contributor

There's an issue related to this change I think that cause the columns block to be very tight in the e2e tests. The left position of the editor is not correct I think.

Instead of duplicating all the .folded, .auto-fold... styles, can't we use the .editor-left mixin as I think it's meant to address exactly this issue.

This comment has been minimized.

@jasmussen

jasmussen Dec 20, 2018

Contributor

We probably could, yes, but the mixin sets the left property, whereas we have to set the margin-left property.

It's complicated to explain why we need to use margin instead of the left property, but the reason is the same as why the sidebar uses it. The sidebar is fixed position using the same method as now the editing canvas, and by using margins we don't have to account for whether a scrollbar is present or not.

For example the notices use editor-right, and for that reason they overlap scrollbars, which is one of the things that were fixed in #12301. You can see that the sidebar also uses margins for that reason, here: https://github.com/WordPress/gutenberg/blob/master/packages/edit-post/src/components/sidebar/style.scss#L114

I suppose I can create a new mixin, @editor-margin-left that is similar to @editor-left, do you think that would be a good approach?

This comment has been minimized.

@youknowriad

youknowriad Dec 20, 2018

Contributor

I don't know, if it's specific to this component maybe not worth-it. But it would be good to detect why the margin-left is wrong in the e2e tests.

We're probably missing a case here.

In the e2e test, I see the WP left menu as collapsed but the editor toolbar and the editor content left position is wrong, it's shown as if the left menu is not collapsed.

This comment has been minimized.

@jasmussen

jasmussen Dec 20, 2018

Contributor

Let me take a look again to see if the rules are right.

This comment has been minimized.

@jasmussen

jasmussen Dec 20, 2018

Contributor

Just tried to follow the instructions in the test all manually, and they fail for me too. However they fail the same for me in master and in this branch. It's only the e2e test that fails in this branch:

test in this branch

I'm really confused why this test fails.

I've tested thoroughly the left margin now, and I cannot get it to a state where it isn't right, with regards to the state of the left menu.

This comment has been minimized.

@jasmussen

jasmussen Dec 20, 2018

Contributor

In the e2e test, I see the WP left menu as collapsed but the editor toolbar and the editor content left position is wrong, it's shown as if the left menu is not collapsed.

How did you get to this state? I can't reproduce it.

This comment has been minimized.

@youknowriad

youknowriad Dec 20, 2018

Contributor

The thing is I couldn't reproduce as well unless I run the e2e test in non-headless mode.
I think it has to do with:

  • First time you visit the admin (no persisted preference for the sidebar...)
  • Size of the window should be something around 960x700

This comment has been minimized.

@jasmussen

jasmussen Dec 20, 2018

Contributor

Awesome, thank you. Trying.

This comment has been minimized.

@jasmussen

jasmussen Dec 20, 2018

Contributor

Oh wow this is super interesting. At that breakpoint, the text "Second column paragraph" wraps into two lines:

screenshot 2018-12-20 at 13 53 24

That means that you do need THREE presses of the up arrow to go to the 1st column. Whereas when there's enough space in the main editing canvas for the text to not wrap, you only have to press the up arrow TWICE.

Regardless of the test failure, or this patch I'm currently testing, this means the test currently only works on a very specific screen size.

This comment has been minimized.

@jasmussen

jasmussen Dec 20, 2018

Contributor

So, here's a GIF of me reproducing master at about that screen size:

master

Here's me manually reproducing the same test in this branch:

this branch

The bit that is failing is that once the caret is at the end of the second column paragraph, you press "Up" arrow three times. One to go to the first line, another to select the column, and a third to go to the 1st column paragraph.

This is the same in both branches when I test.

But if the viewport is this small, then the words "Second column paragraph" wrap onto three lines:

screenshot 2018-12-20 at 14 08 53

If that were the case, then it would produce the expected result from our test failure, i.e. return "Second column paragraph", because the 2nd column would be selected.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 20, 2018

I found a fix.

Turns out in my IE11 fix here, I had prevented the editor from shrinking, meaning the metaboxes were outside the visual area on an empty screen. The width of the scrollbar this caused, meant the text from the test, "Second column paragraph" wrapped onto THREE lines instead of TWO.

So the test, in a roundabout way, worked. I expect the tests to pass now.

ce7dfe0 includes some feedback from @tofumatt addressed, and it also changes the matrix of the folded/autofold rules to better match that from the mixin. But the net result for that change is identical to before. The real change is here: ce7dfe0#diff-ec5f5c91d0b3295f448977820605e4e4R147

That changing of flex means it works for both IE11 and other browsers.

Before, it wasflex: 1 0 auto;, which means it can flex-grow, it can't flex-shrink, and it has an auto size.

Now it's flex: 1 1 auto;, which means it can flex-grow, flex-shrink, and has an auto size. The "flex shrink" means there will be no scrollbar when the test is run. This means the text won't wrap, and means the test should return the right result. 🤞

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 20, 2018

Okay, it appears the test is still failing. Which puts me at the end of my rope. The first test failure was legitimate in that I discovered the missing "flex-shrink" property that caused metaboxes to be out of view.

But I don't know why it's failing now, even locally.

Changing the test to the following makes it pass:

	it( 'Should navigate inner blocks with arrow keys', async () => {
		let activeElementText;

		// Add demo content
		await clickBlockAppender();
		await page.keyboard.type( '1st paragraph' );
		await page.keyboard.press( 'Enter' );
		await page.keyboard.type( '/columns' );
		await page.keyboard.press( 'Enter' );
		await page.keyboard.type( '1st column paragraph' );

		// Arrow down should navigate through layouts in columns block (to
		// its default appender). Two key presses are required since the first
		// will land user on the Column wrapper block.
		await page.keyboard.press( 'ArrowDown' );
		await page.keyboard.press( 'ArrowDown' );
		await page.keyboard.type( '2nd column paragraph' );

		// Arrow down from last of layouts exits nested context to default
		// appender of root level.
		await page.keyboard.press( 'ArrowDown' );
		await page.keyboard.type( '2nd paragraph' );

		// Arrow up into nested context focuses last text input
		await page.keyboard.press( 'ArrowUp' );
		activeElementText = await page.evaluate( () => document.activeElement.textContent );
		expect( activeElementText ).toBe( '2nd column paragraph' );

		// Arrow up in inner blocks should navigate through (1) column wrapper,
		// (2) text fields.
		// We need to arrow up key presses in the paragraph block because it shows up in two lines.
		await page.keyboard.press( 'ArrowUp' );
		await page.keyboard.press( 'ArrowUp' );
		await page.keyboard.press( 'ArrowUp' );
		activeElementText = await page.evaluate( () => document.activeElement.textContent );
		expect( activeElementText ).toBe( '1st column paragraph' );

		// Arrow up from first text field in nested context focuses column and
		// columns wrappers before escaping out.
		let activeElementBlockType;
		await page.keyboard.press( 'ArrowUp' );
		await page.keyboard.press( 'ArrowUp' );
		activeElementBlockType = await page.evaluate( () => (
			document.activeElement.getAttribute( 'data-type' )
		) );
		expect( activeElementBlockType ).toBe( 'core/column' );
		await page.keyboard.press( 'ArrowUp' );
		activeElementBlockType = await page.evaluate( () => (
			document.activeElement.getAttribute( 'data-type' )
		) );
		expect( activeElementBlockType ).toBe( 'core/columns' );

		// Arrow up from focused (columns) block wrapper exits nested context
		// to prior text input.
		await page.keyboard.press( 'ArrowUp' );
		activeElementText = await page.evaluate( () => document.activeElement.textContent );
		expect( activeElementText ).toBe( '1st paragraph' );

		expect( await getEditedPostContent() ).toMatchSnapshot();
	} );

Because "2nd paragraph" is most likely to wrap on two lines instead of 3.

Look:

screenshot 2018-12-20 at 16 35 20

I have no idea how to proceed, other than to change the test.

Help me @gziolo test master, you're my only hope!

@gziolo

This comment has been minimized.

Copy link
Member

gziolo commented Dec 20, 2018

@jasmussen - I think we had the same issue in the past but with the different columns setup, let me check how was it fixed and who knows it best :)

@gziolo

This comment has been minimized.

Copy link
Member

gziolo commented Dec 20, 2018

1d5fa32#diff-5ae26f128f656bf9ba7c25b39cc21b8c

@youknowriad is our friend, you can play with the number of ArrowUp key presses like he did in here 1d5fa32#diff-5ae26f128f656bf9ba7c25b39cc21b8c.

Yes, feel free to tweak the test. It seems like a valid requirement to make it pass :)

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Dec 20, 2018

I still want to understand why the column block is showing in three lines now with this PR before updating the test.

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Dec 21, 2018

So it looks like the test is passing for me locally but not in travis which is weird. At this point, I'm in favor of making adjustements to the test to make it pass regardless of the width of the viewport.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 21, 2018

If I update the snapshots, another test fails:

 FAIL  test/e2e/specs/block-hierarchy-navigation.test.js (6.902s)
  ● Navigating the block hierarchy › should navigate block hierarchy using only the keyboard

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "Navigating the block hierarchy should navigate block hierarchy using only the keyboard 1".

    - Snapshot
    + Received

    @@ -9,9 +9,9 @@
      <div class="wp-block-column"></div>
      <!-- /wp:column -->

      <!-- wp:column -->
      <div class="wp-block-column"><!-- wp:paragraph -->
    - <p>Third column</p>
    + <p></p>
      <!-- /wp:paragraph --></div>
      <!-- /wp:column --></div

I'm not sure I'm doing this right, so I'd appreciate help here.

@youknowriad youknowriad merged commit e9f6a6b into master Dec 24, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the try/improve-left-menu-scrolling branch Dec 24, 2018

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 24, 2018

💖💖

@latheeshvmv

This comment has been minimized.

Copy link

latheeshvmv commented Dec 24, 2018

is this solved? I am also having this problem..scrolling is not proper with the mouse. it seems to be the scrollbar height is creating the problem, inner one stops at a certain position and outer one need to move up

@aduth

This comment has been minimized.

Copy link
Member

aduth commented Jan 2, 2019

@latheeshvmv While merged, this is not yet included in a Gutenberg plugin or WordPress release, and is slated to be included in the next minor version of each.

youknowriad added a commit that referenced this pull request Jan 9, 2019

Try: Improve scrolling of navigation menu on small screens (#12644)
* Try: Improve scrolling of navigation menu on small screens

We scroll the editing canvas, the inspector sidebar, and the block library independently at desktop breakpoints. We do this so that the sidebar inspector can stay in view even if you have scrolled far down the editing canvas, and to avoid scroll bleed.

However because the navigation sidebar (on the left) has flyout menus on the desktop breakpoints, we can't yet scroll this one separately. If a user has a bunch of plugins installed that add menu items, or a small screen, these manu items might go beyond the visible height of the viewport. To make these accessible regardless, when this happens the `body` element scrolls to let you reach them.

In this situation, there is currently an issue where the editing canvas might scroll out of view when you scroll to the bottom of the sidebar.

This PR improves that situation by making the editing canvas `position: fixed;`, same as the sidebar is. This ensures that the entire editor scrolls with you down the page, as you scroll the `body` content.

This needs a good testing. `position: fixed;` does not inherit from a relative parent, which means we have to specifiy a matrix of left margins to accommodate for the different configurations of the navigation menu: auto-collapsed, manually collapsed, or the default width. To test, please verify that everything works as intended. Please test:

- All breakpoints beyond the 600px small breakpoint.
- Fullscreen and not fullscreen modes.
- With the navigation menu auto collapsing, and explicitly collapsed.
- With the inspector sidebar present or hidden.
- With metaboxes present and not present.

* Add flex rule to fix IE issue.

* Address feedback, and fix test issue.

* Try making the test more reliable using small columns

youknowriad added a commit that referenced this pull request Jan 9, 2019

Synchronize 4.8 with g-minor to include 4.8 into WordPress Core (#13261)
* Add an error state to the image block to allow upload errors to display (#10224)

* Try: JS Console warning for when in Quirks Mode (#12575)

* Try: JS Console warning for when in Quirks Mode

This PR detects whether the browser is in Quirks Mode. Quirks Mode is a rendering method used when the doctype definition is missing or incorrectly placed in the HTML source, causing the browser to have difficulty detecting the type of document it is to render.

This is usually caused by a PHP error, or even just a style tag that is output incorrectly on the page. See discussion in #12455 and #11378.

The usual result is Gutenberg rendering incorrectly, notably with metaboxes overlapping content.

The purpose of this PR is to help developers debug the issue and fix it at the root. As such, it adds a console warning, props @nickcernis for the text:

```
[Warning] Your browser is using Quirks Mode. This can cause rendering issues such as blocks overlaying meta boxes in the editor. Quirks Mode can be triggered by PHP errors or HTML code appearing before the opening <!DOCTYPE html>. Try checking the raw page source or your site's PHP error log and resolving errors there, removing any HTML before the doctype, or disabling plugins.
```

It also augments the documentation to add a note about this.

* Move warning to index.js

* Remove try/catch.

* Tweak: Remove redundant [warning] in warn call

* Organizing screenshot assets for the block tutorial inside the designers-developers directory in the repo (#12745)

* Rename backwards compatiblity to backward compatibility (#12751)

* Rename backwards compatiblity to backward compatibility

* Remove package-lock from commit

* Update CONTRIBUTING.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update CONTRIBUTING.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Whitespace in manifest

* Update node-sass to 4.11.0 to support Node.js 11 (#12541)

## Description
Fixes #12539 by updating node-sass to support Node.js 11.

## How has this been tested?
Running `npm install` on macOS 10.14 with Node.js 11.2 without problems.

## Types of changes
Minor dependency bump to support Node.js 11.

## Checklist:
- [x] My code is tested.
- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/ -->
- [x] My code follows the accessibility standards. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ -->
- [x] My code has proper inline documentation. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ -->

* Add attributes to ServerSideRender readme (#12793)

* Add attributes to ServerSideRender readme

Adds a code example demonstrating how to define attributes when registering a block that will use attributes in a ServerSideRender component.

* Add whitespace and inline code markup to ServerSideRender readme

Implements requested changes from code review.

* Scripts: Add check-engines script to the package (#12721)

* Scripts: Add check-engines script to the package

* Update packages/scripts/CHANGELOG.md

Co-Authored-By: gziolo <grzegorz@gziolo.pl>

* Update packages/scripts/README.md

Co-Authored-By: gziolo <grzegorz@gziolo.pl>

* Update minimal node version to 10.x

Co-Authored-By: gziolo <grzegorz@gziolo.pl>

* Move devDependencies to root package.json file (#12720)

* Chore: Remove unused npm dependencies from the root package.json file

* Move devDependencies to root package.json file

* Add a line to PR template for developer documentation (#12822)

* Add a line to PR template for developer documentation

Developer documentation is critical for making a platform extendable,
developers need to know the proper way to extend a feature, or in a
sense that does may not even exist.

* Update .github/PULL_REQUEST_TEMPLATE.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Grammatical mistakes & Missing spaces (#12643)

* Grammatical mistakes & Missing spaces

Fixing grammatical mistakes & adding the required space between 2 lines.

* Update docs/designers-developers/developers/filters/block-filters.md

Co-Authored-By: faisal-alvi <faisalalvi33@gmail.com>

* Update docs/designers-developers/developers/filters/block-filters.md

Co-Authored-By: faisal-alvi <faisalalvi33@gmail.com>

* Some content format issues (#12636)

I've noticed some content formatting issues while going through this page. Hence, I'm approaching some suggestion from my side.

* Fix incorrect value for __back_compat_meta_box (#12776)

* Fix Typo (#12902)

* fix typo (#12905)

* Fix Typo (#12918)

* fixed typo (#12936)

Changed from 'moreso than' to 'more so than'.

## Description
<!-- Please describe what you have changed or added -->

## How has this been tested?
<!-- Please describe in detail how you tested your changes. -->
<!-- Include details of your testing environment, tests ran to see how -->
<!-- your change affects other areas of the code, etc. -->

## Screenshots <!-- if applicable -->

## Types of changes
<!-- What types of changes does your code introduce?  -->
<!-- Bug fix (non-breaking change which fixes an issue) -->
<!-- New feature (non-breaking change which adds functionality) -->
<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->

## Checklist:
- [ ] My code is tested.
- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/ -->
- [ ] My code follows the accessibility standards. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ -->
- [ ] My code has proper inline documentation. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ -->
- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://wordpress.org/gutenberg/handbook/designers-developers/ -->

* Fix typo (#12937)

Fixed typo from 'comma separated' to 'comma-separated'.

* Add content to Contributors index page (#12910)

* Add content to Contributors index page

When visiting the Gutenberg Handbook the Contributors index page is
blank. See: https://wordpress.org/gutenberg/handbook/contributors/

This PR adds some basic content and links to find more, including
linking back to the repo's contributing document.

* Remove newlines, update links

* Getting Started with JavaScript (#12689)

* Getting Started with JavaScript

* Reorder add_action/function

* Update prefix to use myguten, instead of just my

* Update docs/designers-developers/developers/tutorials/javascript/readme.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update to block_editor_assets

* Updates per danielbachhuber review.

* Updates, and broken up into sections

* Add Troubleshooting

* Updates with suggestion. Props to @nosolosw

* Update docs/designers-developers/developers/tutorials/javascript/versions-and-building.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update docs/designers-developers/developers/tutorials/javascript/versions-and-building.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Add screenshot with style

* Reorder TOC, move versions to end

* Update link for browser support

* Add check for dependency to troubleshooting section

* General edits for spelling and flow

* Update Table of Contents and generated manifest

* Fix up header tags consistency and spaces

* Edits per @chrisvanpatten review

* Update docs/designers-developers/developers/tutorials/javascript/extending-the-block-editor.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update docs/designers-developers/developers/tutorials/javascript/loading-javascript.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update docs/designers-developers/developers/tutorials/javascript/loading-javascript.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update docs/designers-developers/developers/tutorials/javascript/loading-javascript.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update docs/designers-developers/developers/tutorials/javascript/plugins-background.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update docs/designers-developers/developers/tutorials/javascript/plugins-background.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Move screenshots to assets directory, add additional screenshot for success

* Move block style variant to assets

* Formating

* Update images to full URLs

* Fix titles

* Fixed incorrect example code (#12906)

*  Build tooling: Fix Travis failures with Docker instances (#12983)

* Build tooling: Fix Travis failures with Docker instances

* Docs: Fix manifest file

* chore: Fix typo

* Add section to setAttributes documentation about immutability of attributes (#12811)

* Add section to setAttributes documentation about immutability of attributes

* Simplify explanation of immutable attributes

* Fix typo and add link to redux's immutability docs

Co-Authored-By: talldan <daniel.richards@automattic.com>

* Update recommended config provided for lint-js script (#12845)

* Update default config provided for lint-js script

* Update packages/scripts/CHANGELOG.md

* Clarify usage of recommended configs in docs

* Add JSHint ESLint config (#12840)

* Add ESLint JSHint config

* Update packages/eslint-plugin/README.md

Co-Authored-By: ntwb <stephen@netweb.com.au>

* Scripts: Add test-e2e script to wp-scripts (#12437)

* Scripts: Add test-e2e script

* Docs: Add docs for test-e2e script added to scripts packages

* Update package-lock.json

* Refactor scripts based on feedback shared in the review

* More fixes to wp-scripts test-e2e

* Address feedback shared in the review

* Fix runInBand flag usage

* [Documentation] fix link to edit-post documentation (#12835)

* fix link to edit-post documentation

* Update README.md

* Update README.md

* Get the last mobile changes back in master (#12582)

* Make a simple version of DefaultBlockAppender for mobile (#12434)

* Make a simple version of DefaultBlockAppender for mobile

* Use the same padding used for other blocks in DefaultBlockAppender

* Update copy, auto focus and bind keypress

* Do not bind key events

* Change style of placeholder

* Stop using classname-to-style autotransform in react native (#12552)

* [RNMobile] Fix crash editing More blocks (#12620)

* Use onChange instead of onChangeText in PlainText updates.

* Convert the More block to Component, and re-use the same logic of the web when the field is empty.

* Remove unsed variable, and format code

* Move `);` to a new line

* Fix SVG styles for mobile (#12608)

* Fix SVG styles for mobile

* Simplify condition since className is always a string

* Check if Enter.key is the last inserted character, and add a new default block after the current More block. (#12639)

Note: This is detected after the fact, and the newline could be visible on the block for a very small time. This is OK for the alpha, we will revisit the logic later.
See wordpress-mobile/gutenberg-mobile#324

* Call blur when deselecting RichText or PlainText component. (#12765)

This is required to hide the keyboard when the focus moves to a non textual block.

* Merge master into mobile (#12796)

* RichText: fix onSetup doc (#12607)

* Update broken links (#12660)

* Update broken links

There was 2 broken links. I changed same way with Data Module Reference page.

* Update docs/designers-developers/developers/block-api/README.md

Co-Authored-By: cagdasdag <cagdasdag81@gmail.com>

* Update docs/designers-developers/developers/block-api/README.md

Co-Authored-By: cagdasdag <cagdasdag81@gmail.com>

* Docs: Update Glossary (#12479)

* Update glossar with missing terms

* Convert glossary to use dl/dt/dd dtags. Fixes #9976

* Fix TinyMCE link

* remove spacing around tags

* Add template definition, with link

* Updates per review

* Update docs/designers-developers/glossary.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Add documentation for `safeDecodeURI()` and `filterURLForDisplay()` (#12570)

* Add documentation for `safeDecodeURI()` and `filterURLForDisplay()`

* Whitespace

* Consistant Capit… i mean capitalization

* Oxford comma

Co-Authored-By: georgeh <george@hotelling.net>

* Update theme-support.md (#12661)

* Fix: Undoing Image Selection in Image Block results in Broken Image (#12567)

* Optimize isViewportMatch (#12542)

* Cache createBlock call in isUnmodifiedDefaultBlock (#12521)

* Cache createBlock call in isUnmodifiedDefaultBlock

* Invalidate cache when default block name changes

* Merge ifs

* Font Size Picker: Use a menuitemradio role and better labels. (#12372)

* Use a menuitemradio role and better labels.

* Restore Button and remove MenuItem import.

* Use template literals.

* Set document title for preview interstitial (#12466)

* Fix e2e tests after the WordPress 5.0 upgrade (#12715)

* Fix e2e tests after the WordPress 5.0 upgrade

* Remove the php unit tests testing the WP5.0 core instead of the plugin

* Meta Boxes: Don't hide disabled meta boxes by modifying DOM (#12628)

Hiding disabled meta boxes by setting `element.style.display = 'none'`
interferes with plugins like ACF which rely on being able to show and
hide meta boxes using `$.hide()` and `$.show()`.

Hiding the meta box using a new `.edit-post-meta-boxes-area .is-hidden`
class ensures that we don't interfere with third party code.

* Add a word-wrap style to the facebook embed preview screen  (#11890)

* Add a word-break style to the facebook embed preview screen to prevent the long embed url from breaking the block boundary

* Fix typo and missing space in scss comment

* Adding @aldavigdis to the contributors list (#12686)

* Make media & text block placeholder translatable (#12706)

* Fix: Problems on Media & Text block resizing; Load wp-block-library styles before wp-edit-blocks. (#12619)

* Get wordcount type from translation (#12586)

* get wordcount type from translation

* Add description to explain the options for wordcount type

* Added mylsef into contributors.md. :)

* Only render InserterWithShortcuts on hover (#12510)

* Fix issue where default appender has icons overlaying the text (#12536)

* Fix issue where default appender has icons overlaying the text

This fixes #11425.

It adds padding to the right of the default block appender to fit 3 icons.

* chore: Tweak spelling

* Classic Block: set correct focus back after blur (#12415)

* Classic Block: set correct focus back after blur

* Add e2e test

* reset bookmark on mousedown and touchstart

* e2e: Look for aria-label="Add Media" rather than "Insert Media"

* RichText: only replace range and nodes if different (#12547)

* RichText: only set range if different

* Check rangeCount

* Also compare nodes

* Add e2e test

* Simplify

* RichText: Document isRangeEqual

* Testing: RichText: Assure subscriber removal

* Unsubscribe in page.evaluate

* Mark temporary eslint-config package as private (#12734)

* When a post is saved, check for tinymce and save any editors. (#12568)

* When a post is saved, check for tinymce and save any editors.

* Importing tinymce and using tinyMCE vs the object stored in window.tinymce.

* Updated version number and changelog.

* no longer importing tinymce since we use the tinyMCE global. tinyMCE.triggerSave works now. checking if tinyMCE exists before making the call just in case.

* Using typeof to check for tinyMCE and fixed issues brought up in travis run.

* using window.tinyMCE again to avoid warning RE undefined var

* Restore the package.json version.

* Add e2e tests for the custom wp_editor metaboxes

* Rename functions, removing gutenberg_ prefix (#12326)

* Rename functions, removing gutenberg_ and prefixing with wp_

* Remove wp_ prefix to match core

* Remove function check per review

* Annotations: Apply annotation className as string (#12741)

* RichText: Ensure instance is selected before setting back selection (#12737)

* Fix for #11663 (#12728)

* Fixed Deleting an HTML Anchor attribute leaves an empty HTML id attribute

* Fixed Deleting an HTML Anchor attribute leaves an empty

* Update plugin version to 4.7.0-rc.1 (#12752)

* Add an error state to the image block to allow upload errors to display (#10224)

* Try: JS Console warning for when in Quirks Mode (#12575)

* Try: JS Console warning for when in Quirks Mode

This PR detects whether the browser is in Quirks Mode. Quirks Mode is a rendering method used when the doctype definition is missing or incorrectly placed in the HTML source, causing the browser to have difficulty detecting the type of document it is to render.

This is usually caused by a PHP error, or even just a style tag that is output incorrectly on the page. See discussion in #12455 and #11378.

The usual result is Gutenberg rendering incorrectly, notably with metaboxes overlapping content.

The purpose of this PR is to help developers debug the issue and fix it at the root. As such, it adds a console warning, props @nickcernis for the text:

```
[Warning] Your browser is using Quirks Mode. This can cause rendering issues such as blocks overlaying meta boxes in the editor. Quirks Mode can be triggered by PHP errors or HTML code appearing before the opening <!DOCTYPE html>. Try checking the raw page source or your site's PHP error log and resolving errors there, removing any HTML before the doctype, or disabling plugins.
```

It also augments the documentation to add a note about this.

* Move warning to index.js

* Remove try/catch.

* Tweak: Remove redundant [warning] in warn call

* Organizing screenshot assets for the block tutorial inside the designers-developers directory in the repo (#12745)

* Rename backwards compatiblity to backward compatibility (#12751)

* Rename backwards compatiblity to backward compatibility

* Remove package-lock from commit

* Update CONTRIBUTING.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update CONTRIBUTING.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Whitespace in manifest

* Update node-sass to 4.11.0 to support Node.js 11 (#12541)

## Description
Fixes #12539 by updating node-sass to support Node.js 11.

## How has this been tested?
Running `npm install` on macOS 10.14 with Node.js 11.2 without problems.

## Types of changes
Minor dependency bump to support Node.js 11.

## Checklist:
- [x] My code is tested.
- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/ -->
- [x] My code follows the accessibility standards. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ -->
- [x] My code has proper inline documentation. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ -->

* Update native more block styling (#12767)

* Update styling of more block

* Fix CI test

* Update spaces

* Convert indentation to tabs

* Fix lint issues

* Remove key attribute

* Set fixed width to the text input

* Make sure to properly compare empty text and undefined text variable before resetting the eventCount field. (#12815)

* Use the default "Read More" text on init only, giving the ability to user to empty the field and re-start with empty text (#12821)

* Merge 'origin/master' into 'origin/mobile' (#12836)

* RichText: fix onSetup doc (#12607)

* Update broken links (#12660)

* Update broken links

There was 2 broken links. I changed same way with Data Module Reference page.

* Update docs/designers-developers/developers/block-api/README.md

Co-Authored-By: cagdasdag <cagdasdag81@gmail.com>

* Update docs/designers-developers/developers/block-api/README.md

Co-Authored-By: cagdasdag <cagdasdag81@gmail.com>

* Docs: Update Glossary (#12479)

* Update glossar with missing terms

* Convert glossary to use dl/dt/dd dtags. Fixes #9976

* Fix TinyMCE link

* remove spacing around tags

* Add template definition, with link

* Updates per review

* Update docs/designers-developers/glossary.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Add documentation for `safeDecodeURI()` and `filterURLForDisplay()` (#12570)

* Add documentation for `safeDecodeURI()` and `filterURLForDisplay()`

* Whitespace

* Consistant Capit… i mean capitalization

* Oxford comma

Co-Authored-By: georgeh <george@hotelling.net>

* Update theme-support.md (#12661)

* Fix: Undoing Image Selection in Image Block results in Broken Image (#12567)

* Optimize isViewportMatch (#12542)

* Cache createBlock call in isUnmodifiedDefaultBlock (#12521)

* Cache createBlock call in isUnmodifiedDefaultBlock

* Invalidate cache when default block name changes

* Merge ifs

* Font Size Picker: Use a menuitemradio role and better labels. (#12372)

* Use a menuitemradio role and better labels.

* Restore Button and remove MenuItem import.

* Use template literals.

* Set document title for preview interstitial (#12466)

* Fix e2e tests after the WordPress 5.0 upgrade (#12715)

* Fix e2e tests after the WordPress 5.0 upgrade

* Remove the php unit tests testing the WP5.0 core instead of the plugin

* Meta Boxes: Don't hide disabled meta boxes by modifying DOM (#12628)

Hiding disabled meta boxes by setting `element.style.display = 'none'`
interferes with plugins like ACF which rely on being able to show and
hide meta boxes using `$.hide()` and `$.show()`.

Hiding the meta box using a new `.edit-post-meta-boxes-area .is-hidden`
class ensures that we don't interfere with third party code.

* Add a word-wrap style to the facebook embed preview screen  (#11890)

* Add a word-break style to the facebook embed preview screen to prevent the long embed url from breaking the block boundary

* Fix typo and missing space in scss comment

* Adding @aldavigdis to the contributors list (#12686)

* Make media & text block placeholder translatable (#12706)

* Fix: Problems on Media & Text block resizing; Load wp-block-library styles before wp-edit-blocks. (#12619)

* Get wordcount type from translation (#12586)

* get wordcount type from translation

* Add description to explain the options for wordcount type

* Added mylsef into contributors.md. :)

* Only render InserterWithShortcuts on hover (#12510)

* Fix issue where default appender has icons overlaying the text (#12536)

* Fix issue where default appender has icons overlaying the text

This fixes #11425.

It adds padding to the right of the default block appender to fit 3 icons.

* chore: Tweak spelling

* Classic Block: set correct focus back after blur (#12415)

* Classic Block: set correct focus back after blur

* Add e2e test

* reset bookmark on mousedown and touchstart

* e2e: Look for aria-label="Add Media" rather than "Insert Media"

* RichText: only replace range and nodes if different (#12547)

* RichText: only set range if different

* Check rangeCount

* Also compare nodes

* Add e2e test

* Simplify

* RichText: Document isRangeEqual

* Testing: RichText: Assure subscriber removal

* Unsubscribe in page.evaluate

* Mark temporary eslint-config package as private (#12734)

* When a post is saved, check for tinymce and save any editors. (#12568)

* When a post is saved, check for tinymce and save any editors.

* Importing tinymce and using tinyMCE vs the object stored in window.tinymce.

* Updated version number and changelog.

* no longer importing tinymce since we use the tinyMCE global. tinyMCE.triggerSave works now. checking if tinyMCE exists before making the call just in case.

* Using typeof to check for tinyMCE and fixed issues brought up in travis run.

* using window.tinyMCE again to avoid warning RE undefined var

* Restore the package.json version.

* Add e2e tests for the custom wp_editor metaboxes

* Rename functions, removing gutenberg_ prefix (#12326)

* Rename functions, removing gutenberg_ and prefixing with wp_

* Remove wp_ prefix to match core

* Remove function check per review

* Annotations: Apply annotation className as string (#12741)

* RichText: Ensure instance is selected before setting back selection (#12737)

* Fix for #11663 (#12728)

* Fixed Deleting an HTML Anchor attribute leaves an empty HTML id attribute

* Fixed Deleting an HTML Anchor attribute leaves an empty

* Update plugin version to 4.7.0-rc.1 (#12752)

* Add an error state to the image block to allow upload errors to display (#10224)

* Try: JS Console warning for when in Quirks Mode (#12575)

* Try: JS Console warning for when in Quirks Mode

This PR detects whether the browser is in Quirks Mode. Quirks Mode is a rendering method used when the doctype definition is missing or incorrectly placed in the HTML source, causing the browser to have difficulty detecting the type of document it is to render.

This is usually caused by a PHP error, or even just a style tag that is output incorrectly on the page. See discussion in #12455 and #11378.

The usual result is Gutenberg rendering incorrectly, notably with metaboxes overlapping content.

The purpose of this PR is to help developers debug the issue and fix it at the root. As such, it adds a console warning, props @nickcernis for the text:

```
[Warning] Your browser is using Quirks Mode. This can cause rendering issues such as blocks overlaying meta boxes in the editor. Quirks Mode can be triggered by PHP errors or HTML code appearing before the opening <!DOCTYPE html>. Try checking the raw page source or your site's PHP error log and resolving errors there, removing any HTML before the doctype, or disabling plugins.
```

It also augments the documentation to add a note about this.

* Move warning to index.js

* Remove try/catch.

* Tweak: Remove redundant [warning] in warn call

* Organizing screenshot assets for the block tutorial inside the designers-developers directory in the repo (#12745)

* Rename backwards compatiblity to backward compatibility (#12751)

* Rename backwards compatiblity to backward compatibility

* Remove package-lock from commit

* Update CONTRIBUTING.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Update CONTRIBUTING.md

Co-Authored-By: mkaz <marcus@mkaz.com>

* Whitespace in manifest

* Update node-sass to 4.11.0 to support Node.js 11 (#12541)

## Description
Fixes #12539 by updating node-sass to support Node.js 11.

## How has this been tested?
Running `npm install` on macOS 10.14 with Node.js 11.2 without problems.

## Types of changes
Minor dependency bump to support Node.js 11.

## Checklist:
- [x] My code is tested.
- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/ -->
- [x] My code follows the accessibility standards. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ -->
- [x] My code has proper inline documentation. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ -->

* Add attributes to ServerSideRender readme (#12793)

* Add attributes to ServerSideRender readme

Adds a code example demonstrating how to define attributes when registering a block that will use attributes in a ServerSideRender component.

* Add whitespace and inline code markup to ServerSideRender readme

Implements requested changes from code review.

* Scripts: Add check-engines script to the package (#12721)

* Scripts: Add check-engines script to the package

* Update packages/scripts/CHANGELOG.md

Co-Authored-By: gziolo <grzegorz@gziolo.pl>

* Update packages/scripts/README.md

Co-Authored-By: gziolo <grzegorz@gziolo.pl>

* Update minimal node version to 10.x

Co-Authored-By: gziolo <grzegorz@gziolo.pl>

* Move devDependencies to root package.json file (#12720)

* Chore: Remove unused npm dependencies from the root package.json file

* Move devDependencies to root package.json file

* Fix php notice from the recent comments block (#12812)

* RichText: Fix React warning shown when unmounting a currently selected RichText. (#12817)

* Packages: Reimplement ESLint config as plugin (#12763)

* Packages: Move eslint-config to eslint-plugin

(Fails pre-commit, but in effort to ensure history preservation)

* eslint-plugin: Add npmrc to avoid package-lock.json

* Framework: Update path references for eslint-config to -plugin

* eslint-plugin: Reimplement ESLint config as plugin

* eslint-plugin: Unmark as private

* eslint-plugin: Undocument custom ruleset

* 4.7 (#12819)

* Bump plugin version to 4.7.0

* chore(release): publish

 - @wordpress/annotations@1.0.4
 - @wordpress/api-fetch@2.2.6
 - @wordpress/block-library@2.2.10
 - @wordpress/block-serialization-default-parser@2.0.2
 - @wordpress/block-serialization-spec-parser@2.0.2
 - @wordpress/blocks@6.0.4
 - @wordpress/components@7.0.4
 - @wordpress/core-data@2.0.15
 - @wordpress/data@4.1.0
 - @wordpress/date@3.0.1
 - @wordpress/edit-post@3.1.5
 - @wordpress/editor@9.0.5
 - @wordpress/eslint-plugin@1.0.0
 - @wordpress/format-library@1.2.8
 - @wordpress/html-entities@2.0.4
 - @wordpress/list-reusable-blocks@1.1.17
 - @wordpress/notices@1.1.1
 - @wordpress/nux@3.0.5
 - @wordpress/rich-text@3.0.3
 - @wordpress/url@2.3.2
 - @wordpress/viewport@2.0.13

* Update changelogs after 4.7 package releases

* Add back package-lock.json

* Remove the call that does `blur` the undelying native component when deselecting RichText or PlainText. (#12886)

* [rnmobile]: Send blockType prop to RNAztecView (#12869)

* Revert "Remove the call that does `blur` the undelying native component (#12946)

* Revert "Remove the call that does `blur` the undelying native component when deselecting RichText or PlainText. (#12886)"

This reverts commit d9fe45e.

* Blur only if it is iOS

* Fix imports

* Fix lint errors in the mobile branch (#12990)

* Revert changes to lib/load.php

* Fix lint errors in More

* Fix lint error for PlainText

* Fix lint error in RichText

* Fix typo in docs/designers-developers/key-concepts.md (#13005)

* Scripts: Add lint-style script based on stylelint (#12722)

* Scripts: Add lint-css script based on stylelint

* Update packages/scripts/README.md

Co-Authored-By: gziolo <grzegorz@gziolo.pl>

* Update default config for lint-style script

* Scripts: Extend description for the package

* Expose unregisterBlockType for mobile (#13015)

* Tests: Enabled popular plugins on Travis when running e2e test suite (#12578)

* Tests: Enabled popular plugins on Travis when running e2e test suite

* Try running WP-CLI with a different user

* Tweak if statement

* Add back chmod dance on plugins related folders

* Create upgrade folder

* Add a temporary noop catch when api fetch for meta box save fails. Not having a catch caused an end to end test to fail.

* Fix: clickBelow logic clicked on the meta boxes when a big meta box was open.

* Make todo LOUD ;-)

* Remove obsolete lines after rebasing with master

* Let's try without AFC

* Trying without Yoast SEO this time

* Revert changes for the test

* Enable 2 more plugins

* Try without AMP

* Merge similar strings. (#12540)

* Remove temporary workaround that should have been removed in Gutenberg 4.5 (#12556)

* Remove duplicate toolbarcontainer class name (#12357)

* Remove duplicate toolbarcontainer class name

`components-toolbar` is added by `ToolbarContainer` itself, so we don’t need to add it again

* Swap components-toolbar between container and toolbar

* Disable clipboard button in file block during upload (#12499)

See #12493.

* Persist alignment when transforming a gallery to an image and vice-versa (#12242)

* Persist alignment when transforming a gallery to an image and vice-versa.

For #11374

* Optimize loop itteration for #12242

* temporarily disable link formatting (#13036)

* Docs: Release: Clarify pinging core team members (#12970)

* Docs: Release: Clarify pinging core team members

Reduce the bus factor by not referencing an individual contributor.

* docs: Add link to Gutenberg Core Team

* docs: Include direct links to Slack channel

* Add my name to CONTRIBUTORS.md file. (#13032)

* Small typo in the Range Control's readme (#12989)

Just a small typo in the documentation

* Update block design guidelines to include info on setup states (#12985)

* Update block design guidelines to include info on setup states

Proposed guidelines for when to include a setup state in your block design. Would appreciate feedback on content and validation of markdown syntax.

* Edited block-design.md to reflect comments on #12985

Made edits in response to comments from @jasmussen and @chrisvanpatten one #12985:

- Removed extra new lines around images
- Updated wording to resolve any confusion around setup state vs placeholder nomenclature.

* Tests: Disable a fragile link e2e test until it is improved (#13043)

* Docs: Remove shortname from fontsizes (#13033)

We are no longer using the `shortname` for `fontsizes`

* Improve documentation in CONTRIBUTING.md file (#11657)

* Improve: Docs in CONTRIBUTING.md file

Improve documentation in CONTRIBUTING.md file. Title-cased the headings and fixed grammatical/typo issues and errors.

* Applied comments from feedback

#11657 (comment)

* Docs: Update all local links in README files to work with npm (#13030)

* Docs: Update all local links in README files to work with npm

* Update packages/blocks/README.md

* Fix new lines in blocks README file

* Revert nux component link

* Revert link to the block library

* Update link to component from edit-post package

* Make help text more in line with other help texts (#11068)

* Make help text more in line with other help texts.

* Remove submodule.

* Update embed-preview.js

* Added MenuItem readme (#12485)

* Added MenuItem readme

* Updated spacing

Updated the spacing to remove unneccesary lines.

* Updated usage

Updated details for how and when to use the MenuItem component.

* Updated formatting errors

I believe I updated formatting errors in spacing, extra spaces as well as backticks.

* Fix up a few things!

- Ticks
- Restored an older version as there was a slight mixup
- Whitespace
- Other polish

* Radio documentation: updating radio readme (#11226)

* Updating Radio readme

Initial commit to update Radio readme. These changes add design documentation.

* Adding readme images

* Image path update

Updating the path of the images. Making a small tweak to phrasing.

* Updates so that only a single h1 is present

* image alt text removal

The alt text for these images has been removed because removing the images from the document doesn't affect comprehension.

* Removing images

* Removing images

* Removing images

* Adding images hosted on wordpress.org

* docs: tweak some usage recommendations

* Tweak spacing

* docs: Use headers

* Add: End 2 End tests on the sidebar premalinkl for CPT's. (#13060)

* Try: Improve scrolling of navigation menu on small screens (#12644)

* Try: Improve scrolling of navigation menu on small screens

We scroll the editing canvas, the inspector sidebar, and the block library independently at desktop breakpoints. We do this so that the sidebar inspector can stay in view even if you have scrolled far down the editing canvas, and to avoid scroll bleed.

However because the navigation sidebar (on the left) has flyout menus on the desktop breakpoints, we can't yet scroll this one separately. If a user has a bunch of plugins installed that add menu items, or a small screen, these manu items might go beyond the visible height of the viewport. To make these accessible regardless, when this happens the `body` element scrolls to let you reach them.

In this situation, there is currently an issue where the editing canvas might scroll out of view when you scroll to the bottom of the sidebar.

This PR improves that situation by making the editing canvas `position: fixed;`, same as the sidebar is. This ensures that the entire editor scrolls with you down the page, as you scroll the `body` content.

This needs a good testing. `position: fixed;` does not inherit from a relative parent, which means we have to specifiy a matrix of left margins to accommodate for the different configurations of the navigation menu: auto-collapsed, manually collapsed, or the default width. To test, please verify that everything works as intended. Please test:

- All breakpoints beyond the 600px small breakpoint.
- Fullscreen and not fullscreen modes.
- With the navigation menu auto collapsing, and explicitly collapsed.
- With the inspector sidebar present or hidden.
- With metaboxes present and not present.

* Add flex rule to fix IE issue.

* Address feedback, and fix test issue.

* Try making the test more reliable using small columns

* Avoid PHP notices in e2e tests plugins (#13094)

* Add an e2e test for blocks with meta attributes (#13095)

* Add end 2 end test to category addition (#13102)

This commit adds end 2 end tests to the category addition. Taxonomies are an area of the editor where we had some regressions in the past.
This is just a start, more tests will be added to test complex interactions using custom taxonomies.

* Update reference to design resources. (#13119)

Current link 404s; updating to point to the proper spot.

* Bump plugin version to 4.8

youknowriad added a commit that referenced this pull request Jan 9, 2019

Try: Improve scrolling of navigation menu on small screens (#12644)
* Try: Improve scrolling of navigation menu on small screens

We scroll the editing canvas, the inspector sidebar, and the block library independently at desktop breakpoints. We do this so that the sidebar inspector can stay in view even if you have scrolled far down the editing canvas, and to avoid scroll bleed.

However because the navigation sidebar (on the left) has flyout menus on the desktop breakpoints, we can't yet scroll this one separately. If a user has a bunch of plugins installed that add menu items, or a small screen, these manu items might go beyond the visible height of the viewport. To make these accessible regardless, when this happens the `body` element scrolls to let you reach them.

In this situation, there is currently an issue where the editing canvas might scroll out of view when you scroll to the bottom of the sidebar.

This PR improves that situation by making the editing canvas `position: fixed;`, same as the sidebar is. This ensures that the entire editor scrolls with you down the page, as you scroll the `body` content.

This needs a good testing. `position: fixed;` does not inherit from a relative parent, which means we have to specifiy a matrix of left margins to accommodate for the different configurations of the navigation menu: auto-collapsed, manually collapsed, or the default width. To test, please verify that everything works as intended. Please test:

- All breakpoints beyond the 600px small breakpoint.
- Fullscreen and not fullscreen modes.
- With the navigation menu auto collapsing, and explicitly collapsed.
- With the inspector sidebar present or hidden.
- With metaboxes present and not present.

* Add flex rule to fix IE issue.

* Address feedback, and fix test issue.

* Try making the test more reliable using small columns
@zignorp

This comment has been minimized.

Copy link

zignorp commented Jan 15, 2019

I just got this as a complaint from a user.

"it seems like as soon as I scroll down to the bottom of the page it prevents me from scrolling back up to the top. This means every time I scroll to the bottom I have to save a draft and start over."

She was also having problems with the classic editor admin, so we switched to gutenberg. Scrolling of the admin is ok for me, but I've got a big window. When I make my window shorter, the scrollbar disappears. I can still scroll using the mouse, but this is difficult for some users with shorter windows. She says she can't click above the nonexistent scrollbar.

jasmussen added a commit that referenced this pull request Jan 15, 2019

Improve scrolling in fullscreen mode, notably for Edge
In #12644, we changed the behavior of scrolling for the main content area slightly, to address issues with scrolling on small screens.

As part of that, there was one small issue that made it slightly harder to scroll this main content area, only when in fullscreen mode in Microsoft Edge. This PR fixes that.

Another side effect of that prior PR was that it unset some of the scrolling rules that prevented CSS bleed (when you scroll to the end of the Block Library and proceed to scroll the body content). This PR restores that.
@aduth

This comment has been minimized.

Copy link
Member

aduth commented Jan 16, 2019

The changes here appear to have broken the behavior to click below the blocks region to select the last block / insert a paragraph, in full screen mode.

youknowriad added a commit that referenced this pull request Jan 18, 2019

Improve scrolling in fullscreen mode, notably for Edge (#13327)
In #12644, we changed the behavior of scrolling for the main content area slightly, to address issues with scrolling on small screens.

As part of that, there was one small issue that made it slightly harder to scroll this main content area, only when in fullscreen mode in Microsoft Edge. This PR fixes that.

Another side effect of that prior PR was that it unset some of the scrolling rules that prevented CSS bleed (when you scroll to the end of the Block Library and proceed to scroll the body content). This PR restores that.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment