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

Add layout styling settings handling #238

Merged
merged 3 commits into from
Jun 26, 2020
Merged

Conversation

adekbadek
Copy link
Member

All Submissions:

Changes proposed in this Pull Request:

Adds handling of custom styling (fonts, background color) to layouts.

Closes #225.

How to test the changes in this Pull Request:

  1. Create a newsletter, set custom styling, save as layout
  2. Observe that the layout preview updated in the sidebar Layout tab accordingly
  3. Create a new newsletter, observe the custom styles applied in layout previews (in layout chooser and big preview)
  4. Choose a custom-styled layout, update styles, update layout – observe the layout is updated in the sidebar preview
  5. Observe the layout is updated in the layout picker when creating new newsletter

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?

Copy link
Contributor

@dkoo dkoo left a comment

Choose a reason for hiding this comment

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

@adekbadek Tested according to the test instructions, and all works as expected. Just left one question about what seems to be an unnecessary complexity to me. If you disagree, then I'll approve.

import './style.scss';

const NewsletterPreview = ( { meta = {}, ...props } ) => {
const ELEMENT_ID = useMemo( () => `preview-${ Math.round( Math.random() * 1000 ) }`, [] );
Copy link
Contributor

Choose a reason for hiding this comment

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

@adekbadek This is a neat solution to create randomized IDs, but would it be simpler to pass the usedLayout.ID as a prop to <NewsletterPreview />? We wouldn't need a memoization then, either.

Copy link
Member Author

Choose a reason for hiding this comment

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

Good idea, but the id will not be unique if there are two previews of the same layout visible at once ;)
This situation happens in layout selection modal – there's the little preview in the left column, and the large preview in the right column.

Copy link
Contributor

Choose a reason for hiding this comment

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

I get it now, thanks for explaining. Looks good to me, then!

@adekbadek adekbadek merged commit 2ba844d into master Jun 26, 2020
@adekbadek adekbadek deleted the add/layouts-styling-settings branch June 26, 2020 17:31
matticbot pushed a commit that referenced this pull request Jun 30, 2020
# [1.3.0](v1.2.0...v1.3.0) (2020-06-30)

### Bug Fixes

* apply custom styles even if styling tab in sidebar is closed ([#240](#240)) ([20b08bc](20b08bc))
* localize date formats and notice text ([0cb82f1](0cb82f1))
* posts-inserter columns warning ([5db6b97](5db6b97))
* store translated success note as prop ([5638aee](5638aee))

### Features

* add "sent" status to posts list in dashboard ([ed369e4](ed369e4))
* add a "sent" editor notice after a campaign has been sent ([188908e](188908e))
* column middle alignment handling ([5f82db4](5f82db4)), closes [#231](#231)
* handle custom styling of layouts ([#238](#238)) ([2ba844d](2ba844d)), closes [#225](#225)
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.3.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
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Handle styling settings in layouts
3 participants