diff --git a/app/Customizer/Customizer.php b/app/Customizer/Customizer.php index b7decab..43fc200 100644 --- a/app/Customizer/Customizer.php +++ b/app/Customizer/Customizer.php @@ -2,7 +2,9 @@ namespace Stage\Customizer; +use Kirki\Compatibility\Kirki; use Stage\Customizer\Panels\ArchivesPanel; +use Stage\Customizer\Panels\ColorsPanel; use Stage\Customizer\Panels\FooterPanel; use Stage\Customizer\Panels\GlobalPanel; use Stage\Customizer\Panels\HeaderPanel; @@ -10,6 +12,7 @@ use Stage\Customizer\Panels\WebsitePanel; use Stage\Customizer\Panels\WebsiteFeatures; use Roots\Acorn\ServiceProvider; +use Stage\View\Composers\Partials\Archive; use WP_Customize_Manager; use function Stage\stage_get_default; @@ -27,7 +30,7 @@ public function boot() add_filter('kirki_use_local_fonts', '__return_true'); // Do not inline CSS, build with action - add_filter('kirki_output_inline_styles', '__return_false'); + add_filter('kirki_output_inline_styles', '__return_true'); // Fix Kirki URL handling for local development, if in symlink folder add_filter( @@ -90,13 +93,13 @@ function ($standard_fonts) { 'after_setup_theme', function () { $modules = array( - 'core' => '\Kirki\Compatibility\Kirki', + // 'core' => '\Kirki\Compatibility\Kirki', 'postMessage' => '\Kirki\Module\Postmessage', 'css' => '\Kirki\Module\CSS', 'selective-refresh' => '\Kirki\Module\Selective_Refresh', - 'field-dependencies' => '\Kirki\Module\Field_Dependencies', + // 'field-dependencies' => '\Kirki\Module\Field_Dependencies', 'webfonts' => '\Kirki\Module\Webfonts', - 'tooltips' => '\Kirki\Module\Tooltips', + // 'tooltips' => '\Kirki\Module\Tooltips', 'sync' => '\Kirki\Module\Sync', 'font-uploads' => '\Kirki\Module\FontUploads', ); @@ -159,9 +162,21 @@ function (WP_Customize_Manager $wp_customize) { add_action( 'after_setup_theme', function () { + + /** + * Set default config is none is defined for field + */ + self::addConfig('stage', [ + 'capability' => 'edit_theme_options', + 'option_type' => 'theme_mod', + 'gutenberg_support' => true, + 'disable_output' => false, + ]); + new WebsitePanel(); // HIDES AND MOVES CONTROLS! - new WebsiteFeatures(); // HIDES AND MOVES CONTROLS! new SettingsPanel(); + new WebsiteFeatures(); + new ColorsPanel(); new GlobalPanel(); new HeaderPanel(); new ArchivesPanel(); @@ -186,6 +201,11 @@ function () { null, true ); + + // Collect data for 'stage' JS object via 'stage_localize_script' filter + wp_localize_script('stage/customize-controls.js', 'stage', [ + 'archives' => Archive::registeredArchives(), + ]); } ); @@ -224,4 +244,83 @@ function () { 20 ); } + + + /** + * Proxy function for Kirki Config. + * + * @static + * @access public + * @since 1.0 + * @param string $id The config ID. + * @param array $args The config arguments. + * @return void + */ + public static function addConfig($id, $args = []) + { + + $args = wp_parse_args($args, [ + 'capability' => 'edit_theme_options', + 'option_type' => 'theme_mod', + 'gutenberg_support' => true, + 'disable_output' => false, + ]); + + Kirki::add_config($id, apply_filters('stage_customizer_config_args', $args)); + } + + + /** + * Proxy function for Kirki Panel. + * + * @static + * @access public + * @since 1.0 + * @param string $id The section ID. + * @param array $args The field arguments. + * @return void + */ + public static function addPanel($id, $args) + { + Kirki::add_panel($id, apply_filters('stage_customizer_panel_args', $args)); + } + + + /** + * Proxy function for Kirki Section. + * + * @static + * @access public + * @since 1.0 + * @param string $id The section ID. + * @param array $args The field arguments. + * @return void + */ + public static function addSection($id, $args) + { + Kirki::add_section($id, apply_filters('stage_customizer_section_args', $args)); + } + + + /** + * Proxy function for Kirki Field. + * + * @static + * @access public + * @param string|array $config + * @param array $args The field arguments. + * @return void + * @since 1.0 + */ + public static function addField($config, $args = []) + { + + // Use global config if none defined + if (is_array($config)) { + $args = $config; + $config = 'stage'; + } + + Kirki::add_field($config, apply_filters('stage_customizer_field_args', $args)); + } } diff --git a/app/Customizer/Panels/ArchivesPanel.php b/app/Customizer/Panels/ArchivesPanel.php index 1cf6c83..a2c385e 100644 --- a/app/Customizer/Panels/ArchivesPanel.php +++ b/app/Customizer/Panels/ArchivesPanel.php @@ -2,12 +2,12 @@ namespace Stage\Customizer\Panels; +use Kirki\Control\Checkbox_Switch; +use Kirki\Panel; +use Kirki\Section; use WP_Customize_Manager; use Stage\View\Composers\Partials\Archive; use Stage\Customizer\Controls\LayoutControl; -use Stage\Customizer\Controls\ToggleControl; -use Kirki\Compatibility\Kirki; -use Kirki\Section; use function Stage\stage_get_default; use function Stage\stage_get_fallback_template; @@ -17,33 +17,17 @@ class ArchivesPanel // Set panel ID private static $panel = 'archives'; - private static $config = 'archives_conf'; public function __construct() { - /** - * Register Global Config - */ - Kirki::add_config( - self::$config, - array( - 'capability' => 'edit_theme_options', - 'option_type' => 'theme_mod', - 'disable_output' => false, - ) - ); /** - * Register Panel + * Set up the panel */ - // Layout Panel - Kirki::add_panel( - self::$panel, - array( - 'priority' => 20, - 'title' => esc_attr__('Archives', 'stage'), - ) - ); + new Panel(self::$panel, array( + 'priority' => 20, + 'title' => esc_html__('Archives', 'stage'), + )); foreach (Archive::archivesToRegister() as $cpt_name => $cpt_label) { // Set section & settings ID @@ -71,7 +55,7 @@ public function __construct() 'customize_register', function (WP_Customize_Manager $wp_customize) use ($section, $cpt_name, $cpt_label) { // Archive layout settings - $id = 'archive.' . $cpt_name . '.layout'; + $id = "archive.$cpt_name.layout"; $config = Archive::getPostTypeArchiveConfigKey($cpt_name) . '.layout'; $display_configs['layout'] = $id; @@ -116,24 +100,22 @@ function (WP_Customize_Manager $wp_customize) use ($section, $cpt_name, $cpt_lab 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'default' => $display_config, - 'transport' => 'postMessage', // Or postMessage. - 'sanitize_callback' => array( - 'Stage\Customizer\Controls\ToggleControl', - 'sanitize_toggle' - ), + 'transport' => $key == 'display_sidebar' ? + 'refresh' : + 'postMessage', + 'sanitize_callback' => 'Stage\stage_bool_to_string', + 'sanitize_js_callback' => 'Stage\stage_string_to_bool', ) ); - $wp_customize->add_control( - new ToggleControl( - $wp_customize, - $id, - array( - 'label' => __(ucwords(str_replace('_', ' ', $key)), 'stage'), - 'section' => $section, - ) - ) - ); + // Add control. + $wp_customize->add_control(new Checkbox_Switch($wp_customize, $id, [ + 'section' => $section, + 'choices' => [ + 'on' => __(ucwords(str_replace('_', ' ', $key)), 'stage'), + 'off' => __(ucwords(str_replace('_', ' ', $key)), 'stage'), + ], + ])); } // Add common refresh partial @@ -141,9 +123,9 @@ function (WP_Customize_Manager $wp_customize) use ($section, $cpt_name, $cpt_lab $wp_customize->selective_refresh->add_partial( $id, array( - 'selector' => 'body.' . $cpt_name . '-archive .archive-wrap', + 'selector' => 'body.' . $cpt_name . '-archive .archive-wrap .wrap-inner', 'settings' => array_values($display_configs), - 'container_inclusive' => false, + 'container_inclusive' => true, 'render_callback' => function () use ($cpt_name) { // Get $layout based on available setting $chosen_key = 'archive.' . $cpt_name . '.layout'; // theme_mod() or option() key diff --git a/app/Customizer/Panels/ColorsPanel.php b/app/Customizer/Panels/ColorsPanel.php new file mode 100644 index 0000000..d7a4490 --- /dev/null +++ b/app/Customizer/Panels/ColorsPanel.php @@ -0,0 +1,279 @@ + 'edit_theme_options', + 'disable_output' => false, + ) + ); + + /** + * Set up the panel + */ + Customizer::addPanel( + self::$panel, + array( + 'priority' => 30, + 'title' => esc_attr__('Colors', 'stage'), + 'description' => esc_attr__('Customize your colors.', 'stage'), + ) + ); + + /** + * Init sections with fields + */ + + $sections = [ + 'global' => [ + 'label' => esc_html('Global', 'stage'), + 'element' => ':root', + 'priority' => 10, + ], + 'header' => [ + 'label' => esc_html('Header', 'stage'), + 'element' => 'body > header', + 'priority' => 20, + ], + 'footer' => [ + 'label' => esc_html('Footer', 'stage'), + 'element' => 'body > footer', + 'priority' => 30, + ] + ]; + + + foreach ($sections as $section => $args) { + $this->registerColors($section, $args); + } + } + + /** + * Register Color Configs + * + * @param $section + * @param $args + */ + public function registerColors($section, $args) + { + $default_key = $section . '.colors.'; + + /** + * Add Section and fields for Colors + */ + Customizer::addSection($section . '_colors', array( + 'title' => sprintf( + /* translators: %s: Header */ + esc_html__('%s Colors', 'repack'), + $args['label'] + ), + 'description' => esc_html__('Set color settings for your website', 'stage'), + 'panel' => self::$panel, + )); + + /** + * Main colors + */ + Customizer::addField( + self::$config, + array( + 'type' => 'multicolor', + 'settings' => $section . '_colors', + 'section' => $section . '_colors', + 'choices' => array( + 'primary' => esc_html__('Primary Color', 'stage'), + 'secondary' => esc_html__('Secondary Color', 'stage'), + 'body' => esc_html__('Default Background Color', 'stage'), + 'copy' => esc_html__('Default Text Color', 'stage'), + 'heading' => esc_html__('Default Heading Color', 'stage'), + ), + 'default' => array( + 'primary' => stage_get_default($default_key . 'primary'), + 'secondary' => stage_get_default($default_key . 'secondary'), + 'body' => stage_get_default($default_key . 'body'), + 'copy' => stage_get_default($default_key . 'copy'), + 'heading' => stage_get_default($default_key . 'copy'), + ), + 'input_attrs' => $section === 'global' ? [] : array( + 'primary' => array( + 'data-sync-master' => 'global_colors[primary]', + ), + 'secondary' => array( + 'data-sync-master' => 'global_colors[secondary]', + ), + 'body' => array( + 'data-sync-master' => 'global_colors[body]', + ), + 'copy' => array( + 'data-sync-master' => 'global_colors[copy]', + ), + 'heading' => array( + 'data-sync-master' => 'global_colors[copy]', + ), + ), + 'transport' => 'auto', + 'output' => array( + array( + 'choice' => 'copy', + 'element' => $args['element'], + 'property' => '--color-copy', + 'context' => array( + 'editor', + 'front', + ), + ), + array( + 'choice' => 'heading', + 'element' => $args['element'], + 'property' => '--color-heading', + 'context' => array( + 'editor', + 'front', + ), + ), + array( + 'choice' => 'primary', + 'element' => $args['element'], + 'property' => '--color-primary', + 'context' => array( + 'editor', + 'front', + ), + ), + array( + 'choice' => 'secondary', + 'element' => $args['element'], + 'property' => '--color-secondary', + 'context' => array( + 'editor', + 'front', + ), + ), + array( + 'choice' => 'body', + 'element' => $args['element'], + 'property' => '--color-body', + 'context' => array( + 'editor', + 'front', + ), + ), + ), + ) + ); + + /** + * Link Colors + */ + Customizer::addField( + self::$config, + array( + 'type' => 'multicolor', + 'settings' => $section . '_colors_links', + 'section' => $section . '_colors', + 'choices' => array( + 'link' => esc_html__('Link Color', 'stage'), + 'hover' => esc_html__('Hover & Focus Color', 'stage'), + ), + 'default' => array( + 'link' => '', + 'hover' => '', + ), + 'input_attrs' => $section === 'global' ? [ + 'link' => array( + 'data-sync-master' => 'global_colors[copy]', + ), + 'hover' => array( + 'data-sync-master' => 'global_colors[primary]', + ), + ] : [ + 'link' => array( + 'data-sync-master' => 'global_colors_links[link]', + ), + 'hover' => array( + 'data-sync-master' => 'global_colors_links[hover]', + ), + ], + 'transport' => 'auto', + 'output' => array( + array( + 'choice' => 'link', + 'element' => $args['element'], + 'property' => '--color-link', + 'context' => array( + 'editor', + 'front', + ), + ), + array( + 'choice' => 'hover', + 'element' => $args['element'], + 'property' => '--color-hover', + 'context' => array( + 'editor', + 'front', + ), + ), + ), + ) + ); + + /** + * Color Palettes + */ + foreach (Settings::getDefault('global.colors.palettes') as $palette => $shades) { + foreach ($shades as $shade => $color) { + $key = $palette . '-' . $shade; + + new ReactColor( + [ + 'kirki_config' => self::$config, + 'label' => ucfirst($palette) . ' ' . $shade, + 'settings' => $section . '_colors_' . $palette . '[' . $shade . ']', + 'section' => $section . '_colors', + 'choices' => array( + 'formComponent' => 'TwitterPicker', + ), + 'default' => $color, + 'input_attrs' => $section != 'global' ? [ + 'data-sync-master' => 'global_colors_' . $palette . '[' . $shade . ']', + ] : [], + 'disable_output' => false, + 'gutenberg_support' => true, + 'transport' => 'auto', + 'output' => [ + [ + 'element' => $args['element'], + 'property' => "--color-$key", + 'context' => array( + 'editor', + 'front', + ), + ], + ], + ] + ); + } + } + } +} diff --git a/app/Customizer/Panels/GlobalPanel.php b/app/Customizer/Panels/GlobalPanel.php index 5b2a857..85ea054 100644 --- a/app/Customizer/Panels/GlobalPanel.php +++ b/app/Customizer/Panels/GlobalPanel.php @@ -2,10 +2,11 @@ namespace Stage\Customizer\Panels; -use Kirki\Compatibility\Kirki; +use Stage\Customizer\Customizer; +use WPLemon\Field\WCAGLinkColor; +use WPLemon\Field\WCAGTextColor; use function Stage\stage_get_default; -use function Stage\stage_get_fallback; class GlobalPanel { @@ -20,27 +21,18 @@ public function __construct() /** * Set up config for panel */ - Kirki::add_config( - self::$config, - array( - 'capability' => 'edit_theme_options', - 'option_type' => 'theme_mod', - 'gutenberg_support' => true, - 'disable_output' => false, - ) + Customizer::addConfig( + self::$config ); /** * Set up the panel */ - Kirki::add_panel( - self::$panel, - array( - 'priority' => 10, - 'title' => esc_html__('Global Settings', 'stage'), - 'description' => esc_html__('Various settings for your website.', 'stage'), - ) - ); + Customizer::addPanel(self::$panel, array( + 'priority' => 10, + 'title' => esc_html__('Global Settings', 'stage'), + 'description' => esc_html__('Various settings for your website.', 'stage'), + )); /** * Init sections with fields @@ -56,29 +48,17 @@ public function website() // Set section & settings ID $section = self::$panel . '_website'; - // Remove the default WP fields early and set them back again - add_action( - 'customize_register', - function (\WP_Customize_Manager $wp_customize) { - $wp_customize->remove_control('blogname'); - $wp_customize->remove_control('blogdescription'); - $wp_customize->remove_control('display_header_text'); - }, - 5 - ); + Customizer::addSection($section, array( + 'title' => esc_html__('Website Information', 'stage'), + 'capability' => 'edit_theme_options', + 'priority' => 10, + 'panel' => self::$panel, + )); - Kirki::add_section( - $section, - array( - 'title' => esc_html__('Website Information', 'stage'), - 'capability' => 'edit_theme_options', - 'priority' => 10, - 'panel' => self::$panel, - ) - ); - - Kirki::add_field( - self::$config, + /** + * Site Name + */ + Customizer::addField( array( 'type' => 'text', 'option_type' => 'option', @@ -90,18 +70,21 @@ function (\WP_Customize_Manager $wp_customize) { 'priority' => 10, 'transport' => 'auto', 'partial_refresh' => array( - 'global_website_name' => array( + 'site_blogname' => array( 'selector' => '.site_brand--name', + 'settings' => 'blogname', 'render_callback' => function () { return get_bloginfo('name', 'display'); }, - ), - ), + ) + ) ) ); - Kirki::add_field( - self::$config, + /** + * Site Description + */ + Customizer::addField( array( 'type' => 'text', 'option_type' => 'option', @@ -115,11 +98,12 @@ function (\WP_Customize_Manager $wp_customize) { 'partial_refresh' => array( 'blogdescription' => array( 'selector' => '.site_brand--tagline', + 'settings' => 'blogdescription', 'render_callback' => function () { return get_bloginfo('description', 'display'); }, - ), - ), + ) + ) ) ); } @@ -130,17 +114,14 @@ public function branding() $section = self::$panel . '_branding'; /** - * Add Section and fields for Typography + * Add Section and fields for Branding */ - Kirki::add_section( - $section, - array( - 'title' => esc_html__('Logos & Branding', 'stage'), - 'capability' => 'edit_theme_options', - 'priority' => 20, - 'panel' => self::$panel, - ) - ); + Customizer::addSection($section, array( + 'title' => esc_html__('Logos & Branding', 'stage'), + 'capability' => 'edit_theme_options', + 'priority' => 20, + 'panel' => self::$panel, + )); /** * Move WP native fields to Branding @@ -173,21 +154,17 @@ public function typography() /** * Add Section and fields for Typography */ - Kirki::add_section( - $section, - array( - 'title' => esc_html__('Typography', 'stage'), - 'description' => esc_html__('Set typo settings for your website', 'stage'), - 'priority' => 40, - 'panel' => self::$panel, - ) - ); + Customizer::addSection($section, array( + 'title' => esc_html__('Typography', 'stage'), + 'description' => esc_html__('Set typo settings for your website', 'stage'), + 'priority' => 40, + 'panel' => self::$panel, + )); /** * Copy */ - Kirki::add_field( - self::$config, + Customizer::addField( array( 'type' => 'typography', 'label' => esc_html__('Copy Font', 'stage'), @@ -225,8 +202,7 @@ public function typography() /** * Heading */ - Kirki::add_field( - self::$config, + Customizer::addField( array( 'type' => 'typography', 'label' => esc_html__('Headlines Font', 'stage'), @@ -269,23 +245,19 @@ public function colors() $default_key = 'global.colors.'; /** - * Add Section and fields for Typography + * Add Section and fields for Colors */ - Kirki::add_section( - $section, - array( - 'title' => esc_html__('Colors', 'stage'), - 'description' => esc_html__('Set color settings for your website', 'stage'), - 'priority' => 60, - 'panel' => self::$panel, - ) - ); + Customizer::addSection($section, array( + 'title' => esc_html__('Colors', 'stage'), + 'description' => esc_html__('Set color settings for your website', 'stage'), + 'priority' => 60, + 'panel' => self::$panel, + )); /** * Main colors */ - Kirki::add_field( - self::$config, + Customizer::addField( array( 'type' => 'multicolor', 'label' => esc_html__('Main Colors', 'stage'), @@ -294,7 +266,7 @@ public function colors() 'priority' => 10, 'choices' => array( 'copy' => esc_html__('Default Text Color', 'stage'), - 'heading' => esc_html__('Default Heading Color', 'stage'), + 'heading' => esc_html__('Default Heading Color', 'stage'), 'primary' => esc_html__('Primary Color', 'stage'), 'secondary' => esc_html__('Secondary Color', 'stage'), 'body' => esc_html__('Default Background Color', 'stage'), @@ -358,10 +330,9 @@ public function colors() ); /** - * Link colors + * Link Colors */ - Kirki::add_field( - self::$config, + Customizer::addField( array( 'type' => 'multicolor', 'label' => esc_html__('Link Colors', 'stage'), @@ -377,7 +348,12 @@ public function colors() 'hover' => '', ), 'input_attrs' => array( - 'data-sync-master' => 'global_colors_main[primary]', // add 'data-mode' attribute to input element + 'link' => array( + 'data-sync-master' => 'global_colors_main[copy]', + ), + 'hover' => array( + 'data-sync-master' => 'global_colors_main[primary]', + ), ), 'transport' => 'auto', 'output' => array( diff --git a/app/Customizer/Panels/SettingsPanel.php b/app/Customizer/Panels/SettingsPanel.php index 6adc5ae..d617edc 100644 --- a/app/Customizer/Panels/SettingsPanel.php +++ b/app/Customizer/Panels/SettingsPanel.php @@ -2,40 +2,23 @@ namespace Stage\Customizer\Panels; -use Kirki\Compatibility\Kirki; +use Kirki\Panel; class SettingsPanel { // Set panel ID private static $panel = 'settings'; - private static $config = 'settings_conf'; public function __construct() { /** - * Register Global Config + * Set up the panel */ - Kirki::add_config( - self::$config, - array( - 'capability' => 'edit_theme_options', - 'option_type' => 'theme_mod', - 'disable_output' => false, - ) - ); - - /** - * Register Panel - */ - // Layout Panel - Kirki::add_panel( - self::$panel, - array( - 'priority' => 130, - 'title' => esc_attr__('Website Settings', 'stage'), - ) - ); + new Panel(self::$panel, array( + 'priority' => 130, + 'title' => esc_html__('Website Settings', 'stage'), + )); } } diff --git a/app/Customizer/Panels/WebsiteFeatures.php b/app/Customizer/Panels/WebsiteFeatures.php index cfc9fbd..8019afd 100644 --- a/app/Customizer/Panels/WebsiteFeatures.php +++ b/app/Customizer/Panels/WebsiteFeatures.php @@ -2,11 +2,12 @@ namespace Stage\Customizer\Panels; +use Kirki\Compatibility\Field; +use Kirki\Control\Checkbox_Switch; use Kirki\Panel; use Kirki\Section; -use Kirki\Control\Checkbox_Switch; +use WP_Customize_Manager; -use function Stage\stage_bool_to_string; use function Stage\stage_get_fallback; class WebsiteFeatures @@ -14,27 +15,10 @@ class WebsiteFeatures // Set panel ID private static $panel = 'features'; - private static $config = 'features_conf'; public function __construct() { - /** - * Set up config for panel - */ - /* - Kirki::add_config( - self::$config, - array( - 'capability' => 'edit_theme_options', - 'option_type' => 'option', - 'option_name' => 'stage_options', - 'gutenberg_support' => false, - 'disable_output' => false, - ) - ); - */ - /** * Set up the panel */ @@ -119,7 +103,6 @@ public function gallery() new Section($section, array( 'title' => esc_html__('Galleries', 'stage'), - 'capability' => 'edit_theme_options', 'priority' => 10, 'panel' => self::$panel, )); @@ -139,28 +122,34 @@ public function gallery() public function addFeatureActivationToggle($section) { - /** - * Add Customizer settings & controls. - * - * @param \WP_Customize_Manager $wp_customize The WP_Customize_Manager object. - * @return void - */ - add_action('customize_register', function ($wp_customize) use ($section) { - // Add setting. - $wp_customize->add_setting("stage[$section.activate]", [ - 'type' => 'option', - 'capability' => 'edit_theme_options', - 'default' => stage_get_fallback($section . '.activate'), - 'transport' => 'refresh', // Or postMessage. - 'sanitize_callback' => 'Stage\stage_bool_to_string', - 'sanitize_js_callback' => 'Stage\stage_string_to_bool', - ]); - - // Add control. - $wp_customize->add_control(new Checkbox_Switch($wp_customize, "stage[$section.activate]", [ - 'label' => esc_html__('Activate', 'stage'), - 'section' => $section, - ])); - }); + add_action( + 'customize_register', + function (WP_Customize_Manager $wp_customize) use ($section) { + $wp_customize->add_setting( + "stage[$section.activate]", + array( + 'type' => 'option', + 'capability' => 'edit_theme_options', + 'default' => stage_get_fallback($section . '.activate'), + 'sanitize_callback' => 'Stage\stage_bool_to_string', + 'sanitize_js_callback' => 'Stage\stage_string_to_bool', + ) + ); + + // Add control. + $wp_customize->add_control(new Checkbox_Switch( + $wp_customize, + "stage[$section.activate]", + [ + 'section' => $section, + 'priority' => -999, + 'choices' => [ + 'yes' => esc_html__('Deactivate Feature', 'stage'), + 'no' => esc_html__('Activate Feature', 'stage'), + ], + ] + )); + } + ); } } diff --git a/app/Customizer/Panels/WebsitePanel.php b/app/Customizer/Panels/WebsitePanel.php index 4c6a438..d7b5bfd 100644 --- a/app/Customizer/Panels/WebsitePanel.php +++ b/app/Customizer/Panels/WebsitePanel.php @@ -7,7 +7,6 @@ class WebsitePanel // Set panel ID private static $panel = 'website'; - private static $config = 'website_conf'; public function __construct() { diff --git a/app/Customizer/Settings.php b/app/Customizer/Settings.php index 910a861..fcc570b 100644 --- a/app/Customizer/Settings.php +++ b/app/Customizer/Settings.php @@ -164,7 +164,7 @@ public static function getFallbackTemplatePath($request, $default_key = null) { // Get the chosen layout e.g. "masonry" $fallback = self::getFallback($request, false, true); - // Get path & default layout (e.g. "partials.grids.modern") + // Get path & default layout (e.g. "partials.archive.grids.modern") $config = self::toArray(self::getConfig($default_key ?: $request)); $default = array_pop($config); diff --git a/app/Customizer/assets/scripts/customize-controls.js b/app/Customizer/assets/scripts/customize-controls.js index 888ef1a..087ec76 100644 --- a/app/Customizer/assets/scripts/customize-controls.js +++ b/app/Customizer/assets/scripts/customize-controls.js @@ -5,7 +5,7 @@ * {@link https://codex.wordpress.org/Theme_Customization_API} * {@link https://developer.wordpress.org/themes/customize-api/the-customizer-javascript-api/#preview-js-and-controls-js} */ -( function ( $, api ) { +( function ( $, api, stage ) { api.bind('ready', function () { @@ -20,19 +20,44 @@ }); /** - * Change to new posts page after setting new setting + * Edit Archive Settings, change view + * @see https://make.xwp.co/2016/07/21/navigating-to-a-url-in-the-customizer-preview-when-a-section-is-expanded/ */ - /* - api( 'page_for_posts', function( setting ) { - setting.bind( function( pageId ) { - pageId = parseInt( pageId, 10 ); - if ( pageId > 0 ) { - api.previewer.previewUrl.set( api.settings.url.home + '?page_id=' + pageId ); - } + $.each(stage.archives, (post_type, data) => { + api.section('archives_' + post_type, function ( section ) { + let previousUrl, clearPreviousUrl, previewUrlValue; + previewUrlValue = api.previewer.previewUrl; + clearPreviousUrl = function () { + previousUrl = null; + }; + + section.expanded.bind(function ( isExpanded ) { + if ( isExpanded ) { + previousUrl = previewUrlValue.get(); + previewUrlValue.set(data.url); + previewUrlValue.bind(clearPreviousUrl); + } else { + previewUrlValue.unbind(clearPreviousUrl); + if ( previousUrl ) { + previewUrlValue.set(previousUrl); + } + } + }); + }); }); - }); + + /** + * Change to new posts page after setting new setting */ + api('page_for_posts', function ( setting ) { + setting.bind(function ( pageId ) { + pageId = parseInt(pageId, 10); + if ( pageId > 0 ) { + api.previewer.previewUrl.set(api.settings.url.home + '?page_id=' + pageId); + } + }); + }); }); -} )(jQuery, wp.customize); +} )(jQuery, wp.customize, window.stage); diff --git a/app/Customizer/assets/scripts/customize-preview.js b/app/Customizer/assets/scripts/customize-preview.js index 9320699..764ce61 100644 --- a/app/Customizer/assets/scripts/customize-preview.js +++ b/app/Customizer/assets/scripts/customize-preview.js @@ -7,7 +7,7 @@ ( function ( $, api ) { $(document).ready(function () { - // Run when Preview ist active + // Run when Preview ist active api.preview.bind('active', function () { if ( 'undefined' !== typeof wp && api && api.selectiveRefresh ) { /** @@ -19,21 +19,22 @@ * Trigger custom events on layout elements when layout control changes */ api.selectiveRefresh.bind('partial-content-rendered', function (placement) { - // When new content is rendered run with each control of the partial + // When new content is rendered run with each control of the partial $.each(placement.partial.params.settings, function ( index, controlID ) { - // Trigger custom event on the elements - api(controlID, function ( control ) { - $(placement.partial.params.selector).trigger('stage-customizer-layout-changed', { - layout: control.get(), - selector: placement.partial.params.selector - }); + // Trigger custom event on the elements + api(controlID, function ( control ) { + $(placement.partial.params.selector).trigger('stage-customizer-layout-changed', { + layout: control.get(), + selector: placement.partial.params.selector, }); + }); }); }); } }); + /** * Some useful examples * Use it if required @@ -41,12 +42,12 @@ // Update the site title in real time... /* - api( 'blogname', function( value ) { - value.bind( function( newval ) { - console.log(newval); - $( '#site-title a' ).html( newval ); - } ); - } ); + api('blogname', function ( value ) { + value.bind(function ( newval ) { + console.log(newval); + $('#site-title a').html(newval); + }); + }); */ // New content loaded via selective refresh diff --git a/app/Customizer/assets/scripts/layout.js b/app/Customizer/assets/scripts/layout.js index 6d254de..d690fb6 100644 --- a/app/Customizer/assets/scripts/layout.js +++ b/app/Customizer/assets/scripts/layout.js @@ -7,7 +7,7 @@ api(control.id, function ( value ) { value.bind(function ( newLayout ) { - // Set the new value + // Set the new value control.setting.set(newLayout); }); }); @@ -26,7 +26,7 @@ $(this).text(layoutLocalization.open); } }); - } + }, }); } )(jQuery, wp.customize); diff --git a/app/View/Composers/Alignment.php b/app/View/Composers/Alignment.php index e7e0f07..a088db6 100644 --- a/app/View/Composers/Alignment.php +++ b/app/View/Composers/Alignment.php @@ -4,8 +4,6 @@ use Roots\Acorn\View\Composer; -use function Stage\stage_is_shop_active; - class Alignment extends Composer { @@ -43,18 +41,11 @@ public function align() // Align wide by default $align = 'alignwide'; - // Wide align single pages & posts + // Align single pages & posts if (is_singular(['post', 'page'])) { $align = 'align'; } - // Screen align WC Account page - if (stage_is_shop_active()) { - if (is_account_page() && is_user_logged_in()) { - $align = 'alignscreen'; - } - } - return apply_filters('stage_single_align_content', $align); } } diff --git a/app/View/Composers/Partials/Archive.php b/app/View/Composers/Partials/Archive.php index 8d3f657..39d389d 100644 --- a/app/View/Composers/Partials/Archive.php +++ b/app/View/Composers/Partials/Archive.php @@ -7,12 +7,11 @@ use function Stage\post_types; use function Stage\stage_get_default; use function Stage\stage_get_fallback; +use function Stage\stage_string_to_bool; class Archive extends Composer { - - /** * List of views served by this composer. * @@ -96,7 +95,9 @@ public static function getArchiveDisplayConfig($post_type = null) $configs = stage_get_default($configs_key); foreach ($configs as $key => $config) { - $data[ 'display_' . $key ] = (bool) self::getArchiveConfig($post_type, '.display' . '.' . $key); + $data[ 'display_' . $key ] = (bool) stage_string_to_bool( + self::getArchiveConfig($post_type, '.display' . '.' . $key) + ); } return $data; @@ -124,12 +125,27 @@ public static function archivesToRegister() { $post_types = post_types(); - foreach ($post_types as $name => $label) { - if (! get_post_type_archive_link($name)) { - unset($post_types[ $name ]); + foreach ($post_types as $post_type => $label) { + $archive_link = get_post_type_archive_link($post_type); + if (! $archive_link) { + unset($post_types[ $post_type ]); } } return apply_filters('stage_register_customizer_post_types', $post_types); } + + public static function registeredArchives() + { + $archives = []; + + foreach (self::archivesToRegister() as $post_type => $label) { + $archives[$post_type] = [ + 'label' => $label, + 'url' => get_post_type_archive_link($post_type) + ]; + } + + return $archives; + } } diff --git a/app/View/Composers/Partials/Header.php b/app/View/Composers/Partials/Header.php index f55e90c..4418f01 100644 --- a/app/View/Composers/Partials/Header.php +++ b/app/View/Composers/Partials/Header.php @@ -65,7 +65,7 @@ public function getHeaderClasses() 'banner', 'bg-body', 'font-copy', - 'border-accent', + 'border-gray-300', 'z-30' ); diff --git a/app/helpers.php b/app/helpers.php index 62c47c1..853a9a0 100644 --- a/app/helpers.php +++ b/app/helpers.php @@ -243,6 +243,27 @@ function post_types() return $collection; } +/** + * Flatten multidimensional array concatenating keys + * e.g. [data][user][ben] to [data.user.ben] + * + * @param $array + * @param string $prefix + * @return array|mixed + */ +function stage_flatten($array, $prefix = '') +{ + $result = array(); + foreach ($array as $key => $value) { + if (is_array($value)) { + $result = $result + stage_flatten($value, $prefix . $key . '.'); + } else { + $result[$prefix . $key] = $value; + } + } + return $result; +} + /** * Build a URL string based on URL parts. * diff --git a/app/shop.php b/app/shop.php index fb6bf5a..a50c300 100644 --- a/app/shop.php +++ b/app/shop.php @@ -1,7 +1,7 @@ array( - 'main' => array( - 'copy' => stage_get_fallback('global.colors.copy', 'rgb(51, 51, 51)'), - 'heading' => stage_get_fallback('global.colors.heading', 'rgb(51, 51, 51)'), - 'primary' => stage_get_fallback('global.colors.primary', 'rgb(43, 108, 176)'), - 'secondary' => stage_get_fallback('global.colors.secondary', 'rgb(221, 107, 32)'), - 'body' => stage_get_fallback('global.colors.body', 'rgb(249, 249, 249)'), - ), - 'links' => array( - 'link' => '', - 'hover' => '', - ), - 'gray-200' => 'var(--color-gray-200)', - 'gray-800' => 'var(--color-gray-800)', + 'copy' => stage_get_fallback('global.colors.copy', 'rgb(51, 51, 51)'), + 'heading' => stage_get_fallback('global.colors.heading', 'rgb(51, 51, 51)'), + 'primary' => stage_get_fallback('global.colors.primary', 'rgb(43, 108, 176)'), + 'secondary' => stage_get_fallback('global.colors.secondary', 'rgb(221, 107, 32)'), + 'body' => stage_get_fallback('global.colors.body', 'rgb(249, 249, 249)'), + 'link' => '', + 'hover' => '', + + 'palettes' => [ + 'gray' => [ + '100' => '#f7fafc', + '200' => '#edf2f7', + '300' => '#e2e8f0', + '400' => '#cbd5e0', + '500' => '#a0aec0', + '600' => '#718096', + '700' => '#4a5568', + '800' => '#2d3748', + '900' => '#1a202c', + ], + 'red' => [ + '100' => '#fff5f5', + '200' => '#fed7d7', + '300' => '#feb2b2', + '400' => '#fc8181', + '500' => '#f56565', + '600' => '#e53e3e', + '700' => '#c53030', + '800' => '#9b2c2c', + '900' => '#742a2a', + ], + 'green' => [ + '100' => '#f0fff4', + '200' => '#c6f6d5', + '300' => '#9ae6b4', + '400' => '#68d391', + '500' => '#48bb78', + '600' => '#38a169', + '700' => '#2f855a', + '800' => '#276749', + '900' => '#22543d', + ], + 'blue' => [ + '100' => '#ebf8ff', + '200' => '#bee3f8', + '300' => '#90cdf4', + '400' => '#63b3ed', + '500' => '#4299e1', + '600' => '#3182ce', + '700' => '#2b6cb0', + '800' => '#2c5282', + '900' => '#2a4365', + ], + ], ), // All font sizes are registered as wp-blocks font-sizes. @@ -210,7 +251,7 @@ */ 'archive' => array( 'post' => array( - 'layout' => 'partials.grids.modern', + 'layout' => 'partials.archive.grids.modern', 'display' => array( 'sidebar' => false, 'thumbnail' => true, @@ -222,7 +263,7 @@ ), ), 'product' => array( - 'layout' => 'partials.grids.masonry', + 'layout' => 'partials.archive.grids.masonry', 'display' => array( 'sidebar' => false, 'thumbnail' => true, @@ -234,7 +275,7 @@ ), ), 'fallback' => array( - 'layout' => 'partials.grids.masonry', + 'layout' => 'partials.archive.grids.masonry', 'display' => array( 'sidebar' => true, 'thumbnail' => true, diff --git a/resources/assets/styles/blocks/separator/_theme.scss b/resources/assets/styles/blocks/separator/_theme.scss index 522dc6e..93eb8b2 100644 --- a/resources/assets/styles/blocks/separator/_theme.scss +++ b/resources/assets/styles/blocks/separator/_theme.scss @@ -6,7 +6,7 @@ } .wp-block-separator { - @apply block border-b border-accent my-block-spacing mx-auto p-0 bg-transparent; + @apply block border-b border-gray-300 my-block-spacing mx-auto p-0 bg-transparent; clear: both; diff --git a/resources/assets/styles/shop/_forms.scss b/resources/assets/styles/shop/_forms.scss index ca9c51a..eda15d2 100644 --- a/resources/assets/styles/shop/_forms.scss +++ b/resources/assets/styles/shop/_forms.scss @@ -54,7 +54,7 @@ } &.good { - @apply text-orange-500; + @apply text-green-300; } &.strong { diff --git a/resources/assets/styles/variables/_colors.scss b/resources/assets/styles/variables/_colors.scss index c766fa1..471ab38 100644 --- a/resources/assets/styles/variables/_colors.scss +++ b/resources/assets/styles/variables/_colors.scss @@ -13,18 +13,19 @@ --color-copy: #{hex_rgb(#333)}; --color-heading: #{hex_rgb(#333)}; - /* Body / Main background */ + /* Link colors */ + --color-link: var(--color-copy); + --color-hover: var(--color-blue-700); + + /* Background */ --color-body: #{hex_rgb(#f9f9f9)}; /* Primary */ - --color-primary: var(--color-teal-500); + --color-primary: var(--color-blue-700); /* Secondary */ --color-secondary: #{hex_rgb(#dd6b20)}; - /* Accent */ - --color-accent: var(--color-gray-300); - /* Gray */ --color-gray-100: #{hex_rgb(#f7fafc)}; --color-gray-200: #{hex_rgb(#edf2f7)}; @@ -47,28 +48,6 @@ --color-red-800: #{hex_rgb(#9b2c2c)}; --color-red-900: #{hex_rgb(#742a2a)}; - /* Orange */ - --color-orange-100: #{hex_rgb(#fffaf0)}; - --color-orange-200: #{hex_rgb(#feebc8)}; - --color-orange-300: #{hex_rgb(#fbd38d)}; - --color-orange-400: #{hex_rgb(#f6ad55)}; - --color-orange-500: #{hex_rgb(#ed8936)}; - --color-orange-600: #{hex_rgb(#dd6b20)}; - --color-orange-700: #{hex_rgb(#c05621)}; - --color-orange-800: #{hex_rgb(#9c4221)}; - --color-orange-900: #{hex_rgb(#7b341e)}; - - /* Yellow */ - --color-yellow-100: #{hex_rgb(#fffff0)}; - --color-yellow-200: #{hex_rgb(#fefcbf)}; - --color-yellow-300: #{hex_rgb(#faf089)}; - --color-yellow-400: #{hex_rgb(#f6e05e)}; - --color-yellow-500: #{hex_rgb(#ecc94b)}; - --color-yellow-600: #{hex_rgb(#d69e2e)}; - --color-yellow-700: #{hex_rgb(#b7791f)}; - --color-yellow-800: #{hex_rgb(#975a16)}; - --color-yellow-900: #{hex_rgb(#744210)}; - /* Green */ --color-green-100: #{hex_rgb(#f0fff4)}; --color-green-200: #{hex_rgb(#c6f6d5)}; @@ -80,17 +59,6 @@ --color-green-800: #{hex_rgb(#276749)}; --color-green-900: #{hex_rgb(#22543d)}; - /* Teal */ - --color-teal-100: #{hex_rgb(#e6fffa)}; - --color-teal-200: #{hex_rgb(#b2f5ea)}; - --color-teal-300: #{hex_rgb(#81e6d9)}; - --color-teal-400: #{hex_rgb(#4fd1c5)}; - --color-teal-500: #{hex_rgb(#38b2ac)}; - --color-teal-600: #{hex_rgb(#319795)}; - --color-teal-700: #{hex_rgb(#2c7a7b)}; - --color-teal-800: #{hex_rgb(#285e61)}; - --color-teal-900: #{hex_rgb(#234e52)}; - /* Blue */ --color-blue-100: #{hex_rgb(#ebf8ff)}; --color-blue-200: #{hex_rgb(#bee3f8)}; @@ -101,37 +69,4 @@ --color-blue-700: #{hex_rgb(#2b6cb0)}; --color-blue-800: #{hex_rgb(#2c5282)}; --color-blue-900: #{hex_rgb(#2a4365)}; - - /* Indigo */ - --color-indigo-100: #{hex_rgb(#ebf4ff)}; - --color-indigo-200: #{hex_rgb(#c3dafe)}; - --color-indigo-300: #{hex_rgb(#a3bffa)}; - --color-indigo-400: #{hex_rgb(#7f9cf5)}; - --color-indigo-500: #{hex_rgb(#667eea)}; - --color-indigo-600: #{hex_rgb(#5a67d8)}; - --color-indigo-700: #{hex_rgb(#4c51bf)}; - --color-indigo-800: #{hex_rgb(#434190)}; - --color-indigo-900: #{hex_rgb(#3c366b)}; - - /* Purple */ - --color-purple-100: #{hex_rgb(#faf5ff)}; - --color-purple-200: #{hex_rgb(#e9d8fd)}; - --color-purple-300: #{hex_rgb(#d6bcfa)}; - --color-purple-400: #{hex_rgb(#b794f4)}; - --color-purple-500: #{hex_rgb(#9f7aea)}; - --color-purple-600: #{hex_rgb(#805ad5)}; - --color-purple-700: #{hex_rgb(#6b46c1)}; - --color-purple-800: #{hex_rgb(#553c9a)}; - --color-purple-900: #{hex_rgb(#44337a)}; - - /* Pink */ - --color-pink-100: #{hex_rgb(#fff5f7)}; - --color-pink-200: #{hex_rgb(#fed7e2)}; - --color-pink-300: #{hex_rgb(#fbb6ce)}; - --color-pink-400: #{hex_rgb(#f687b3)}; - --color-pink-500: #{hex_rgb(#ed64a6)}; - --color-pink-600: #{hex_rgb(#d53f8c)}; - --color-pink-700: #{hex_rgb(#b83280)}; - --color-pink-800: #{hex_rgb(#97266d)}; - --color-pink-900: #{hex_rgb(#702459)}; } diff --git a/resources/views/forms/search.blade.php b/resources/views/forms/search.blade.php index cca0468..ec1c23b 100644 --- a/resources/views/forms/search.blade.php +++ b/resources/views/forms/search.blade.php @@ -1,7 +1,7 @@ - diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 9dafbdc..7a0133a 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,15 +1,17 @@ @include('layouts.header')
-
+
@yield('content')
@hasSection('sidebar') -