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

See #284 #351

Merged
merged 74 commits into from Sep 21, 2019

Conversation

@aristath
Copy link
Contributor

commented Sep 18, 2019

This addresses #284. Not to be merged yet, this is a proof of concept. What it does: (see screencast below)

demo2

The implementation here replaces the PHP class that was already added in #249 and that is no longer needed, if this get merged (after we tweak it) then the other class can be removed.

I'll leave comments in the code so we can review things and decide what to do.

For now I only did this for the content area but the code can handle as many areas as we want, so it can different for the header, footer, overlays etc.

@ianbelanger79

This comment has been minimized.

Copy link
Contributor

commented Sep 18, 2019

This is awesome!!! Can't wait to merge the final product

Copy link
Contributor Author

left a comment

The filenames I chose will have to be changed too, I deliberately chose the wrong filenames to avoid conflicts with any other PRs that may get merged before this one.
The files should be called customize-preview.js and customize-controls.js.
If we decide to merge this PR then we can move the contents of the wrong filenames to the correct ones (or just rename them if they don't exist 'till then).

assets/js/color.js Outdated Show resolved Hide resolved
assets/js/color.js Outdated Show resolved Hide resolved
assets/js/customizer-preview.js Outdated Show resolved Hide resolved
assets/js/customizer.js Outdated Show resolved Hide resolved
assets/js/customizer.js Outdated Show resolved Hide resolved
assets/js/customizer.js Outdated Show resolved Hide resolved
classes/class-twentytwenty-customize.php Outdated Show resolved Hide resolved
classes/class-twentytwenty-customize.php Outdated Show resolved Hide resolved
functions.php Outdated Show resolved Hide resolved
functions.php Outdated Show resolved Hide resolved
assets/js/color.js Outdated Show resolved Hide resolved
@pattonwebz pattonwebz added the WIP label Sep 18, 2019
@pattonwebz

This comment has been minimized.

Copy link
Member

commented Sep 18, 2019

This really is a very cool control to play with. We will need to come up with some good inline help text to accompany it so that users understand how it works but I like this a lot.

We can look at doing a little code cleanup and rearranging once we have had a few people test this.

Here is another gif example of it in action going from one extreme of the color selector to the other

Peek 2019-09-18 21-44

@aristath

This comment has been minimized.

Copy link
Contributor Author

commented Sep 18, 2019

Oh, and an additional note. If this gets merged we should change the grays. Instead of doing this:

.post-meta {
    color: #6d6d6d;
}

we should be doing this:

.post-meta {
    color: currentColor;
    opacity: .7; /* or whatever value produces the same result. */
}

That way no colors will be hardcoded and instead they'll also change along with the textcolor.

@celloexpressions

This comment has been minimized.

Copy link

commented Sep 19, 2019

Great first pass - I'll look through the code and comment over the next day or so. For grays, we need to consider: #dcd7ca - borders and #6d6d6d - secondary text, as I noted in #284. All text, borders, icons, etc. should be updated as needed. We will likely need to reduce the relative difference between primary and secondary colors to maintain some contrast with the background color (maybe target 3:1 minimum instead of 4.5:1?).

The complete CSS "template" for colors should be built by starting with all of style.css and stripping it down to just the colors. This needs to happen once style.css is as stable as possible; all future changes to selectors with colors will also need to be synced to the JS template.

The template is currently structured with arrays of selectors and other information. We may want to consider formatting it to look more like regular CSS for ease of updating. This could look similar to JS-templated customize controls (example).

@aristath

This comment has been minimized.

Copy link
Contributor Author

commented Sep 19, 2019

If the array of elements is kept in PHP we only need to maintain it in 1 place. It can be passed-on the the JS file as a var

@acosmin

This comment has been minimized.

Copy link
Contributor

commented Sep 19, 2019

Looks like a winner, I'm gonna go ahead and close my PRs.

For the generated CSS, maybe you guys can do something like #304 and make them filterable.

aristath added 13 commits Sep 21, 2019
@aristath

This comment has been minimized.

Copy link
Contributor Author

commented Sep 21, 2019

@celloexpressions thank you for all the suggestions, they really made this implementation a lot better, I wouldn't have thought of some of these things without you. 🥇

aristath added 5 commits Sep 21, 2019
@ianbelanger79

This comment has been minimized.

Copy link
Contributor

commented Sep 21, 2019

@aristath We just merged eslint into master and there are now a few errors/warning that need to be fixed, after that we will merge this

aristath and others added 2 commits Sep 21, 2019
@aristath

This comment has been minimized.

Copy link
Contributor Author

commented Sep 21, 2019

@ianbelanger79 I was already working on fixing them. Pushed a commit just now, should fix any and all issues. We'll know in a few minutes 👍

@ianbelanger79

This comment has been minimized.

Copy link
Contributor

commented Sep 21, 2019

Awesome, after travis passes, this will be getting merged.

Copy link
Contributor

left a comment

This is awesome!! Time to merge it

@ianbelanger79 ianbelanger79 merged commit 049e8fe into WordPress:master Sep 21, 2019
1 check passed
1 check passed
Travis CI - Pull Request Build Passed
Details
@aristath

This comment has been minimized.

Copy link
Contributor Author

commented Sep 21, 2019

Yay!!!! ❤️ 🎉
Thank you for merging this

@ianbelanger79

This comment has been minimized.

Copy link
Contributor

commented Sep 21, 2019

Thanks for all of your work on this @aristath and @celloexpressions. This is going to make Twenty Twenty a much better and more accessible theme.

@celloexpressions

This comment has been minimized.

Copy link

commented Sep 21, 2019

Thanks for all of your hard work on this @aristath! This will be a great feature to use. I'll take a look through what was merged this weekend an make any comments on #284 or a new issue for any adjustments to make during beta.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.