godaddy-wordpress / primer Goto Github PK

The element above nav-links has margin-bottom: 1.5em and .nav-links only has 1em. They should match 1.5em so there is the same margin above and below

I think it would make logical sense to cache the entire css output, rather than calculating it on the fly for every page load.

We can flush the cache when a customizer value changes and set the cache for the first user.

What do you think?

We need to use consistent naming and code for the hero / custom header area. It's definitely my fault for not being consistent.

1. Decide on a filename / css class to use. hero vs custom header vs site header, etc
2. Ascension uses blockquote, cite, button where as the rest usually just use text + button. We need to make it easy for people to implement this. Should we have a custom widget?

The page builder template's content area should always reach to the edges of the screen, regardless of the layout selected in the Customizer.

A potential pain point for users will be having to scan the preview pane to see what is actually changing when switching fonts. The Secondary Font, for example, might only be changing text that happens to be below the fold, which may be out of view.

Additionally, it will be very difficult (maybe even impossible) for the visually impaired to understand the effects of this setting. They will just have to hope it really is being applied to "Primary" and "Secondary" areas.

An easy way to bring more visibility and a better UX to Font Type controls would be to support short descriptions which can be optionally registered by Child Themes using the primer_font_types filter.

If you change the global Main Text Color, Link Color, Primary Font, etc. those customizations should be visible inside the TinyMCE editor as you edit a page.

See https://developer.wordpress.org/reference/hooks/mce_css/

As discussed in #9 we will need to at least add https://github.com/keithclark/selectivizr and most likely some other changes to support older browsers

https://codex.wordpress.org/Post_Thumbnails

The tertiary sidebar cannot appear dynamically in the Customizer because it is conditionally loaded in the sidebar-tertiary.php template partial on page load.

So if you are using a one- or two-column layout when the Customizer is initially loaded, the tertiary sidebar will not appear upon selecting a three-column layout.

Possible solutions:

A. Always render the sidebar content and show/hide it with CSS.

B. Inject the sidebar into the DOM via the Customizer controls JS.

During some mobile testing noticed this

• .sticky
• .bypostauthor

We could help users a lot by spotting known conflicts or contextual issues and displaying an indicator beside the Customizer control that is affected.

For example, if a Header Image has been set, then changing the Header Background Color control will have no effect in the live preview pane.

A novice user could potentially change this color, wonder why nothing is happening, and only conclude that their site must be broken. To improve this experience we could simply add a special alert icon next to this control, and perhaps a short message to reveal/explain this conflict to the user.

There are a few issues with the navigation

1. It uses min-width and max-width. Ideally it should only use one and since the rest of the site is mobile first lets only use min-width. If we need to both, then it should be limited to only structural changes (floats, displays) but these things can still be achieved with only min-width
2. The javascript on the mobile menu does not work

Many child themes have to add this support themselves, it would be much more convenient if Primer came with a nav menu in the footer.

We need to get Playfair Display and Playfair Display SC added to Primer.

It would be a better UX if users could see an example of the font inside the select dropdown before selecting it.

http://susy.oddbird.net/

I think we can make the assumption that if we are using the default font and color scheme it is already being defined in the style.css so we do not need to output it.

Do you agree?

Rather than having to identify and insert CSS targets for every color and font, there should be an automated way to scan the main stylesheet for a particular rule to find which selectors need to be targeted for new colors.

I made a proof-of-concept: https://gist.github.com/fjarrett/eadafb0d6519a85d70c5b1cb34838ecc

If we do this, we will need to revisit #25 as there is no way we would want to do this on-the-fly for every page load.

I think we should be able to pass an array of font weights for each font type. If it's not provided then that font type would default back to 300, 400, 700.

Do you agree?

Color contrast would be a good example. If you have a background color and you want to have text on top that is light or dark depending on the background color

It would be good to have native support for the Jetpack Featured Content module.

Here is an example implementation from the Ascension theme.

The purpose of the secondary sidebar might be confusing for the users as the default layout doesn't show it.

One way to improve this might be to add a small description on the secondary sidebar explaining when those widgets show up.

• Setup custom colors

https://github.com/godaddy/wp-primer-theme/blob/feature/customizer/inc/customizer.php#L208-L264

• Add elements where color options are affected (color, background color, border color, etc)

https://github.com/godaddy/wp-primer-theme/blob/feature/customizer/inc/customizer.php#L422-L458

• Repeat elements for custom colors outside the color scheme

https://github.com/godaddy/wp-primer-theme/blob/feature/customizer/inc/customizer.php#L509-L515

