diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..71871af --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +.DS_* diff --git a/assets/js/dist/canvas.js b/assets/js/dist/canvas.js index af33d57..1e7a893 100644 --- a/assets/js/dist/canvas.js +++ b/assets/js/dist/canvas.js @@ -1,7 +1,8 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;oadd_section( 'general', array( 'title' => __( 'General' ), 'priority' => 10, @@ -60,7 +60,7 @@ protected function register_controls() { 'section' => 'general', 'priority' => $priority += 10, ) ); - + // This allows you to also add one of many standard control types.. $general_control_types = array( 'style' ); @@ -77,7 +77,7 @@ protected function register_controls() { ), ), ); - + // Note the starting priority is passed to the function tailor_control_presets( $this, $general_control_types, $general_control_arguments, $priority ); @@ -125,17 +125,17 @@ public function generate_css( $atts ) { // Generate CSS rules for standard settings $css_rules = tailor_css_presets( $css_rules, $atts, $excluded_control_types ); - // Create your own - if ( 'style-1' == $atts['style'] ) { - $color = 'red'; - } - else if ( 'style-2' == $atts['style'] ) { - $color = 'blue'; - } - else if ( 'style-3' == $atts['style'] ) { - $color = 'green'; - } - + if (isset($atts['style'])) { + // Create your own + if ('style-1' == $atts['style']) { + $color = 'red'; + } else if ('style-2' == $atts['style']) { + $color = 'blue'; + } else if ('style-3' == $atts['style']) { + $color = 'green'; + } + } + if ( ! empty( $color ) ) { $css_rules[] = array( 'selectors' => array( '' ), @@ -144,8 +144,8 @@ public function generate_css( $atts ) { ), ); } - + return $css_rules; } } -} \ No newline at end of file +} diff --git a/includes/elements/class-flipcard.php b/includes/elements/class-flipcard.php new file mode 100644 index 0000000..b08d5af --- /dev/null +++ b/includes/elements/class-flipcard.php @@ -0,0 +1,172 @@ +add_section( 'general', array( + 'title' => __( 'Front', 'tailor' ), + 'priority' => $priority += 10, + ) ); + + $this->add_section( 'back', array( + 'title' => __( 'Back', 'tailor' ), + 'priority' => $priority += 10, + ) ); + + $this->add_section( 'colors', array( + 'title' => __( 'Colors', 'tailor' ), + 'priority' => $priority += 10, + ) ); + + $this->add_section( 'attributes', array( + 'title' => __( 'Attributes', 'tailor' ), + 'priority' => $priority += 10, + ) ); + + $priority = 0; + + $general_control_types = array( + 'title', + 'horizontal_alignment', + 'horizontal_alignment_tablet', + 'horizontal_alignment_mobile', + 'image', + ); + $general_control_arguments = array( + 'title' => array( + 'setting' => array( + 'default' => $this->label, + ), + ), + ); + tailor_control_presets( $this, $general_control_types, $general_control_arguments, $priority ); + + // Add as many custom settings as you like.. + $this->add_setting( 'back_title', array( + 'sanitize_callback' => 'tailor_sanitize_text', + 'default' => 'Card Back title', + ) ); + $this->add_control( 'back_title', array( + 'label' => __( 'Back Title' ), + 'type' => 'text', + 'section' => 'back', + 'priority' => $priority += 10, + ) ); + + $card_back_control_types = array(); + $card_back_control_arguments = array(); + tailor_control_presets( $this, $card_back_control_types, $card_back_control_arguments, $priority ); + + $priority = 0; + $color_control_types = array( + 'color', + 'link_color', + 'link_color_hover', + 'heading_color', + 'background_color', + 'border_color', + ); + $color_control_arguments = array(); + tailor_control_presets( $this, $color_control_types, $color_control_arguments, $priority ); + + $priority = 0; + $attribute_control_types = array( + 'class', + 'padding', + 'padding_tablet', + 'padding_mobile', + 'margin', + 'margin_tablet', + 'margin_mobile', + 'border_style', + 'border_width', + 'border_width_tablet', + 'border_width_mobile', + 'border_radius', + 'shadow', + 'background_image', + 'background_repeat', + 'background_position', + 'background_size', + 'background_attachment', + ); + $attribute_control_arguments = array(); + tailor_control_presets( $this, $attribute_control_types, $attribute_control_arguments, $priority ); + } + + /** + * Returns custom CSS rules for the element. + * + * @since 1.0.0 + * + * @param $atts + * @return array + */ + public function generate_css( $atts = array() ) { + + $css_rules = array(); + $excluded_control_types = array( + 'padding', + 'padding_tablet', + 'padding_mobile' + ); + $css_rules = tailor_css_presets( $css_rules, $atts, $excluded_control_types ); + + $selectors = array( + 'padding' => array( '.tailor-card__content' ), + 'padding_tablet' => array( '.tailor-card__content' ), + 'padding_mobile' => array( '.tailor-card__content' ), + ); + $css_rules = tailor_generate_attribute_css_rules( $css_rules, $atts, $selectors ); + + // Header border color + if ( ! empty( $atts['border_color'] ) ) { + $css_rules[] = array( + 'setting' => 'border_color', + 'selectors' => array( '.tailor-card__header' ), + 'declarations' => array( + 'border-color' => esc_attr( $atts['border_color'] ), + ), + ); + } + + // Header image + if ( ! empty( $atts['image'] ) && is_numeric( $atts['image'] ) ) { + $background_image_info = wp_get_attachment_image_src( $atts['image'], 'full' ); + $background_image_src = $background_image_info[0]; + $css_rules[] = array( + 'setting' => 'image', + 'selectors' => array( '.tailor-card__header' ), + 'declarations' => array( + 'background' => "url('{$background_image_src}') center center no-repeat", + 'background-size' => 'cover', + ), + ); + } + + return $css_rules; + } + } +} diff --git a/includes/elements/class-test.php b/includes/elements/class-test.php index b8522e6..d6ca00b 100644 --- a/includes/elements/class-test.php +++ b/includes/elements/class-test.php @@ -21,7 +21,7 @@ class Tailor_Test_Element extends Tailor_Element { * @access protected */ protected function register_controls() { - + $this->add_section( 'general', array( 'title' => __( 'General' ), 'priority' => 10, @@ -335,4 +335,4 @@ public function generate_css( $atts ) { return $css_rules; } } -} \ No newline at end of file +} diff --git a/includes/shortcodes/shortcode-flipcard.php b/includes/shortcodes/shortcode-flipcard.php new file mode 100644 index 0000000..9f3b7b6 --- /dev/null +++ b/includes/shortcodes/shortcode-flipcard.php @@ -0,0 +1,82 @@ + empty( $atts['id'] ) ? null : $atts['id'], + 'class' => explode( ' ', "tailor-element tailor-card {$atts['class']}" ), + 'data' => array(), + ); + + if ( isset($atts['image']) && is_numeric( $atts['image'] ) ) { + $html_atts['class'][] = 'has-header-image'; + } + + /** + * Filter the HTML attributes for the element. + * + * @since 1.7.0 + * + * @param array $html_attributes + * @param array $atts + * @param string $tag + */ + $html_atts = apply_filters( 'tailor_shortcode_html_attributes', $html_atts, $atts, $tag ); + $html_atts['class'] = implode( ' ', (array) $html_atts['class'] ); + $html_atts = tailor_get_attributes( $html_atts ); + + ob_start(); + + $title = ! empty( $atts['title'] ) ? '

' . esc_html( (string) $atts['title'] ) . '

' : ''; +mz_pr($atts['back_title']); + + $outer_html = "
%s
"; + $inner_html = '
' . $title . '
' . + '
%s
'; + + tailor_partial( 'content', 'custom', array( + 'item_content' => $content + )); + + $content = ob_get_clean(); + $html = sprintf( $outer_html, sprintf( $inner_html, $content ) ); + + /** + * Filter the HTML for the element. + * + * @since 1.7.0 + * + * @param string $html + * @param string $outer_html + * @param string $inner_html + * @param string $html_atts + * @param array $atts + * @param string $content + * @param string $tag + */ + $html = apply_filters( 'tailor_shortcode_html', $html, $outer_html, $inner_html, $html_atts, $atts, $content, $tag ); + + return $html; + } + + add_shortcode( 'tailor_flipcard', 'tailor_shortcode_flipcard_element' ); +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..892a46e --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "tailor-bs4-extension", + "version": "1.0.0", + "description": "Extend Tailor Page Builder with some Bootstrap 4 Elements.", + "main": "canvas.js", + "scripts": { + "test": "console.log('test')", + "start": "webpack --watch", + "build": "webpack" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/MikeiLL/tailor-bs4-extension.git" + }, + "keywords": [ + "bootstrap", + "'page", + "builder'", + "tailor", + "extension", + "wordpress" + ], + "author": "Mike iLL", + "license": "GPL-3.0", + "bugs": { + "url": "https://github.com/MikeiLL/tailor-bs4-extension/issues" + }, + "homepage": "https://github.com/MikeiLL/tailor-bs4-extension#readme" +} diff --git a/partials/content-custom.php b/partials/content-custom.php index f27031e..4c5445c 100644 --- a/partials/content-custom.php +++ b/partials/content-custom.php @@ -3,9 +3,10 @@ /** * Custom content partial. */ - +global $post; defined( 'ABSPATH' ) or die(); ?>
- + +

I am a thing.

diff --git a/readme.md b/readme.md index 08bff5b..48ef044 100644 --- a/readme.md +++ b/readme.md @@ -35,4 +35,7 @@ Note: Tailor version 1.7.0 (or newer) is required to use this sample extension. ### 1.0.0 -* Initial version \ No newline at end of file +* Initial version + +# Notes +[Webpack Setup Resource](https://github.com/rheinardkorf/webpack-wordpress-demo/tree/01_npm_webpack) diff --git a/tailor-extension.php b/tailor-extension.php index a7843da..f4e62cf 100644 --- a/tailor-extension.php +++ b/tailor-extension.php @@ -1 +1,328 @@ -version(), '1.7.0', '>=' ) // An unsupported version is being used ) { add_action( 'admin_notices', array( $this, 'display_version_notice' ) ); return; } $this->add_actions(); $this->includes(); } /** * Displays an admin notice if an unsupported version of Tailor is being used. * * @since 1.1.0 */ public function display_version_notice() { printf( '

%s

', __( 'Please ensure that Tailor 1.7.0 (or newer) is active to use the sample extension.' ) ); } /** * Includes required plugin files. * * @access protected */ protected function includes() { require_once $this->plugin_dir() . 'includes/functions.php'; } /** * Adds required action hooks. * * @access protected */ protected function add_actions() { // Load element definitions add_action( 'tailor_load_elements', array( $this, 'load_elements' ), 20 ); // Register custom elements add_action( 'tailor_register_elements', array( $this, 'register_elements' ), 99 ); // Register custom template partials director add_filter( 'tailor_plugin_partial_paths', array( $this, 'register_partial_path' ) ); // Enqueue scripts and styles add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles' ) ); add_action( 'tailor_canvas_enqueue_scripts', array( $this, 'enqueue_scripts' ), 99 ); } /** * Loads and registers the new Tailor elements and shortcodes. */ public function load_elements() { require_once $this->plugin_dir() . 'includes/elements/class-custom-child.php'; require_once $this->plugin_dir() . 'includes/elements/class-custom-container.php'; require_once $this->plugin_dir() . 'includes/elements/class-custom-content.php'; require_once $this->plugin_dir() . 'includes/elements/class-custom-wrapper.php'; require_once $this->plugin_dir() . 'includes/elements/class-test.php'; require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-custom-child.php'; require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-custom-container.php'; require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-custom-content.php'; require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-custom-wrapper.php'; require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-test.php'; } /** * Loads and registers the new Tailor elements and shortcodes. * * @param $element_manager Tailor_Elements */ public function register_elements( $element_manager ) { $element_manager->add_element( 'tailor_custom_content', array( 'label' => __( 'Custom content' ), 'description' => __( 'A custom content element' ), 'badge' => __( 'Custom' ), // 'class_name' => 'Tailor_Custom_Element', // 'type' => 'container', 'wrapper', 'child', 'content', ) ); $element_manager->add_element( 'tailor_custom_wrapper', array( 'label' => __( 'Custom wrapper' ), 'description' => __( 'A custom wrapper element' ), 'badge' => __( 'Custom' ), 'type' => 'wrapper', 'child_container' => '.tailor-custom-wrapper__content', ) ); $element_manager->add_element( 'tailor_custom_container', array( 'label' => __( 'Custom container' ), 'description' => __( 'A custom container element' ), 'badge' => __( 'Custom' ), 'type' => 'container', 'child' => 'tailor_custom_child', ) ); $element_manager->add_element( 'tailor_custom_child', array( 'label' => __( 'Custom child' ), 'type' => 'child', ) ); $element_manager->add_element( 'tailor_test', array( 'label' => __( 'All controls' ), 'description' => __( 'Contains all control types' ), 'badge' => __( 'Custom' ), ) ); } /** * Enqueues frontend styles. */ public function enqueue_styles() { wp_enqueue_style( 'tailor-custom-styles', $this->plugin_url() . 'assets/css/frontend' . ( SCRIPT_DEBUG ? '.css' : '.min.css' ), array(), $this->version() ); } /** * Enqueues canvas scripts. */ public function enqueue_scripts() { wp_enqueue_script( 'tailor-custom-canvas', $this->plugin_url() . 'assets/js/dist/canvas' . ( SCRIPT_DEBUG ? '.js' : '.min.js' ), array( 'tailor-canvas' ), $this->version(), true ); } /** * Registers the partial directory for this extension plugin. * * @param $paths * * @return array */ public function register_partial_path( $paths ) { $paths[] = $this->plugin_dir() . 'partials/'; return $paths; } /** * Returns the version number of the plugin. * * @return string */ public function version() { return self::$version; } /** * Returns the plugin basename. * * @return string */ public function plugin_basename() { return self::$plugin_basename; } /** * Returns the plugin name. * * @return string */ public function plugin_name() { return self::$plugin_name; } /** * Returns the plugin directory. * * @return string */ public function plugin_dir() { return self::$plugin_dir; } /** * Returns the plugin URL. * * @return string */ public function plugin_url() { return self::$plugin_url; } } } if ( ! function_exists( 'tailor_extension' ) ) { /** * Returns the Tailor Extension instance. * * @return Tailor_Extension */ function tailor_extension() { return Tailor_Extension::instance(); } } /** * Initializes the Tailor Extension. */ tailor_extension(); \ No newline at end of file +version(), '1.7.0', '>=' ) // An unsupported version is being used + ) { + add_action( 'admin_notices', array( $this, 'display_version_notice' ) ); + return; + } + + $this->add_actions(); + $this->includes(); + } + + /** + * Displays an admin notice if an unsupported version of Tailor is being used. + * + * @since 1.1.0 + */ + public function display_version_notice() { + printf( + '

%s

', + __( 'Please ensure that Tailor 1.7.0 (or newer) is active to use the sample extension.' ) + ); + } + + /** + * Includes required plugin files. + * + * @access protected + */ + protected function includes() { + require_once $this->plugin_dir() . 'includes/functions.php'; + } + + /** + * Adds required action hooks. + * + * @access protected + */ + protected function add_actions() { + + // Load element definitions + add_action( 'tailor_load_elements', array( $this, 'load_elements' ), 20 ); + + // Register custom elements + add_action( 'tailor_register_elements', array( $this, 'register_elements' ), 99 ); + + // Register custom template partials director + add_filter( 'tailor_plugin_partial_paths', array( $this, 'register_partial_path' ) ); + + // Enqueue scripts and styles + add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles' ) ); + add_action( 'tailor_canvas_enqueue_scripts', array( $this, 'enqueue_scripts' ), 99 ); + } + + /** + * Loads and registers the new Tailor elements and shortcodes. + */ + public function load_elements() { + require_once $this->plugin_dir() . 'includes/elements/class-custom-child.php'; + require_once $this->plugin_dir() . 'includes/elements/class-custom-container.php'; + require_once $this->plugin_dir() . 'includes/elements/class-custom-content.php'; + require_once $this->plugin_dir() . 'includes/elements/class-custom-wrapper.php'; + require_once $this->plugin_dir() . 'includes/elements/class-flipcard.php'; + require_once $this->plugin_dir() . 'includes/elements/class-test.php'; + + require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-custom-child.php'; + require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-custom-container.php'; + require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-custom-content.php'; + require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-custom-wrapper.php'; + require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-flipcard.php'; + require_once $this->plugin_dir() . 'includes/shortcodes/shortcode-test.php'; + } + + /** + * Loads and registers the new Tailor elements and shortcodes. + * + * @param $element_manager Tailor_Elements + */ + public function register_elements( $element_manager ) { + + $element_manager->add_element( 'tailor_custom_content', array( + 'label' => __( 'Custom content' ), + 'description' => __( 'A custom content element' ), + 'badge' => __( 'Custom' ), + // 'class_name' => 'Tailor_Custom_Element', + // 'type' => 'container', 'wrapper', 'child', 'content', + ) ); + + $element_manager->add_element( 'tailor_custom_wrapper', array( + 'label' => __( 'Custom wrapper' ), + 'description' => __( 'A custom wrapper element' ), + 'badge' => __( 'Custom' ), + 'type' => 'wrapper', + 'child_container' => '.tailor-custom-wrapper__content', + ) ); + + $element_manager->add_element( 'tailor_flipcard', array( + 'label' => __( 'Flipcard' ), + 'description' => __( 'Add a flipcard' ), + 'badge' => __( 'Intensity' ), + 'type' => 'wrapper', + 'child_container' => '.tailor-flipcard__content', + ) ); + + $element_manager->add_element( 'tailor_custom_container', array( + 'label' => __( 'Custom container' ), + 'description' => __( 'A custom container element' ), + 'badge' => __( 'Custom' ), + 'type' => 'container', + 'child' => 'tailor_custom_child', + ) ); + + $element_manager->add_element( 'tailor_custom_child', array( + 'label' => __( 'Custom child' ), + 'type' => 'child', + ) ); + + $element_manager->add_element( 'tailor_test', array( + 'label' => __( 'All controls' ), + 'description' => __( 'Contains all control types' ), + 'badge' => __( 'Custom' ), + ) ); + + } + + /** + * Enqueues frontend styles. + */ + public function enqueue_styles() { + wp_enqueue_style( + 'tailor-custom-styles', + $this->plugin_url() . 'assets/css/frontend' . ( SCRIPT_DEBUG ? '.css' : '.min.css' ), + array(), + $this->version() + ); + } + + /** + * Enqueues canvas scripts. + */ + public function enqueue_scripts() { + wp_enqueue_script( + 'tailor-custom-canvas', + $this->plugin_url() . 'assets/js/' . ( SCRIPT_DEBUG ? 'src/canvas/canvas.js' : 'dist/canvas.min.js' ), + array( 'tailor-canvas' ), + $this->version(), + true + ); + } + + /** + * Registers the partial directory for this extension plugin. + * + * @param $paths + * + * @return array + */ + public function register_partial_path( $paths ) { + $paths[] = $this->plugin_dir() . 'partials/'; + return $paths; + } + + /** + * Returns the version number of the plugin. + * + * @return string + */ + public function version() { + return self::$version; + } + + /** + * Returns the plugin basename. + * + * @return string + */ + public function plugin_basename() { + return self::$plugin_basename; + } + + /** + * Returns the plugin name. + * + * @return string + */ + public function plugin_name() { + return self::$plugin_name; + } + + /** + * Returns the plugin directory. + * + * @return string + */ + public function plugin_dir() { + return self::$plugin_dir; + } + + /** + * Returns the plugin URL. + * + * @return string + */ + public function plugin_url() { + return self::$plugin_url; + } + } +} + +if ( ! function_exists( 'tailor_extension' ) ) { + + /** + * Returns the Tailor Extension instance. + * + * @return Tailor_Extension + */ + function tailor_extension() { + return Tailor_Extension::instance(); + } +} + +/** + * Initializes the Tailor Extension. + */ +tailor_extension(); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..2ace139 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,9 @@ +const path = require( 'path' ); + +module.exports = { + entry: './assets/js/src/canvas/canvas.js', + output: { + filename: 'canvas.min.js', + path: path.resolve( __dirname, 'assets/js/dist' ) + } +}