Link and button styles

[joshdarby]

Changes

This pull request makes the following changes:

• Adds basic styling for inline links, basic links and default black and green buttons

Basic links:

Inline links:

Buttons:

Why

For #9

Testing/Questions

Features that this PR affects:

• Inline links
• All other .entry-content a links
• Buttons

Questions that need to be answered before merging:

• [x] Is this PR targeting the correct branch in this repository?
• [ ] #9 was meant to style as many links and button types as possible, but I think only inline links and the default black/green buttons (what's in this PR currently) are possible right now due to nothing else being built out. @benlk do you see anything else in the interactions design that could be styled right now?

Steps to test this PR:

1. View a post with an inline link and verify it looks ok
2. Add test buttons somewhere on the site with .btn and .btn-green classes and make sure they match the designs

[benlk]

How did you add those buttons to the post content? This is what I see when using Button Blocks in Gutenberg:

First button has class btn, second has btn btn-primary, third has btn btn-green, final has no classes added via the block's Additional Classes option but adds the green color as the background from the color picker.

[joshdarby]

@benlk I should have clarified better. I was just creating buttons in the content with <div class="btn">Test Button</div> html. I didn't try it out with the button block because I didn't want to modify it since we will have our color picker palette available for it.

My thought process was the btn class that is styled in this PR would be for actual hardcoded buttons in templates

[benlk]

(ignore previous screenshot for btn btn-green as it wasn't using those classes on the button labeled as such, but notice the changed standard Button block. Screenshots in this comment have been updated to fix that.)

Something's wrong with the styles for the block color picker, because the background-color for .wp-block-button__link is overriding the .has-green-background-color.

Changing this line:

https://github.com/INN/umbrella-sfpublicpress/blob/f226a7777d3a0259f4967a921fc9cb5d23cff90f/wp-content/themes/sfpublicpress/inc/block-color-palette.php#L115

to

add_action( 'wp_head', 'sfpublicpress_block_colors_styles', 10 );

solves the problem of the background color for the Button Block:

Should this PR also set the fonts and border-radius and padding for the Button Block?

[benlk]

Apparently we shouldn't be using wp_print_styles at all: https://make.wordpress.org/core/2011/12/12/use-wp_enqueue_scripts-not-wp_print_styles-to-enqueue-scripts-and-styles-for-the-frontend/

[joshdarby]

Apparently we shouldn't be using wp_print_styles at all:

Well that's good to know. Updated in https://github.com/INN/umbrella-sfpublicpress/pull/41/commits/bfe895250f8a6a1afbe2d9c6cbd2bed763a6fc2f

[joshdarby]

https://github.com/INN/umbrella-sfpublicpress/pull/41/commits/72ed1ed20bcba66e2b2312f4f88d9087a38f79d9 moves the color styling for a elements under body instead of .entry-content a so that the text color selector for the button block works as expected.