https://github.com/godaddy/wp-primer-theme/blob/feature/customizer/inc/customizer.php#L538-L544

https://github.com/godaddy/wp-primer-theme/blob/feature/customizer/inc/customizer.php#L538-L544

https://github.com/godaddy/wp-primer-theme/blob/feature/customizer/inc/customizer.php#L610-L616

https://github.com/godaddy/wp-primer-theme/blob/feature/customizer/inc/customizer.php#L639-L645

When a user selects a Color Scheme and then decides to override colors in it, the Scheme name should dynamically change to "- Custom -" to give a visual indication that they have diverged from the actual scheme they originally selected.

It seems all child themes are using their own implementation of get_header_image and get_custom_header. We should bring back the logic into the parent theme.

Continuation of #26

Rather than displaying a radio list of layouts in the Customizer controls, we should use the same UI as the post meta box and use images.

This is a continuation of #12.

As stated by @schrapel in #12 (comment):

If we want to introduce clickable dropdowns for children on mobile we will need to add a <span> in each element with the arrow since before/after is not part of the DOM.

The current experience is overwhelming when you have a lot of nested nav items:

https://docs.woothemes.com/document/third-party-custom-theme-compatibility/

This template calls widgets directly instead of calling the active sidebar and outputs them into the main content region

Currently, users can only pick from a predetermined list of Color Schemes for their theme. A great enhancement would be to allow them to change all the colors in the palette and save it as a custom Color Scheme so they can switch between not only the predetermined schemes, but also their own.

A use-case might be a business that has a custom Color Scheme that matches their brand but they are having a special "Independence Day" promotion and they want to use red, white and blue colors for that week. Currently they would have to write down every color code in their custom Color Scheme in order to switch back easily after the promotion ends.
#42 is related.

Automattic are removing social icons from the latest genericons and separating it out to social logos.

https://github.com/Automattic/social-logos
Automattic/Genericons#98

We need to add other classes where font-family: or font: changes. I think the best thing is a search on the compiled style.css and add the selectors

https://github.com/godaddy/wp-primer-theme/blob/feature/customizer/inc/custom-fonts.php#L118-L120

Rather than having a catch-all section named "Colors" with 10 choices, I think it makes a lot more sense to place color controls in existing sections.

This will make the context of each color abundantly clear to the user and pretty much eliminate the need to do something like #56.

The Storefront theme does this quite nicely:

Along with this idea, I would also propose that Colors be renamed to Color Scheme. At first it will just be a lonely dropdown menu. But eventually this section will be a lot more lively once we implement #62 and possibly #41.

Additionally, the Header Image and Background Image sections, should be renamed to Header and Background, respectively.

Similar to how we now use icons to represent Layouts, I think the same should be done for Color Schemes. WordPress admin color schemes are displayed this way today in user profiles, actually.

Reading a color scheme name from a list is pretty lame.

Seeing them in a beautiful swatch stack is pretty awesome.

Let's be awesome.

Depends on #61.

If Primer registers this sidebar area then child themes wouldn't have to. We will need to propose a design for how this would look in Primer.

I noticed that since #33 was merged the Default layout is no longer pre-selected in the meta box. Also there is some spacing issues between the radio buttons.

Primer is currently using parts of Hybrid Core that have since been deprecated, namely the theme layouts functionality.

These old functions weren't really using a great global namespace either, now everything is prefixed with hybrid_.

We should include the necessary functions and new layout objects from the latest release of the Hybrid Core framework in Primer.

Use postMessage for full_width as well and just toggle the no-max-width class

We only need to add the CSS here for the header and footer

Look at the _layouts.scss in ascension or lyrical to see how .no-max-width works. It can be applied to any element that already has a max-width

There is a post meta template in templates/parts/loop/post-meta.php. This should definitely be added by default to posts. @chriswallace / @fjarrett any others?

If you have a really long Primary Menu with the last item containing children and grandchildren, it's possible for the grandchild flyout menu to be cutoff and overflow outside of the viewable area.

We should add logic to navigation.js to ensure the flyout will appear on the opposite side when it's too close to the browser window's edge.

I feel like "Typography" is really just a hip way to say "Fonts" and is less familiar to the majority of users.

When "default" is selected, the "blue" color scheme is also loaded and overrides the default css.

 * Update colors
 *
 * @action primer_colors
 */
