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.

Sign up for GitHub

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

Jump to bottom

Fix custom column width issue #168

Merged
merged 2 commits into from
May 4, 2020
Merged

Fix custom column width issue #168

merged 2 commits into from
May 4, 2020

Conversation

adekbadek
Copy link
Member

All Submissions:

Changes proposed in this Pull Request:

Closes #162

How to test the changes in this Pull Request:

  1. Create a columns block with two columns
  2. Set one of them to a custom width
  3. Send a test email or campaign – columns should have the widths as in the editor

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@adekbadek adekbadek requested a review from jeffersonrabb April 29, 2020 11:15
@jeffersonrabb
Copy link
Contributor

I had a tough time repro-ing the problem on master. Tried a few different column configurations and they seemed to render properly in the emails. Can you give any more guidance on how to make bad things happen?

@jeffersonrabb jeffersonrabb added question Further information is requested and removed [Status] Needs Review labels Apr 30, 2020
@adekbadek
Copy link
Member Author

Here's what I do:

  1. Add columns block, choose two columns "template"
  2. Add a paragraph block in each and give each a background color
  3. Change the width of one of the columns to below 50%

This way the "untouched" column fills the available space in the editor:

image

But in the email, it has 50% width:

image

jeffersonrabb
jeffersonrabb approved these changes May 2, 2020
View reviewed changes
Copy link
Contributor

@jeffersonrabb jeffersonrabb 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. Following your test instructions the full width reference is wider in the emai than the two columns, but I assume this is just padding, not miscalculation of the relative widths?

Screen Shot 2020-05-02 at 5 13 46 PM

@github-actions github-actions bot added the [Status] Approved Ready to merge label May 2, 2020
@adekbadek
Copy link
Member Author

Yes, that's a padding issue – a columns block will its own padding:

image

@adekbadek adekbadek merged commit 2624c48 into master May 4, 2020
@adekbadek adekbadek deleted the fix/custom-columns branch May 4, 2020 09:24
matticbot pushed a commit that referenced this pull request May 5, 2020
@semantic-release-bot
chore(release): 1.0.0 [skip ci]
a46e80c 
# 1.0.0 (2020-05-05)

### Bug Fixes

