From 8bec874bddd7dbdc158ab8c5c0e2edc8fc00b3b7 Mon Sep 17 00:00:00 2001 From: Ajay D'Souza Date: Sun, 6 Aug 2023 20:40:32 +0100 Subject: [PATCH] New styles: Card and Left Thumbs Fixes #9 --- includes/admin/class-admin.php | 49 +++++++++ includes/class-main.php | 10 ++ includes/css/card.css | 61 ++++++++++++ includes/css/card.min.css | 1 + includes/css/left-thumbs.css | 80 +++++++++++++++ includes/css/left-thumbs.min.css | 1 + includes/frontend/class-display.php | 29 ++++-- includes/frontend/class-styles-handler.php | 99 +++++++++++++++++++ .../frontend/widgets/class-authors-widget.php | 2 +- phpstan-baseline.neon | 10 ++ 10 files changed, 334 insertions(+), 8 deletions(-) create mode 100644 includes/css/card.css create mode 100644 includes/css/card.min.css create mode 100644 includes/css/left-thumbs.css create mode 100644 includes/css/left-thumbs.min.css create mode 100644 includes/frontend/class-styles-handler.php diff --git a/includes/admin/class-admin.php b/includes/admin/class-admin.php index acee110..eef96e6 100644 --- a/includes/admin/class-admin.php +++ b/includes/admin/class-admin.php @@ -184,9 +184,58 @@ public static function settings_popular_authors( $settings ) { 'type' => 'text', 'options' => '', ), + 'wzpa_styles_desc' => array( + 'id' => 'wzpa_styles_desc', + 'name' => '

' . esc_html__( 'Styles', 'popular-authors' ) . '

