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

Provide a minimum of code wrapping for the code block. #26623

Merged
merged 1 commit into from
Nov 9, 2020

Conversation

jasmussen
Copy link
Contributor

Fixes #26600.

I'm not entirely sure what might have caused this, but #26600 suggests that a recent change casued text in the code block to stop wrapping. I'm not sure what that might be, the only recent change is #26347 and that doesn't look like it would've caused anything.

But in any case, this PR explicitly allows code to break words and wrap:

Screenshot 2020-11-02 at 10 36 25

Right now it does that in the style.scss file which loads for every code block. That's a big opinionated change to the block, so it needs a bit sanity check.

On the flipside, if we move those rules to theme.scss, very few themes will actually benefit from this change. But I'm happy to do so if that's desired. Let me know your thoughts!

@jasmussen jasmussen added the Needs Design Feedback Needs general design feedback. label Nov 2, 2020
@jasmussen jasmussen self-assigned this Nov 2, 2020
@jasmussen jasmussen requested a review from kjellr November 2, 2020 09:41
@github-actions
Copy link

github-actions bot commented Nov 2, 2020

Size Change: +42 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-library/style-rtl.css 8.05 kB +21 B (0%)
build/block-library/style.css 8.05 kB +21 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/api-fetch/index.js 3.45 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/editor-rtl.css 8.96 kB 0 B
build/block-library/editor.css 8.96 kB 0 B
build/block-library/index.js 147 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 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 48.1 kB 0 B
build/components/index.js 172 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.8 kB 0 B
build/core-data/index.js 12.5 kB 0 B
build/data-controls/index.js 771 B 0 B
build/data/index.js 8.8 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.41 kB 0 B
build/edit-post/style.css 6.39 kB 0 B
build/edit-site/index.js 22.6 kB 0 B
build/edit-site/style-rtl.css 3.91 kB 0 B
build/edit-site/style.css 3.91 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.12 kB 0 B
build/edit-widgets/style.css 3.12 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.63 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.34 kB 0 B
build/notices/index.js 1.78 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 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.22 kB 0 B

compressed-size-action

Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

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

I think this seems fine to include. As noted over here, the latest two default themes provide code to wrap this on the front end by default.

The most important thing is just making sure that the front-end matches the back end here. This helps with that.

@ZebulanStanphill ZebulanStanphill added [Block] Code Affects the Code Block CSS Styling Related to editor and front end styles, CSS-specific issues. labels Nov 2, 2020
@jasmussen
Copy link
Contributor Author

Thank you Kjell!

Now if only I could get the checks to pass :)

@jasmussen jasmussen merged commit 5f58096 into master Nov 9, 2020
@jasmussen jasmussen deleted the try/wrap-code-block branch November 9, 2020 10:21
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 9, 2020
@youknowriad
Copy link
Contributor

Is this a bug fix? Does it happen on Core too? Should we backport it to WP 5.6 ?

@kjellr
Copy link
Contributor

kjellr commented Nov 18, 2020

Yes, I think it's worth backporting. It fixes an unintended change to how the code block displays in the editor (and syncs up the front-end styles too, which turned out to be a longstanding issue).

@youknowriad youknowriad added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 18, 2020
@tellthemachines tellthemachines mentioned this pull request Nov 30, 2020
6 tasks
tellthemachines added a commit that referenced this pull request Dec 1, 2020
* Provide a minimum of code wrapping for the code block. (#26623)

* Block Support: Fix font size style when applying block support (#26762)

* Fix Separator editor styles (#27071)

* Fix the Post author selector for contributors (#26554)

Co-authored-by: Riad Benguella <benguella@gmail.com>

* Align single half width column to left (#27142)

* remove the auto margin for individual column blocks

* update margin values for blocks in blocks to zero insted of auto

* Add backward compatibility support for lightBlockWrapper in getSaveElement (#27189)

* Code block: paste plain text (#27236)

* paste plain text option

* Add e2e test

* Fix crash when null date passed to TimePicker (#27316)

* Fix crash when null date passed.

* Update test

* Fix GH actions "cancel" step (#27025)

* use new syntax for setting env var

* Update package-lock

* Update package-lock again

* Remove the button only option from the UI until it can be wired up to something that works in the front end. (#27379)

* Fix combobox csuggestion list closure when clicking scrollbar (#27367)

Co-authored-by: Joen A <1204802+jasmussen@users.noreply.github.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Adam Silverstein <adamsilverstein@earthboundhosting.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: andrei draganescu <me@andreidraganescu.info>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Ella van Durpe <wp@iseulde.com>
Co-authored-by: Noah Allen <noahtallen@gmail.com>
Co-authored-by: Andy Peatling <apeatling@users.noreply.github.com>
@tellthemachines tellthemachines removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Dec 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Code Affects the Code Block CSS Styling Related to editor and front end styles, CSS-specific issues. Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Problem with overflow management on Gutenberg code block on chrome
5 participants