* add alpha to branches ([d3549f5](d3549f5))
* better docblock description ([f0e592b](f0e592b))
* bring back groups ui ([df2da81](df2da81))
* condition ([4083d80](4083d80))
* crash when editing 'from' fields ([934772a](934772a))
* custom colors ([125f18c](125f18c)), closes [#93](#93)
* default values for keys ([a5164dc](a5164dc)), closes [#97](#97)
* error on data retrieval if no mailchimp campaign is set ([203d64b](203d64b))
* layout preview viewport width ([#84](#84)) ([779b7cf](779b7cf))
* link colour and text-decoration ([#125](#125)) ([29be13d](29be13d))
* missing externallink import, lost in rebase ([e289195](e289195))
* missing import; formatting ([1bf80d4](1bf80d4))
* missing notice after campaign has been sent ([42a0889](42a0889))
* newsletter layouts preview thumbnails ([#175](#175)) ([7280483](7280483))
* posts inserter infinite loop ([42508b0](42508b0)), closes [#146](#146)
* posts inserter no-insertion workflow ([#174](#174)) ([53d8b7c](53d8b7c))
* prevent duplication after insertion in Posts Inserted block ([#191](#191)) ([d4ac6d8](d4ac6d8)), closes [#185](#185)
* prevent fetching data if post is not saved yet ([458c8a1](458c8a1))
* publish button text to send|sending|sent ([6fcbefe](6fcbefe))
* sticky text controls ([81e85a7](81e85a7))
* **email:** fix custom column width issue ([#168](#168)) ([2624c48](2624c48)), closes [#162](#162)
* prevent updating content of a sent campaign ([cce029e](cce029e))
* regression of test email error/success notifications ([55c12fe](55c12fe))
* remove data center prefix from mailchimp url ([c7f741c](c7f741c))
* remove support for background gradients ([#152](#152)) ([f4b1120](f4b1120))
* remove unneeded hr and wrap externallink in a paragraph ([fa9fd68](fa9fd68))
* rename list->audience to reflect mailchimp ([7de6266](7de6266))
* **blocks:** remove wide alignment for group block ([216aa9f](216aa9f)), closes [#153](#153)
* remove unnecessary check ([ce6d767](ce6d767))
* remove unneeded logic ([57c8ec0](57c8ec0))
* **sidebar:** store sender data in post meta ([#110](#110)) ([9dcb9fa](9dcb9fa))
* simplify title of newsletter settings panel ([#95](#95)) ([2897b58](2897b58))
* support for reusable blocks in newsletters ([fdd72ae](fdd72ae))
* **editor:** button block alignment ([0486aef](0486aef)), closes [#55](#55)
* add useEffect hook dependencies ([aee78b9](aee78b9))
* campaign updating logic; save after template insertion ([7ae882a](7ae882a))
* change logo size to medium ([#50](#50)) ([db27e64](db27e64))
* condition ([6f44e03](6f44e03))
* corrected license in package and composer files ([1a2fcd3](1a2fcd3))
* duplicate plugin registration from merge conflict error ([6726994](6726994))
* ensure attribute exists in renderer ([dc6bbc9](dc6bbc9))
* gpl 2.0 license ([41e7738](41e7738))
* grid auto rows ([b9d0841](b9d0841))
* grid on small screens ([a603ebb](a603ebb))
* identical placeholder text for blank template or no template ([7ff325b](7ff325b))
* image size from template ([07bc7ed](07bc7ed))
* include logo image ID in class ([1c7fbd3](1c7fbd3))
* include vendor in release package ([01928b5](01928b5))
* increase mjml request timeout, handle errors ([aa1f3c4](aa1f3c4))
* loading text improvement ([59703cf](59703cf))
* modal content background and preview items since gutenberg 7.9 ([#49](#49)) ([3eb5f1e](3eb5f1e))
* move settings menu item to newspack newsletters menu ([b562a39](b562a39))
* overflow scroll to preview ([cd0289f](cd0289f))
* patterns overflow when screen height is smaller ([e443814](e443814))
* remove group block from template 1 to have focus on sitename ([1cd40ec](1cd40ec))
* remove pointer-events when layout is selected ([3fc35fb](3fc35fb))
* remove todo that has been addressed ([fffbcd2](fffbcd2))
* rename interests to groups ([d8f8802](d8f8802))
* rename labels ([0fd0ac2](0fd0ac2))
* replace SVGs with PNG in social icons folder ([bf79d6f](bf79d6f)), closes [#38](#38)
* resolve error occurring before list selection ([3aae4d4](3aae4d4))
* **template-modal:** prevent modal closing after autosave ([12965c4](12965c4)), closes [#45](#45)
* send content to mailchimp immediately before sending campaign ([0d0bb5a](0d0bb5a))
* template image ([e77d1b0](e77d1b0))
* templates ([a1cb385](a1cb385))
* **validation:** invalid by default ([89ce8a9](89ce8a9))
* settings update api supports individual fields ([cd7b18f](cd7b18f))

### Features

*  remove any other editor modifications ([#8](#8)) ([2cb3f4c](2cb3f4c))
* activation nag ([1cc6f04](1cc6f04))
* add back a single spinner during XHR requests ([3c0d097](3c0d097))
* add class to wrapper when XHR request is in flight ([feb9db6](feb9db6))
* add email validation ([#79](#79)) ([9b1dbb1](9b1dbb1))
* add Posts Inserter block ([#47](#47)) ([f36d8f3](f36d8f3))
* add posts inserter to modal and strip placeholder style ([#98](#98)) ([9fc9f46](9fc9f46))
* add pre-send confirmation ([#181](#181)) ([3579363](3579363)), closes [#139](#139)
* add preview modal ([#59](#59)) ([515f281](515f281))
* add spacer block support ([996cb69](996cb69)), closes [#100](#100)
* adjust style of the settings ([3b94145](3b94145))
* api key ui in modal ([e6f9a6a](e6f9a6a))
* change order of sidebar panels ([405773d](405773d))
* clear notifications before showing success or error ([ab45d60](ab45d60))
* clearer error messages ([b165075](b165075))
* disabled options and empty subscribers info in select ([44cc68f](44cc68f))
* enable selecting specific post ids ([#170](#170)) ([1781d60](1781d60))
* error catching and notification for lists and groups ([8582c04](8582c04))
* error handling in save and publish operations ([eac62c2](eac62c2))
* error notifications for from name/email changes ([887afee](887afee))
* error notifications when retrieving mailchimp data ([ce4fb32](ce4fb32))
* field-level error handling for sender email ([d1bcfaf](d1bcfaf))
* fullscreen modal show the edit-post-fullscreen-mode-close button ([0cc6d5d](0cc6d5d))
* handle campaign fetching in editor plugin ([a7a86e2](a7a86e2))
* handle color palette as it appears in the editor ([#176](#176)) ([862d3cf](862d3cf)), closes [#173](#173)
* handle uninserted Posts Inserter block state ([#127](#127)) ([15b47b2](15b47b2)), closes [#114](#114)
* hoc to handle api requests, notifications ([1be5ada](1be5ada))
* improved permissions ([a564813](a564813))
* list management link ([aa90782](aa90782))
* move preview button to post status slot ([1f450e2](1f450e2))
* move testing panel above layout ([d35b2ad](d35b2ad))
* override publish button ([2786afb](2786afb))
* pass color settings from group and column blocks ([9f8a73e](9f8a73e))
* prevent duplicate posts when multiple Posts Inserter instances ([#167](#167)) ([bbdbc3e](bbdbc3e)), closes [#147](#147)
* remove custom preview button ([#136](#136)) ([d0e3eff](d0e3eff))
* remove post content before changing layout ([f253342](f253342))
* remove spinners, disable submission while fields are empty ([5607807](5607807))
* reorder the sidebar settings ([#56](#56)) ([e9c4630](e9c4630))
* save post before previewing or sending test email ([#108](#108)) ([cc05ed9](cc05ed9)), closes [#25](#25)
* send button support for pending state ([db15bc6](db15bc6))
* separate panel for test email ui ([28a3be5](28a3be5))
* sidebar ui to change template ([4b6da11](4b6da11))
* success/error messages when sending test emails ([1afb952](1afb952))
* support image alignment in Posts Inserter block ([#137](#137)) ([0b1b446](0b1b446)), closes [#128](#128)
* support post scheduling ([db5c5be](db5c5be))
* template picker initial selection improvements ([af1bd2e](af1bd2e))
* throw error for unverified reply-to email ([8ba7906](8ba7906))
* update default layouts ([#192](#192)) ([5415704](5415704))
* update general padding of newsletter to increase white space ([#178](#178)) ([e18064f](e18064f))
* update post inserter placeholder style ([#83](#83)) ([916afa8](916afa8))
* update posts inserter defaults ([#99](#99)) ([05d761f](05d761f))
* update posts inserter preview margins ([#182](#182)) ([7df27cc](7df27cc))
* update style of the layout preview and modal ([05c592f](05c592f))
* update style when settings are in-flight ([fc46333](fc46333))
* update templates ([be014b4](be014b4))
* wrap action buttons around a div for better positioning ([0b28524](0b28524))
* **sidebar:** default values ([d9e0bef](d9e0bef))
* add blank layout ([70d9058](70d9058))
* add new layouts: daily/weekly (no image), breaking news, breaking news (no image), and support ([#48](#48)) ([424b550](424b550))
* add new template ([aa0336f](aa0336f))
* add preview modal ([41c7348](41c7348))
* add template selection modal ([a765ddc](a765ddc))
* adjust layout modal style to be fullscreen ([2378fd0](2378fd0))
* adjust ui if campaign is sent or sending ([69e60d0](69e60d0))
* allow unsetting interest groups ([5498f66](5498f66))
* author newsletters in wordpress ([311de03](311de03))
* block publish and notify for missing sender fields ([a3269a2](a3269a2))
* blocks to MJML conversion ([#5](#5)) ([5a30354](5a30354))
* clear mailchimp campaign id when post is trashed ([47810eb](47810eb))
* custom field to assess template readiness ([5d8b6a3](5d8b6a3))
* delete unsent mailchimp campaigns when cpt trashed ([164009f](164009f))
* disable column alignment ([a16876e](a16876e))
* disable editor styles ([7f592df](7f592df))
* disable gradients for the Newsletter custom post type ([742e141](742e141))
* display modal on new newsletter posts ([1247c59](1247c59))
* display validation errors in pre-publish slot ([92dd7d1](92dd7d1))
* display warnings in editor for unsupported features ([#9](#9)) ([1edd153](1edd153))
* handle campaign validation via post meta field ([58d090d](58d090d))
* handle group block ([#10](#10)) ([eda73d2](eda73d2))
* hide editor preview ui ([37315d0](37315d0))
* hide title, add subject field in sidebar ([33fc00a](33fc00a))
* inputs for test email and sender ([09fa566](09fa566))
* live block preview ([7247383](7247383))
* loading ui in pre publish checklist ([193edcb](193edcb))
* move MJML creds to plugin settings ([06840ad](06840ad)), closes [#16](#16)
* multiple test emails ([8e0b444](8e0b444))
* placeholder text for no template or blank template ([6bbfcfe](6bbfcfe))
* placeholder text for no template or blank template ([a378b54](a378b54))
* publish button state, pre-publish message ([eb6ed6f](eb6ed6f))
* remove any other editor modifications ([946bc04](946bc04))
* remove image and use blockpreview instead ([dd0e489](dd0e489))
* remove is_ready meta ([1866393](1866393))
* remove send btn, sender name/email from campaign ([397f41f](397f41f))
* Remove Unsupported Features From Core Blocks ([2184d1f](2184d1f))
* remove unsupported features of core blocks ([69a0f10](69a0f10))
* reorganize folders and remove images ([c2e643c](c2e643c))
* save/publish flow ([757162c](757162c))
* select mailchimp interests ([59f0643](59f0643))
* select to display mailchimp interests (groups) ([48d1366](48d1366))
* sender name/email updating ([85ac847](85ac847))
* sidebar subject input ([321f047](321f047))
* template insertion ([452c48b](452c48b))
* template selection modal - display regardless of side panel status ([9656712](9656712))
* token replace function, logo or sitename token ([0bc8875](0bc8875))
* update campagin on save, send campaign on publish ([c316923](c316923))
* update display of patterns using grid ([6e04641](6e04641))
* update menu icon to material's alternate_email ([#6](#6)) ([f8ecaa4](f8ecaa4))
* update pre-check with notice and reorganize sidebar ([#42](#42)) ([ad9b6c1](ad9b6c1))
* update settings description to match MJML api email ([#46](#46)) ([df826c7](df826c7))
* use current date as default title ([32ce655](32ce655))
* warn about nested groups ([43fb115](43fb115))
* **template:** thumbnail logo size ([65eba93](65eba93))
* wrap modal content around its own div ([6cf6c3b](6cf6c3b))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jeffersonrabb jeffersonrabb jeffersonrabb approved these changes

Assignees
No one assigned
Labels
question Further information is requested released [Status] Approved Ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Custom column width
3 participants
@adekbadek @jeffersonrabb @matticbot