function activation_colors() {
    return array(
                array(
                    'name'    => 'header_textcolor',
                    'default' => '#fff',
                    'css'     => array(
                        '.side-masthead .site-description, .hero-widget, header .main-navigation-container .menu li a, .main-navigation-container .menu li.current-menu-item > a, .main-navigation-container .menu li.current-menu-item > a:hover, .side-masthead .site-title a, .side-masthead .site-title a:hover, .hero-widget h2.widget-title' => array(
                            'color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'background_color',
                    'default' => '#fff',
                ),
                array(
                    'name'    => 'header_backgroundcolor',
                    'label'   => __( 'Header Background Color', 'primer' ),
                    'default' => '#d24343',
                    'css'     => array(
                        '.side-masthead, header .main-navigation-container .menu li.menu-item-has-children:hover > ul, .main-navigation-container, .menu-main-menu-container, .main-navigation, .main-navigation .sub-menu' => array(
                            'background-color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'link_color',
                    'label'   => __( 'Link Color', 'primer' ),
                    'default' => '#3fba73',
                    'css'     => array(
                        'a, a:visited, .entry-footer a, .sticky .entry-title a:before, .footer-widget-area .footer-widget .widget a' => array(
                            'color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'main_text_color',
                    'label'   => __( 'Main Text Color', 'primer' ),
                    'default' => '#212121',
                    'css'     => array(
                        '.site-content, .site-content h1, .site-content h2, .site-content h3, .site-content h4, .site-content h5, .site-content h6, .site-content p, .site-content blockquote, legend' => array(
                            'color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'secondary_text_color',
                    'label'   => __( 'Secondary Text Color', 'primer' ),
                    'default' => '#999999',
                    'css'     => array(
                        '.side-masthead .social-menu a, .entry-meta li, .side-masthead .social-menu a:hover' => array(
                            'color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'button_color',
                    'label'   => __( 'Button Color', 'primer' ),
                    'default' => '#3fba73',
                    'css'     => array(
                        '.cta, button, a.button, a.button:visited, input[type="button"], input[type="reset"], input[type="submit"]:not(.search-submit), a.fl-button' => array(
                            'background-color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'w_text_color',
                    'label'   => __( 'Widget Text Color', 'primer' ),
                    'default' => '#c5c3c6',
                    'css'     => array(
                        '.footer-widget-area, .footer-widget .widget-title, .site-footer, .footer-widget-area .footer-widget .widget, .footer-widget-area .footer-widget .widget-title' => array(
                            'color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'w_background_color',
                    'label'   => __( 'Widget Background Color', 'primer' ),
                    'default' => '#303d4c',
                    'css'     => array(
                        '.site-footer' => array(
                            'background-color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'footer_textcolor',
                    'label'   => __( 'Footer Text Color', 'primer' ),
                    'default' => '#fff',
                    'css'     => array(
                        '.site-info-wrapper a, .site-info .social-menu a' => array(
                            'color' => '%1$s',
                        ),
                    ),
                ),
                array(
                    'name'    => 'footer_backgroundcolor',
                    'label'   => __( 'Footer Background Color', 'primer' ),
                    'default' => '#2c3845',
                    'css'     => array(
                        '.site-info-wrapper, .footer-nav, .site-info-wrapper' => array(
                            'background-color' => '%1$s',
                        ),
                    ),
                ),
            );
}
add_filter( 'primer_colors', 'activation_colors' );



/**
 *
 * Add custom color schemes for Activation theme.
 *
 */
function activation_color_schemes() {
    return array(
        'blue' => array(
            'label'  => esc_html__( 'Blue', 'activation' ),
            'colors' => array(
                'header_textcolor'         => '#ffffff',
                'header_backgroundcolor'   => '#00b0f1',
                'background_color'         => '#ffffff',
                'link_color'               => '#00B0F1',
                'main_text_color'          => '#202223',
                'secondary_text_color'     => '#ffffff',
                'button_color'             => '#97d321',
                'w_text_color'             => '#c5c3c6',
                'w_background_color'       => '#353535',
                'footer_textcolor'         => '#ffffff',
                'footer_backgroundcolor'   => '#212121',

            ),
        ),
    );
}
add_filter( 'primer_color_schemes', 'activation_color_schemes' );```

Overriding layouts should only be allowed when supported templates are in use. For example, the Page Builder template that comes with Primer does not support the Layouts feature.

We should let the user know when this is the case.

There is a lot of excess code in this parent theme that doesn't make much sense to me.

1. Variables are often repeated and there are way too many to make them useful. E.g. in _typography and _variables. It's not clear which ones take priority
2. There is a file called _mixins but a lot of mixins are not actually in the file
3. The grid system uses a structure like .site-header > .site-header-wrapper > .site-header-inner > .site-header-6 + .site-header-6. There is no need a grid system needs to be nested so much