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