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

Polish code editor. #21643

Merged
merged 3 commits into from
Apr 21, 2020
Merged

Polish code editor. #21643

merged 3 commits into from
Apr 21, 2020

Conversation

jasmussen
Copy link
Contributor

Fixes #21576.

This PR improves the code editor by embracing what it is, a code editor. That means a code font also for the title, and an editor that resizes to the viewport.

Before:

Screenshot 2020-04-16 at 12 57 52

After:

after

It also removes a bunch of dead code.

@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. [Feature] Code Editor Handling the code view of the editing experience [Type] Code Quality Issues or PRs that relate to code quality labels Apr 16, 2020
@jasmussen jasmussen self-assigned this Apr 16, 2020
@github-actions
Copy link

github-actions bot commented Apr 16, 2020

Size Change: -300 B (0%)

Total Size: 842 kB

Filename Size Change
build/edit-post/style-rtl.css 12.3 kB +48 B (0%)
build/edit-post/style.css 12.3 kB +48 B (0%)
build/editor/style-rtl.css 3.28 kB -198 B (6%)
build/editor/style.css 3.27 kB -198 B (6%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.01 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.24 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 761 B 0 B
build/block-editor/index.js 105 kB 0 B
build/block-editor/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 0 B
build/block-library/editor-rtl.css 7.1 kB 0 B
build/block-library/editor.css 7.1 kB 0 B
build/block-library/index.js 112 kB 0 B
build/block-library/style-rtl.css 7.17 kB 0 B
build/block-library/style.css 7.18 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.7 kB 0 B
build/components/index.js 198 kB 0 B
build/components/style-rtl.css 16.9 kB 0 B
build/components/style.css 16.9 kB 0 B
build/compose/index.js 6.66 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.25 kB 0 B
build/data/index.js 8.43 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 3.54 kB 0 B
build/edit-navigation/style-rtl.css 485 B 0 B
build/edit-navigation/style.css 485 B 0 B
build/edit-post/index.js 27.9 kB 0 B
build/edit-site/index.js 10.5 kB 0 B
build/edit-site/style-rtl.css 5.04 kB 0 B
build/edit-site/style.css 5.04 kB 0 B
build/edit-widgets/index.js 7.49 kB 0 B
build/edit-widgets/style-rtl.css 4.66 kB 0 B
build/edit-widgets/style.css 4.66 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 43.3 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.32 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.67 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.67 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Member

@mkaz mkaz left a comment

Choose a reason for hiding this comment

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

I tested this out and this works well, definite improvement.
No problems on Windows 10 using latest Edge and Firefox 👍

A minor nit that I'll defer to you, I'd like a little padding between title and content boxes.

@jasmussen
Copy link
Contributor Author

Thanks Marcus!

I actually intentionally removed the spacing between the title and the body, in effort to eliminate borders. Borders pile up and become noise when there's enough of them, so I actualy prefer the simpler look.

@shaunandrews
Copy link
Contributor

I appreciate the larger space for editing code. Nice work.

I find the “editing code” indicator and the exit button a little random. They don’t feel intentional and almost look like they’re just floating in space.

Probably outside the scope for this PR, but I’d love to see some basic syntax highlighting. And if we wanna get really fancy, some basic autocomplete/autoclosing for tags.

@MichaelArestad
Copy link
Contributor

I second everything Shaun said. Nice work!

I find the “editing code” indicator and the exit button a little random. They don’t feel intentional and almost look like they’re just floating in space.

Are these even necessary?

@jasmussen
Copy link
Contributor Author

I was just pointed to #17017 as a good list of aspects to address. For now I wanted to keep things simple and just address low-hanging fruit. But atleast crossposting to that thread is helpful.

I find the “editing code” indicator and the exit button a little random. They don’t feel intentional and almost look like they’re just floating in space.

They were designed to align with the editor box:

Screenshot 2020-04-17 at 18 57 09

But I see that isn't the case on larger screens. I'll do a little rethink.

Are these even necessary?

As I recall, we didn't always have them, but we added them exactly because people found it difficult to switch away from this editor once they had activated it. I don't know if @mtias can recall further details, but I distinctly remember this being a thing we added intentionally to solve that problem.

@jasmussen
Copy link
Contributor Author

Oh, and CC: @mapk for that bit about whether the indicators were necessary, because I saw that addressed mentioned in the other ticket.

@jasmussen
Copy link
Contributor Author

I find the “editing code” indicator and the exit button a little random. They don’t feel intentional and almost look like they’re just floating in space.

I massaged the positioning. Small:

Screenshot 2020-04-21 at 10 57 10

Medium:

Screenshot 2020-04-21 at 10 57 15

Large:

Screenshot 2020-04-21 at 10 57 19

As noted in this comment, the label and exit button were added for a reason. The reason can be revisited, of course, but I'd like for that to happen separately.

@jasmussen
Copy link
Contributor Author

#17017 outlines a number of ideas for how to improve the code editor. Syntax highlighting, line numbers, a custom sidebar, colors and so on. It also questions the "exit" button.

What this PR does for now, outside of visual polish and a wider editing interface, is force code fonts for the entire window, making it clearer you're editing code. That addresses part of the issue, but not the whole issue. For that reason, I'd like to merge this as is and keep that ticket open for further improvements.

@jasmussen jasmussen merged commit 39423a5 into master Apr 21, 2020
@jasmussen jasmussen deleted the try/polish-code-editor branch April 21, 2020 09:21
@github-actions github-actions bot added this to the Gutenberg 8.0 milestone Apr 21, 2020
@caban13
Copy link

caban13 commented Aug 7, 2020

Hi
an editor that resizes to the viewport. when is this coming to WP ?
I still see a code window of 580 px in WP 5.4.2.
Thanks
Alain

@jasmussen
Copy link
Contributor Author

Hello @caban13

This pull request refreshes the code editor, which resizes to the viewport but has a maximum width of 1032px. This will land in WordPress 5.5.

@caban13
Copy link

caban13 commented Aug 10, 2020

Thank for your answer.
1032 is better than 580, still I don't understand why not 100%, same width as normal view?
Thanks, again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Code Editor Handling the code view of the editing experience [Type] Code Quality Issues or PRs that relate to code quality [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

code editor width
5 participants