WP Style Tiles POC

I think I’m near the end of the proof of concept phase for WP Style Tiles. At this stage, the plugin isn’t pretty, but it is functional, which is the whole point of a proof of concept. 🙂

Here’s a run down of what needs to be addressed as we move out of the POC phase:

Remove CPT UI dependency

If you look at the code for WP Style Tiles, you can see I have the code for the Style Tile CPT already included, but it’s commented out because I was having trouble with one of my Vagrant sites, and it was working weirdly. This should hopefully be a quick, easy thing to fix.

Remove dependency on Advanced Custom Fields Pro; move to CMB2

A few things I love about ACF include the interface for creating the metaboxes, the ability to create repeating elements, and the ability to create flexible content elements. However, the later two are only included in the Pro version, which cannot be included in an open source plugin (and currently, I’m using it as an outside dependency). In the next phase, I’d like to move toward utilizing CMB2 for the metaboxes because it is open source, and can be included in a freely distributed plugin.

Add remaining UI elements

Two user interface elements that I think would be super handy for a Style Tile are buttons (truly interactive ones that change colors, etc. on hover) and icons.

Find a better way to deal with fonts

Again, I have another dependency on a plugin (ACF Google Font selector), which provides a neat drop-down for Google Fonts, but doesn’t seem to enqueue on the front end correctly, and seems a bit overkill. And, what if I want to use a Typekit font (which, incidentally, is what I’m doing here)? I think having a radio to select whether you want to use a Google Font and showing the drop-down conditionally is a better idea. Or maybe just eliminate Google Fonts altogether and just have the designer enter the font they want to use, and write custom CSS. I dunno, but this point definitely needs more consideration.

General code clean up

My plugin is adding a lot of inline styling, and it’s looking rather ugly. Example:

<p class="wpst-type-paragraph" style="font-family: <?php echo esc_attr( $font['font'] ); ?>; font-size: <?php echo esc_attr( $size ); ?>px;"><a href="#" class="wpst-type-link" style="color: <?php echo esc_attr( $a_color ) ?>; text-decoration: <?php echo esc_attr( $text_decoration ); ?>; border: <?php echo esc_attr( $text_decoration ); ?>; box-shadow: <?php echo esc_attr( $text_decoration ); ?>;" onmouseover="this.style.color='<?php echo esc_js( $a_hover_color ); ?>'" onmouseout="this.style.color='<?php echo esc_js( $a_color ); ?>'">Click here for more information.</a></p>

Can you even tell that’s supposed to be a link? I think I have a pretty decent solution, which is to try hooking into wp_head and outputting the styles in <style> tags.

Improve front-end experience of the Custom CSS

I added what I think is really neat functionality to add custom CSS to a each style tile on a post-by-post basis. Visibility is currently limited to admins (so if you look at a sample tile now, you won’t see it), so no need to worry about some random dude adding malicious things to your tile.

The best part about the Custom CSS is that there is an event listener on the input box which updates the selectors that are being modified in real time. That way, you can see what your changes will look like before you save them to the post.

The main thing I want to improve here is add a fixed toggle in the approximate current location of the Custom CSS input box, and add a toggle to close the box, so it’s more like a fixed modal.

Add comment support

The entire point of WP Style Tiles is to enable collaboration between designers, developers, and clients, which to me means making sure comments are enabled on these posts by default so you as a client can tell me what you do or do not like about a style tile I’ve assembled, or I can dive deeper into what you’re thinking with your comments.

Improve CSS generally

I’m trying really hard to keep WP Style Tiles lean on CSS, but I do think there are layout considerations I need to make. In the original Style Tiles PSD template by Samantha Toy Warren, the type is grouped together on one side of the tile, while the visual elements are grouped together on the other. This allows the viewer to get a better sense of what’s going on at a glance, whereas now, a user needs to scroll through the Style Tile post and figure out how the items relate.

Give proper credits

Naturally, this project wouldn’t have come about if it wasn’t for the brilliant work that Samantha Toy Warren has done on the original Style Tiles project. She’s definitely getting a huge shoutout in my plugins readme.

Alright, time to get back to work!