Skip to content

Fix RTL block alignments#11293

Merged
jasmussen merged 2 commits intomasterfrom
fix/rtl-alignments
Nov 1, 2018
Merged

Fix RTL block alignments#11293
jasmussen merged 2 commits intomasterfrom
fix/rtl-alignments

Conversation

@jasmussen
Copy link
Copy Markdown
Contributor

When you explicitly pick an alignment in the editor, this alignment should be respected regardless of text direction.

"Align left" is always align left. This PR fixes that by adding ignore comments to the auto RTL prefixer.

Steps to reproduce:

  • Set WordPress to an RTL language
  • Explicitly left or right align a block, and verify that this alignment looks right in both the editor and the frontend.

Before:

screenshot 2018-10-31 at 12 04 04

After:

screenshot 2018-10-31 at 12 04 10

When you explicitly pick an alignment in the editor, this alignment should be respected regardless of text direction.

"Align left" is always _align left_. This PR fixes that by adding ignore comments to the auto RTL prefixer
@jasmussen jasmussen added the [Type] Bug An existing feature does not function as intended label Oct 31, 2018
@jasmussen jasmussen added this to the 4.3 milestone Oct 31, 2018
@jasmussen jasmussen requested a review from a team October 31, 2018 11:07
@jasmussen jasmussen self-assigned this Oct 31, 2018
jasmussen pushed a commit to WordPress/twentynineteen that referenced this pull request Oct 31, 2018
This fixes #325.

It should be paired with WordPress/gutenberg#11293.

This PR adds RTL ignore comments to the block alignment classes so the values are not overridden.
@jasmussen
Copy link
Copy Markdown
Contributor Author

Pushed an additional fix that addresses an issue with block toolbars. Before:

screenshot 2018-10-31 at 12 35 30

screenshot 2018-10-31 at 12 35 35

After:

screenshot 2018-10-31 at 12 34 51

screenshot 2018-10-31 at 12 34 57

Copy link
Copy Markdown
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.

Looks good!

LTR:
screen shot 2018-10-31 at 8 47 18 am

RTL:
screen shot 2018-10-31 at 8 46 50 am

@gziolo gziolo added the Internationalization (i18n) Issues or PRs related to internationalization efforts label Oct 31, 2018
@jasmussen
Copy link
Copy Markdown
Contributor Author

Note that the frontend will only look right once the upstream gutenberg PR is merged.

@jasmussen
Copy link
Copy Markdown
Contributor Author

Oh sorry I wrote that comment on the wrong repo 😅

@jasmussen jasmussen merged commit 9b4ef60 into master Nov 1, 2018
@jasmussen jasmussen deleted the fix/rtl-alignments branch November 1, 2018 09:23
daniloercoli added a commit that referenced this pull request Nov 1, 2018
…rnmobile/port-quote-block-step-1

* 'master' of https://github.com/WordPress/gutenberg: (22 commits)
  Add removed periods to block descriptions. (#11367)
  Remove findDOMNode usage from the inserter (#11363)
  Remove deprecated componentWillReceiveProps from TinyMCE component (#11368)
  Create file blocks when dropping multiple files at once (#11297)
  Try avoiding the deprecated findDOMNode API from DropZone Provider (#11168)
  Fix: make meta+A behaviour of selecting all blocks work on safari and firefox. (#8180)
  Remove _wpGutenbergCodeEditorSettings and wp.codeEditor assets (#11342)
  Remove the Cloudflare warning (#11350)
  Image Block: Use source_url for media file link (#11254)
  Enhance styling of nextpage block using the Hr element (#11354)
  Embed block refactor and tidy (#10958)
  Nonce Middleware: Wrap the nonce middleware function into it's own function that isn't regenerated on every API request. (#11347)
  Fix RTL block alignments (#11293)
  RichText: fix buggy enter/delete behaviour (#11287)
  Remove code coverage setup (#11198)
  Parser: Runs all parser implementations against the same tests (#11320)
  Stop trying to autosave when title and classic block content both are empty. (#10404)
  Fix "Mac OS" typo + use fancy quotes consistently (#11310)
  Update documentation link paths (#11324)
  Editor: Reshape blocks state under own key (#11315)
  ...

# Conflicts:
#	gutenberg-mobile
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Internationalization (i18n) Issues or PRs related to internationalization efforts [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants