From 04ad8a76b2789c744b806d45b05b1406ac26ed35 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Sat, 10 Aug 2019 17:03:24 +0300 Subject: [PATCH 1/5] WIP - still has a long way to go --- inc/classes/Customizer.php | 1 + inc/customizer/content.php | 318 +++++++++++++++++++++ inc/templates/single-post-content-grid.php | 49 ++++ 3 files changed, 368 insertions(+) create mode 100644 inc/customizer/content.php create mode 100644 inc/templates/single-post-content-grid.php diff --git a/inc/classes/Customizer.php b/inc/classes/Customizer.php index 298a23f..0fb1342 100644 --- a/inc/classes/Customizer.php +++ b/inc/classes/Customizer.php @@ -43,6 +43,7 @@ public function __construct() { public function include_files() { require_once GRIDD_PLUS_PATH . '/inc/customizer/controls/kirki-wcag-tc/kirki-wcag-tc.php'; require_once GRIDD_PLUS_PATH . '/inc/customizer/controls/kirki-wcag-lc/kirki-wcag-lc.php'; + require_once GRIDD_PLUS_PATH . '/inc/customizer/content.php'; require_once GRIDD_PLUS_PATH . '/inc/customizer/features.php'; require_once GRIDD_PLUS_PATH . '/inc/customizer/footer.php'; require_once GRIDD_PLUS_PATH . '/inc/customizer/grid.php'; diff --git a/inc/customizer/content.php b/inc/customizer/content.php new file mode 100644 index 0000000..dc1b2f1 --- /dev/null +++ b/inc/customizer/content.php @@ -0,0 +1,318 @@ + 'single_post_title', + 'label' => esc_html__( 'Title', 'gridd-plus' ), + 'color' => [ '#512DA8', '#fff' ], + 'priority' => 0, + ], + [ + 'id' => 'single_post_featured_image', + 'label' => esc_html__( 'Featured Image', 'gridd-plus' ), + 'color' => [ '#80DEEA', '#000' ], + 'priority' => 1, + ], + [ + 'id' => 'single_post_content', + 'label' => esc_html__( 'Content', 'gridd-plus' ), + 'color' => [ '#D4E157', '#000' ], + 'priority' => 2, + ], +]; + +/** + * Add a toggle to allow customizing the post content grid. + * This is used as a template switch and as a condition to hide or show the grid control. + * + * @since 1.1 + */ +Customizer::add_field( + [ + 'settings' => 'gridd_single_posts_grid_override', + 'section' => 'gridd_grid_part_details_content', + 'type' => 'checkbox', + 'label' => esc_html__( 'Enable custom grid for posts content', 'gridd-plus' ), + 'default' => false, + 'priority' => 21, + ] +); + +/** + * Add the grid control. + * + * @since 1.1 + */ +Customizer::add_field( + [ + 'settings' => 'gridd_single_posts_grid', + 'section' => 'gridd_grid_part_details_content', + 'type' => 'gridd_grid', + 'grid-part' => false, + 'priority' => 23, + 'label' => esc_html__( 'Mobile Grid Settings', 'gridd-plus' ), + 'description' => sprintf( + /* translators: Link attributes. */ + __( 'Edit settings for the grid. For more information and documentation on how the grid works, please read this article.', 'gridd-plus' ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + 'href="https://wplemon.com/documentation/gridd/the-grid-control/" target="_blank"' + ), + 'default' => [ + 'rows' => 1, + 'columns' => 1, + 'gridTemplate' => [ + 'rows' => [ 'auto' ], + 'columns' => [ 'auto' ], + ], + 'areas' => [] + ], + 'sanitize_callback' => [ $sanitization, 'grid' ], + 'choices' => [ + 'parts' => $grid_parts, + ], + 'active_callback' => [ + [ + 'setting' => 'gridd_single_posts_grid_override', + 'value' => true, + 'operator' => '===', + ], + ], + ] +); + +/** + * Add filter to change the template for singlr posts content. + * + * @since 1.1 + */ +add_filter( + 'gridd_get_template_part', + /** + * Filters the path to the template file. + * + * @since 1.1 + * @param string|false $custom_path The custom template-part path. Defaults to false. Use absolute path. + * @param string $slug The template slug. + * @param string $name The template name. + * @return string|false + */ + function( $custom_path, $slug, $name ) { + if ( 'template-parts/content' === $slug && 'post' === $name ) { + if ( ! get_theme_mod( 'gridd_single_posts_grid_override', false ) ) { + return $custom_path; + } + return GRIDD_PLUS_PATH . '/inc/templates/single-post-content-grid.php'; + } + return $custom_path; + }, + 100, + 3 +); + +/** + * Add the template parts. + * + * @since 1.1 + */ +add_action( + 'gridd_the_grid_part', + /** + * Add the template part. + * + * @since 1.1 + * @param string $part The grid-part. + * @return void + */ + function( $part ) { + /** + * Template for post-title. + * + * @since 1.1 + */ + $styles = ''; + if ( 'single_post_title' === $part ) { + ?> + +
+ +
+ + +
+ +
+ +
+ +
+ esc_attr__( 'Post Title', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_content', + ] +); + +Customizer::add_field( + [ + 'type' => 'color', + 'settings' => 'gridd_plus_single_post_title_background_color', + 'label' => esc_html__( 'Background Color', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_title', + 'default' => '#ffffff', + 'choices' => [ + 'alpha' => true, + ], + 'css_vars' => '--gridd-plus-post-title-bg', + 'transport' => 'postMessage', + ] +); + +Customizer::add_field( + [ + 'type' => 'color', + 'settings' => 'gridd_plus_single_post_title_color', + 'label' => esc_html__( 'Color', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_title', + 'default' => '#000000', + 'choices' => [ + 'alpha' => true, + ], + 'css_vars' => '--gridd-plus-post-title-color', + 'transport' => 'postMessage', + ] +); + +Customizer::add_field( + [ + 'type' => 'dimension', + 'settings' => 'gridd_plus_single_post_title_padding', + 'label' => esc_html__( 'Padding', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_title', + 'default' => '0.5em', + 'css_vars' => '--gridd-plus-post-title-padding', + 'transport' => 'postMessage', + ] +); + +/** + * Add section for post-content details. + * + * @since 1.1 + */ +Customizer::add_section( + 'gridd_grid_part_details_single_post_content', + [ + 'title' => esc_attr__( 'Post Content', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_content', + ] +); + +Customizer::add_field( + [ + 'type' => 'color', + 'settings' => 'gridd_plus_single_post_content_background_color', + 'label' => esc_html__( 'Background Color', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_content', + 'default' => '#ffffff', + 'choices' => [ + 'alpha' => true, + ], + 'css_vars' => '--gridd-plus-post-content-bg', + 'transport' => 'postMessage', + ] +); + +Customizer::add_field( + [ + 'type' => 'color', + 'settings' => 'gridd_plus_single_post_content_color', + 'label' => esc_html__( 'Color', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_content', + 'default' => '#000000', + 'choices' => [ + 'alpha' => true, + ], + 'css_vars' => '--gridd-plus-post-content-color', + 'transport' => 'postMessage', + ] +); + +Customizer::add_field( + [ + 'type' => 'dimension', + 'settings' => 'gridd_plus_single_post_content_padding', + 'label' => esc_html__( 'Padding', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_content', + 'default' => '0.5em', + 'css_vars' => '--gridd-plus-post-content-padding', + 'transport' => 'postMessage', + ] +); diff --git a/inc/templates/single-post-content-grid.php b/inc/templates/single-post-content-grid.php new file mode 100644 index 0000000..5014a03 --- /dev/null +++ b/inc/templates/single-post-content-grid.php @@ -0,0 +1,49 @@ +add_string( + Grid::get_styles_responsive( + [ + 'context' => 'single-post-content-grid', + 'large' => $settings, + 'small' => false, + 'breakpoint' => get_theme_mod( 'gridd_mobile_breakpoint', '800px' ), + 'selector' => '.gridd-tp-content-grid', + 'prefix' => true, + ] + ) +); +$style->add_string( '.gridd-tp.gridd-tp-content-grid{max-width:100%}' ); + +// Generate grid styles for parts. +$style->add_string( Grid::get_styles( $settings, 'gridd-tp-content-grid', true ) ); +?> +
+ the_css( 'gridd-inline-css-single-post-custom-content-grid' ); + + /** + * Print the grid. + */ + if ( isset( $settings['areas'] ) ) { + foreach ( array_keys( $settings['areas'] ) as $part ) { + do_action( 'gridd_the_grid_part', $part ); + } + } + ?> +
From def08cfcc5f979f75c3570ecedd283399c47f820 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Sat, 10 Aug 2019 17:16:11 +0300 Subject: [PATCH 2/5] bugxif mor mobile --- inc/customizer/content.php | 1 + 1 file changed, 1 insertion(+) diff --git a/inc/customizer/content.php b/inc/customizer/content.php index dc1b2f1..1669cd3 100644 --- a/inc/customizer/content.php +++ b/inc/customizer/content.php @@ -184,6 +184,7 @@ function( $part ) { padding:var(--gridd-plus-post-content-padding,0.5em); color:var(--gridd-plus-post-content-color,#000); display: block; + width: 100%; }
From c3f9894c0477c73d7da816cd4ebb9d9d7d179358 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Sun, 11 Aug 2019 01:26:40 +0300 Subject: [PATCH 3/5] Add custom HTML parts --- inc/customizer/content.php | 55 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/inc/customizer/content.php b/inc/customizer/content.php index 1669cd3..6087223 100644 --- a/inc/customizer/content.php +++ b/inc/customizer/content.php @@ -14,6 +14,8 @@ $sanitization = new Sanitize(); +$custom_parts_nr = apply_filters( 'gridd_plus_content_grid_custom_parts_number', 5 ); + /** * Build the array of grid-parts. * This will be used by the grid control. @@ -41,6 +43,15 @@ ], ]; +for ( $i = 1; $i <= $custom_parts_nr; $i++ ) { + $grid_parts[] = [ + 'id' => 'single_post_custom_content_' . $i, + /* Translators: Number. */ + 'label' => sprintf( esc_html__( 'Custom Content %s', 'gridd-plus' ), $i ), + 'color' => [ 'hsl(' . ( $i * 37 ) . ',50%,75%)', '#000' ], + 'priority' => 10 + $i, + ]; +} /** * Add a toggle to allow customizing the post content grid. * This is used as a template switch and as a condition to hide or show the grid control. @@ -205,6 +216,20 @@ function( $part ) {
+
+ +
+ 'postMessage', ] ); + +/** + * Add section for custom-content parts. + * + * @since 1.1 + */ +for ( $i = 1; $i <= $custom_parts_nr; $i++ ) { + Customizer::add_section( + 'gridd_grid_part_details_single_post_custom_content_' . $i, + [ + /* Translators: Number. */ + 'title' => sprintf( esc_html__( 'Custom Content %s', 'gridd-plus' ), $i ), + 'section' => 'gridd_grid_part_details_content', + ] + ); + + Customizer::add_field( + [ + 'type' => 'code', + 'settings' => 'gridd_plus_single_post_custom_content_content_' . $i, + 'label' => esc_html__( 'Content', 'gridd-plus' ), + 'description' => esc_html__( 'Accepts HTML & Shortcodes.', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_custom_content_' . $i, + 'default' => '', + 'choices' => [ + 'language' => 'html', + ], + ] + ); +} From daec568d126acaad6aeaab33cc264a357d470e90 Mon Sep 17 00:00:00 2001 From: Ari Date: Sun, 11 Aug 2019 11:49:53 +0300 Subject: [PATCH 4/5] cs fixes --- inc/customizer/content.php | 102 +++++++++--------- .../class-kirki-wcag-text-color.php | 8 +- .../controls/kirki-wcag-tc/kirki-wcag-tc.php | 6 +- inc/templates/single-post-content-grid.php | 22 ++-- 4 files changed, 72 insertions(+), 66 deletions(-) diff --git a/inc/customizer/content.php b/inc/customizer/content.php index 6087223..9862f8c 100644 --- a/inc/customizer/content.php +++ b/inc/customizer/content.php @@ -94,7 +94,7 @@ 'rows' => [ 'auto' ], 'columns' => [ 'auto' ], ], - 'areas' => [] + 'areas' => [], ], 'sanitize_callback' => [ $sanitization, 'grid' ], 'choices' => [ @@ -226,7 +226,13 @@ function( $part ) { $i = (int) str_replace( 'single_post_custom_content_', '', $part ); ?>
- +
'color', - 'settings' => 'gridd_plus_single_post_title_background_color', - 'label' => esc_html__( 'Background Color', 'gridd-plus' ), - 'section' => 'gridd_grid_part_details_single_post_title', - 'default' => '#ffffff', - 'choices' => [ + 'type' => 'color', + 'settings' => 'gridd_plus_single_post_title_background_color', + 'label' => esc_html__( 'Background Color', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_title', + 'default' => '#ffffff', + 'choices' => [ 'alpha' => true, ], - 'css_vars' => '--gridd-plus-post-title-bg', - 'transport' => 'postMessage', + 'css_vars' => '--gridd-plus-post-title-bg', + 'transport' => 'postMessage', ] ); Customizer::add_field( [ - 'type' => 'color', - 'settings' => 'gridd_plus_single_post_title_color', - 'label' => esc_html__( 'Color', 'gridd-plus' ), - 'section' => 'gridd_grid_part_details_single_post_title', - 'default' => '#000000', - 'choices' => [ + 'type' => 'color', + 'settings' => 'gridd_plus_single_post_title_color', + 'label' => esc_html__( 'Color', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_title', + 'default' => '#000000', + 'choices' => [ 'alpha' => true, ], - 'css_vars' => '--gridd-plus-post-title-color', - 'transport' => 'postMessage', + 'css_vars' => '--gridd-plus-post-title-color', + 'transport' => 'postMessage', ] ); Customizer::add_field( [ - 'type' => 'dimension', - 'settings' => 'gridd_plus_single_post_title_padding', - 'label' => esc_html__( 'Padding', 'gridd-plus' ), - 'section' => 'gridd_grid_part_details_single_post_title', - 'default' => '0.5em', - 'css_vars' => '--gridd-plus-post-title-padding', - 'transport' => 'postMessage', + 'type' => 'dimension', + 'settings' => 'gridd_plus_single_post_title_padding', + 'label' => esc_html__( 'Padding', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_title', + 'default' => '0.5em', + 'css_vars' => '--gridd-plus-post-title-padding', + 'transport' => 'postMessage', ] ); @@ -303,43 +309,43 @@ function( $part ) { Customizer::add_field( [ - 'type' => 'color', - 'settings' => 'gridd_plus_single_post_content_background_color', - 'label' => esc_html__( 'Background Color', 'gridd-plus' ), - 'section' => 'gridd_grid_part_details_single_post_content', - 'default' => '#ffffff', - 'choices' => [ + 'type' => 'color', + 'settings' => 'gridd_plus_single_post_content_background_color', + 'label' => esc_html__( 'Background Color', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_content', + 'default' => '#ffffff', + 'choices' => [ 'alpha' => true, ], - 'css_vars' => '--gridd-plus-post-content-bg', - 'transport' => 'postMessage', + 'css_vars' => '--gridd-plus-post-content-bg', + 'transport' => 'postMessage', ] ); Customizer::add_field( [ - 'type' => 'color', - 'settings' => 'gridd_plus_single_post_content_color', - 'label' => esc_html__( 'Color', 'gridd-plus' ), - 'section' => 'gridd_grid_part_details_single_post_content', - 'default' => '#000000', - 'choices' => [ + 'type' => 'color', + 'settings' => 'gridd_plus_single_post_content_color', + 'label' => esc_html__( 'Color', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_content', + 'default' => '#000000', + 'choices' => [ 'alpha' => true, ], - 'css_vars' => '--gridd-plus-post-content-color', - 'transport' => 'postMessage', + 'css_vars' => '--gridd-plus-post-content-color', + 'transport' => 'postMessage', ] ); Customizer::add_field( [ - 'type' => 'dimension', - 'settings' => 'gridd_plus_single_post_content_padding', - 'label' => esc_html__( 'Padding', 'gridd-plus' ), - 'section' => 'gridd_grid_part_details_single_post_content', - 'default' => '0.5em', - 'css_vars' => '--gridd-plus-post-content-padding', - 'transport' => 'postMessage', + 'type' => 'dimension', + 'settings' => 'gridd_plus_single_post_content_padding', + 'label' => esc_html__( 'Padding', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_single_post_content', + 'default' => '0.5em', + 'css_vars' => '--gridd-plus-post-content-padding', + 'transport' => 'postMessage', ] ); diff --git a/inc/customizer/controls/kirki-wcag-tc/class-kirki-wcag-text-color.php b/inc/customizer/controls/kirki-wcag-tc/class-kirki-wcag-text-color.php index 4c2a79b..c917fcf 100644 --- a/inc/customizer/controls/kirki-wcag-tc/class-kirki-wcag-text-color.php +++ b/inc/customizer/controls/kirki-wcag-tc/class-kirki-wcag-text-color.php @@ -190,7 +190,7 @@ protected function content_template() {
<# if ( -1 !== _.indexOf( modes, 'auto' ) ) { #>
- register_control_type( 'Kirki_WCAG_Text_Color' ); } -} +} add_action( 'customize_register', 'kirki_wcag_text_color_register_control_type' ); diff --git a/inc/templates/single-post-content-grid.php b/inc/templates/single-post-content-grid.php index 5014a03..e498f22 100644 --- a/inc/templates/single-post-content-grid.php +++ b/inc/templates/single-post-content-grid.php @@ -35,15 +35,15 @@ /** * Print styles. */ - $style->the_css( 'gridd-inline-css-single-post-custom-content-grid' ); - - /** - * Print the grid. - */ - if ( isset( $settings['areas'] ) ) { - foreach ( array_keys( $settings['areas'] ) as $part ) { - do_action( 'gridd_the_grid_part', $part ); - } - } - ?> + $style->the_css( 'gridd-inline-css-single-post-custom-content-grid' ); + + /** + * Print the grid. + */ + if ( isset( $settings['areas'] ) ) { + foreach ( array_keys( $settings['areas'] ) as $part ) { + do_action( 'gridd_the_grid_part', $part ); + } + } + ?>
From cae15c149ee3ecd5aaca802b0779e7d9a9236674 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Sun, 11 Aug 2019 14:24:22 +0300 Subject: [PATCH 5/5] Add section for featured image part --- inc/customizer/content.php | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/inc/customizer/content.php b/inc/customizer/content.php index 9862f8c..8aca3ac 100644 --- a/inc/customizer/content.php +++ b/inc/customizer/content.php @@ -378,3 +378,16 @@ function( $part ) { ] ); } + +/** + * Add section for featured image. + * + * @since 1.1 + */ +Customizer::add_section( + 'gridd_grid_part_details_single_post_featured_image', + [ + 'title' => esc_attr__( 'Featured Image', 'gridd-plus' ), + 'section' => 'gridd_grid_part_details_content', + ] +);