', + 'desc' => '', + 'type' => 'descriptive_text', + ), + 'wzpa_styles' => array( + 'id' => 'wzpa_styles', + 'name' => esc_html__( 'Popular Authors style', 'top-10' ), + 'desc' => '', + 'type' => 'radiodesc', + 'default' => 'no_style', + 'options' => self::get_styles(), + ), ), ); return array_merge( $settings, $new_settings ); } + + /** + * Get the various styles. + * + * @since 1.2.0 + * @return array Style options. + */ + public static function get_styles() { + $styles = array( + array( + 'id' => 'no_style', + 'name' => esc_html__( 'No styles', 'top-10' ), + 'description' => esc_html__( 'Select this option if you plan to add your own styles', 'top-10' ), + ), + array( + 'id' => 'card', + 'name' => esc_html__( 'Card Layout', 'top-10' ), + 'description' => esc_html__( 'Display the popular authors in a card layout using CSS grid', 'top-10' ), + ), + array( + 'id' => 'left_thumbs', + 'name' => esc_html__( 'Left Thumbs', 'top-10' ), + 'description' => esc_html__( 'Display the popular authors in a grid with the image to the left of the text', 'top-10' ), + ), + ); + + /** + * Filter the array containing the types of styles to add your own. + * + * @since 2.5.0 + * + * @param array $styles Different styles. + */ + return apply_filters( 'wzpa_get_styles', $styles ); + } } diff --git a/includes/class-main.php b/includes/class-main.php index ce99fcf..96d961e 100644 --- a/includes/class-main.php +++ b/includes/class-main.php @@ -51,6 +51,15 @@ final class Main { */ public $blocks; + /** + * Styles. + * + * @since 1.2.0 + * + * @var object Styles. + */ + public $styles; + /** * Gets the instance of the class. * @@ -84,6 +93,7 @@ private function __construct() { private function init() { $this->shortcodes = new Frontend\Shortcodes(); $this->blocks = new Frontend\Blocks\Blocks(); + $this->styles = new Frontend\Styles_Handler(); $this->hooks(); diff --git a/includes/css/card.css b/includes/css/card.css new file mode 100644 index 0000000..884b09d --- /dev/null +++ b/includes/css/card.css @@ -0,0 +1,61 @@ +.wzpa-card { + --wzpa-font-family: inherit; + --wzpa-margin: 0; + --wzpa-min-column-width: 96px; + --wzpa-max-column-width: max-content; + --wzpa-grid-gap: 10px; + --wzpa-li-border-color: #cccccc; + --wzpa-li-background-color: #f0f0f0; + --wzpa-li-border-radius: 10px; + --wzpa-li-font-size: 1rem; + --wzpa-li-hover-color: #e0e0e0; + --wzpa-li-hover-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + --wzpa-link-color: #333333; + --wzpa-link-hover-color: #000000; + --wzpa-author-img-radius: 50%; +} + +.wzpa_authors.wzpa-card { + font-family: var(--wzpa-font-family); + margin: var(--wzpa-margin); +} + +.wzpa_authors.wzpa-card ul { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--wzpa-min-column-width), var(--wzpa-max-column-width))); + grid-gap: var(--wzpa-grid-gap); + align-items: stretch; + list-style: none; + padding: 0; +} + +.wzpa_authors.wzpa-card li { + display: flex; + flex-direction: column; + border: 1px solid var(--wzpa-li-border-color); + padding: 10px; + border-radius: var(--wzpa-li-border-radius); + background-color: var(--wzpa-li-background-color); + text-align: center; + font-size: var(--wzpa-li-font-size); +} + +.wzpa_authors.wzpa-card li:hover { + background-color: var(--wzpa-li-hover-color); + box-shadow: var(--wzpa-li-hover-shadow); +} + +.wzpa_authors.wzpa-card a { + color: var(--wzpa-link-color); + text-decoration: none; + font-weight: bold; +} + +.wzpa_authors.wzpa-card a:hover { + color: var(--wzpa-link-hover-color); +} + +.wzpa_authors.wzpa-card img { + align-self: center; + border-radius: var(--wzpa-author-img-radius); +} \ No newline at end of file diff --git a/includes/css/card.min.css b/includes/css/card.min.css new file mode 100644 index 0000000..db1cb58 --- /dev/null +++ b/includes/css/card.min.css @@ -0,0 +1 @@ +.wzpa-card{--wzpa-font-family:inherit;--wzpa-margin:0;--wzpa-min-column-width:96px;--wzpa-max-column-width:max-content;--wzpa-grid-gap:10px;--wzpa-li-border-color:#cccccc;--wzpa-li-background-color:#f0f0f0;--wzpa-li-border-radius:10px;--wzpa-li-font-size:1rem;--wzpa-li-hover-color:#e0e0e0;--wzpa-li-hover-shadow:0 0 10px rgba(0,0,0,.1);--wzpa-link-color:#333333;--wzpa-link-hover-color:#000000;--wzpa-author-img-radius:50%;}.wzpa_authors.wzpa-card{font-family:var(--wzpa-font-family);margin:var(--wzpa-margin);}.wzpa_authors.wzpa-card ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--wzpa-min-column-width),var(--wzpa-max-column-width)));grid-gap:var(--wzpa-grid-gap);align-items:stretch;list-style:none;padding:0;}.wzpa_authors.wzpa-card li{display:flex;flex-direction:column;border:1px solid var(--wzpa-li-border-color);padding:10px;border-radius:var(--wzpa-li-border-radius);background-color:var(--wzpa-li-background-color);text-align:center;font-size:var(--wzpa-li-font-size);}.wzpa_authors.wzpa-card li:hover{background-color:var(--wzpa-li-hover-color);box-shadow:var(--wzpa-li-hover-shadow);}.wzpa_authors.wzpa-card a{color:var(--wzpa-link-color);text-decoration:none;font-weight:bold;}.wzpa_authors.wzpa-card a:hover{color:var(--wzpa-link-hover-color);}.wzpa_authors.wzpa-card img{align-self:center;border-radius:var(--wzpa-author-img-radius);} \ No newline at end of file diff --git a/includes/css/left-thumbs.css b/includes/css/left-thumbs.css new file mode 100644 index 0000000..627caae --- /dev/null +++ b/includes/css/left-thumbs.css @@ -0,0 +1,80 @@ +.wzpa-left-thumbs { + --wzpa-font-family: inherit; + --wzpa-margin: 0; + --wzpa-min-column-width: 96px; + --wzpa-max-column-width: 1fr; + --wzpa-grid-gap: 10px; + --wzpa-li-border-color: inherit; + --wzpa-li-background-color: inherit; + --wzpa-li-border-radius: 10px; + --wzpa-li-font-size: 1rem; + --wzpa-li-hover-color: #e0e0e0; + --wzpa-li-hover-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + --wzpa-link-color: #333333; + --wzpa-link-hover-color: #000000; + --wzpa-author-img-radius: 50%; +} + +.wzpa_authors.wzpa-left-thumbs { + font-family: var(--wzpa-font-family); + margin: var(--wzpa-margin); + container: wzpaLeftThumbs / inline-size; +} + +.wzpa_authors.wzpa-left-thumbs ul { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--wzpa-min-column-width), var(--wzpa-max-column-width))); + grid-gap: var(--wzpa-grid-gap); + grid-auto-rows: 1fr; + list-style: none; + padding: 0; +} + +.wzpa_authors.wzpa-left-thumbs li { + display: flex; + border: 1px solid var(--wzpa-li-border-color); + padding: 10px; + border-radius: var(--wzpa-li-border-radius); + background-color: var(--wzpa-li-background-color); + font-size: var(--wzpa-li-font-size); + align-items: start; + justify-content: start; +} + +.wzpa_authors.wzpa-left-thumbs li:hover { + background-color: var(--wzpa-li-hover-color); + box-shadow: var(--wzpa-li-hover-shadow); +} + +.wzpa_authors.wzpa-left-thumbs a { + color: var(--wzpa-link-color); + text-decoration: none; + font-weight: bold; +} + +.wzpa_authors.wzpa-left-thumbs a:hover { + color: var(--wzpa-link-hover-color); +} + +.wzpa_authors.wzpa-left-thumbs img { + align-self: center; + border-radius: var(--wzpa-author-img-radius); +} + +@container wzpaLeftThumbs (width < 400px) { + .wzpa_authors.wzpa-left-thumbs li { + flex-direction: column; + text-align: center; + align-items: center; + } +} + +@container wzpaLeftThumbs (width >=400px) { + .wzpa_authors.wzpa-left-thumbs ul { + grid-template-columns: repeat(auto-fit, minmax(var(--wzpa-min-column-width), max-content)); + } + + .wzpa_authors.wzpa-left-thumbs li { + flex-direction: row; + } +} \ No newline at end of file diff --git a/includes/css/left-thumbs.min.css b/includes/css/left-thumbs.min.css new file mode 100644 index 0000000..4acd075 --- /dev/null +++ b/includes/css/left-thumbs.min.css @@ -0,0 +1 @@ +.wzpa-left-thumbs{--wzpa-font-family:inherit;--wzpa-margin:0;--wzpa-min-column-width:96px;--wzpa-max-column-width:1fr;--wzpa-grid-gap:10px;--wzpa-li-border-color:inherit;--wzpa-li-background-color:inherit;--wzpa-li-border-radius:10px;--wzpa-li-font-size:1rem;--wzpa-li-hover-color:#e0e0e0;--wzpa-li-hover-shadow:0 0 10px rgba(0,0,0,.1);--wzpa-link-color:#333333;--wzpa-link-hover-color:#000000;--wzpa-author-img-radius:50%;}.wzpa_authors.wzpa-left-thumbs{font-family:var(--wzpa-font-family);margin:var(--wzpa-margin);container:wzpaLeftThumbs / inline-size;}.wzpa_authors.wzpa-left-thumbs ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--wzpa-min-column-width),var(--wzpa-max-column-width)));grid-gap:var(--wzpa-grid-gap);grid-auto-rows:1fr;list-style:none;padding:0;}.wzpa_authors.wzpa-left-thumbs li{display:flex;border:1px solid var(--wzpa-li-border-color);padding:10px;border-radius:var(--wzpa-li-border-radius);background-color:var(--wzpa-li-background-color);font-size:var(--wzpa-li-font-size);align-items:start;justify-content:start;}.wzpa_authors.wzpa-left-thumbs li:hover{background-color:var(--wzpa-li-hover-color);box-shadow:var(--wzpa-li-hover-shadow);}.wzpa_authors.wzpa-left-thumbs a{color:var(--wzpa-link-color);text-decoration:none;font-weight:bold;}.wzpa_authors.wzpa-left-thumbs a:hover{color:var(--wzpa-link-hover-color);}.wzpa_authors.wzpa-left-thumbs img{align-self:center;border-radius:var(--wzpa-author-img-radius);}@container wzpaLeftThumbs (width < 400px){.wzpa_authors.wzpa-left-thumbs li{flex-direction:column;text-align:center;align-items:center}}@container wzpaLeftThumbs (width>=400px){.wzpa_authors.wzpa-left-thumbs ul{grid-template-columns:repeat(auto-fit,minmax(var(--wzpa-min-column-width),max-content))}.wzpa_authors.wzpa-left-thumbs li{flex-direction:row}} \ No newline at end of file diff --git a/includes/frontend/class-display.php b/includes/frontend/class-display.php index 908dd5b..d3ef660 100644 --- a/includes/frontend/class-display.php +++ b/includes/frontend/class-display.php @@ -21,7 +21,7 @@ class Display { /** * Constructor class. * - * @since 3.3.0 + * @since 1.2.0 */ public function __construct() { } @@ -45,6 +45,7 @@ public static function list_popular_authors( $args = array() ) { 'is_shortcode' => false, 'is_block' => false, 'instance_id' => 1, + 'extra_class' => '', ); $defaults = array_merge( $defaults, self::list_popular_authors_args() ); @@ -86,11 +87,17 @@ public static function list_popular_authors( $args = array() ) { $post_counts[ $row->post_author ] = $row->count; } - $post_classes[] = $args['daily'] ? 'wzpa_authors_daily ' : 'wzpa_authors '; - $post_classes[] = $args['is_widget'] ? ' wzpa_authors_widget wzpa_authors_widget' . $args['instance_id'] : ''; - $post_classes[] = $args['is_shortcode'] ? ' wzpa_authors_shortcode' : ''; - $post_classes[] = $args['is_block'] ? ' wzpa_authors_block' : ''; + $style_array = Styles_Handler::get_style( $args['styles'] ); + $post_classes = array( + 'main' => 'wzpa_authors', + 'daily' => $args['daily'] ? 'wzpa_authors ' : '', + 'widget' => $args['is_widget'] ? 'wzpa_authors_widget wzpa_authors_widget' . $args['instance_id'] : '', + 'shortcode' => $args['is_shortcode'] ? 'wzpa_authors_shortcode' : '', + 'block' => $args['is_block'] ? 'wzpa_authors_block' : '', + 'extra_class' => $args['extra_class'], + 'style' => ! empty( $style_array['name'] ) ? 'wzpa-' . $style_array['name'] : '', + ); $post_classes = join( ' ', $post_classes ); /** @@ -140,7 +147,8 @@ public static function list_popular_authors( $args = array() ) { $output .= self::get_avatar( $author ); } - $link = sprintf( + $link = ''; + $link .= sprintf( '%3$s', get_author_posts_url( $author->ID, $author->user_nicename ), /* translators: %s: Author's display name. */ @@ -149,8 +157,12 @@ public static function list_popular_authors( $args = array() ) { ); if ( $args['optioncount'] ) { - $link .= ' (' . number_format_i18n( $views ) . ')'; + $link .= sprintf( + ' (%1$s)', + number_format_i18n( $views ) + ); } + $link .= ''; $output .= $link; $output .= $args['after_list_item']; @@ -436,6 +448,7 @@ public static function list_popular_authors_args( $args = array() ) { 'after_list' => '', 'before_list_item' => '
  • ', 'after_list_item' => '
    • ', + 'styles' => '', ); if ( function_exists( 'tptn_get_settings' ) ) { @@ -444,6 +457,8 @@ public static function list_popular_authors_args( $args = array() ) { foreach ( $defaults as $option => $value ) { if ( isset( $tptn_settings[ "wzpa_{$option}" ] ) ) { $defaults[ $option ] = $tptn_settings[ "wzpa_{$option}" ]; + } else { + $defaults[ $option ] = \tptn_get_default_option( "wzpa_{$option}" ); } } } diff --git a/includes/frontend/class-styles-handler.php b/includes/frontend/class-styles-handler.php new file mode 100644 index 0000000..0316010 --- /dev/null +++ b/includes/frontend/class-styles-handler.php @@ -0,0 +1,99 @@ + 1, - 'instance_id' => $this->number, + 'instance_id' => $args['widget_id'], 'number' => $number, 'offset' => $offset, 'daily' => $daily, diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon index a5af30c..4fe98d5 100644 --- a/phpstan-baseline.neon +++ b/phpstan-baseline.neon @@ -20,6 +20,11 @@ parameters: count: 1 path: includes/frontend/class-display.php + - + message: "#^Function tptn_get_default_option not found\\.$#" + count: 1 + path: includes/frontend/class-display.php + - message: "#^Function tptn_get_option not found\\.$#" count: 1 @@ -35,6 +40,11 @@ parameters: count: 1 path: includes/frontend/class-display.php + - + message: "#^Function tptn_get_option not found\\.$#" + count: 1 + path: includes/frontend/class-styles-handler.php + - message: "#^Method WebberZone\\\\Popular_Authors\\\\Frontend\\\\Widgets\\\\Authors_Widget\\:\\:form\\(\\) should return string but return statement is missing\\.$#" count: 1