class Setup {
public function register() {
+
+ // Customise Elementor widgets
+ $this->register_customisations();
+
// Register widgets with Elementor
add_action('elementor/widgets/widgets_registered', [$this, 'register_widgets']);
add_action('elementor/frontend/after_register_scripts', [$this, 'register_scripts']);
// Add element category in editor panel
- add_action('elementor/init', [$this, 'register_category']);
+ //add_action('elementor/init', [$this, 'register_category']);
+ }
+
+ public function register_customisations() {
+
+ // ToDo: customise heading widget to add prefix_class for the alignment in order to control position of underline when heading is centred vs left aligned
+
}
public function register_widgets() {
$elementor = Plugin::$instance;
$elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() );
+ $elementor->widgets_manager->register_widget_type( new Widgets\HeroBlock() );
$elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
}
// Widgets\Carousel::register_scripts();
}
- public function register_category() {
-
- Plugin::$instance->elements_manager->add_category(
- 'physioassist-elements',
- [
- 'title' => __( 'PhysioAssist Custom Elements', 'physioassist' ),
- 'icon' => 'fa fa-plug', // default icon
- ],
- 1 // position
- );
- }
+ // Ref: https://developers.elementor.com/widget-categories/
+ // Now using standard 'theme-elements' category in favour of this one
+// public function register_category() {
+//
+// Plugin::$instance->elements_manager->add_category(
+// 'physioassist-elements',
+// [
+// 'title' => __( 'PhysioAssist Custom Elements', 'physioassist' ),
+// 'icon' => 'fa fa-plug', // default icon
+// ],
+// 1 // position
+// );
+// }
}
--- /dev/null
+<?php
+
+namespace PhysioAssist\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+
+class HeroBlock extends Widget_Base {
+
+ protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
+
+ // Widget name / ID
+ public function get_name() {
+ return 'cube-hero';
+ }
+
+ // Elementor widget title
+ public function get_title() {
+ return __( 'Hero Block', 'cube' );
+ }
+
+ // Elementor interface icon
+ public function get_icon() {
+ return 'eicon-info-box';
+ }
+
+ // Where to display the widget in the Elementor interface
+ public function get_categories() {
+ return [ 'theme-elements' ];
+ }
+
+ /**
+ * List of scripts the widget depends on.
+ * Used to set scripts dependencies required to run the widget.
+ *
+ * @since 1.0.0
+ * @access public
+ * @return array Widget scripts dependencies.
+ */
+ public function get_script_depends() {
+ return [];
+ }
+ /**
+ * Register the widget controls.
+ * Adds different input fields to allow the user to change and customize the widget settings.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'section_content',
+ [
+ 'label' => __( 'Hero Block', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'subtitle',
+ [
+ 'label' => __( 'Subtitle', 'cube' ),
+ 'type' => Controls_Manager::TEXT,
+ 'label_block' => true,
+ ]
+ );
+
+ $this->add_control(
+ 'title',
+ [
+ 'label' => __( 'Title', 'elementor' ),
+ 'type' => Controls_Manager::TEXTAREA,
+ 'placeholder' => __( 'Enter your title', 'elementor' ),
+ 'default' => '',
+ ]
+ );
+
+ $this->add_control(
+ 'body',
+ [
+ 'label' => __('Body', 'cube'),
+ 'type' => Controls_Manager::WYSIWYG,
+ 'default' => '',
+ ]
+ );
+
+ $this->add_control(
+ 'cta_text',
+ [
+ 'label' => __('Call to Action text', 'cube'),
+ 'type' => Controls_Manager::TEXT,
+ 'default' => ''
+ ]
+ );
+
+ $this->add_control(
+ 'cta_link',
+ [
+ 'label' => __('Call to Action link', 'cube'),
+ 'type' => Controls_Manager::URL,
+ 'default' => [
+ 'url' => '',
+ 'is_external' => false,
+ ],
+ 'show_external' => true
+ ]
+ );
+
+ $this->add_control(
+ 'image',
+ [
+ 'label' => __( 'Background Image', 'elementor' ),
+ 'type' => Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => Utils::get_placeholder_image_src(),
+ ],
+ ]
+ );
+
+ $this->end_controls_section();
+
+ $this->start_controls_section(
+ 'section_text_sizes',
+ [
+ 'label' => __( 'Text Sizing', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'max_width',
+ [
+ 'label' => __( 'Maximum Width', 'cube' ),
+ 'type' => Controls_Manager::SLIDER,
+ 'range' => [
+ 'px' => [
+ 'min' => 400,
+ 'max' => 1600,
+ 'step' => 10,
+ ],
+ '%' => [
+ 'min' => 0,
+ 'max' => 100,
+ ],
+ ],
+ 'selectors' => [
+ '{{WRAPPER}} .hero-block-content' => 'max-width: {{SIZE}}{{UNIT}};',
+ ],
+ ]
+ );
+
+
+ // Shared properties for text sizing fields
+ $text_sizing_settings = [
+ 'type' => Controls_Manager::SLIDER,
+ 'size_units' => [ 'px', 'em', 'rem' ],
+ 'range' => [
+ 'px' => [
+ 'min' => 1,
+ 'max' => 200,
+ ],
+ ],
+ ];
+
+
+ $this->add_responsive_control(
+ 'subtitle_text_size',
+ [
+ 'label' => __( 'Subtitle', 'cube' ),
+ 'selectors' => [
+ '{{WRAPPER}} .hero-block-subtitle' => 'font-size: {{SIZE}}{{UNIT}};',
+ ],
+ ] + $text_sizing_settings
+ );
+
+ $this->add_responsive_control(
+ 'title_text_size',
+ [
+ 'label' => __( 'Title', 'cube' ),
+ 'selectors' => [
+ '{{WRAPPER}} .hero-block-title' => 'font-size: {{SIZE}}{{UNIT}};',
+ ],
+ ] + $text_sizing_settings
+ );
+
+ $this->add_responsive_control(
+ 'body_text_size',
+ [
+ 'label' => __( 'Body', 'cube' ),
+ 'selectors' => [
+ '{{WRAPPER}} .hero-block-body' => 'font-size: {{SIZE}}{{UNIT}};',
+ ],
+ ] + $text_sizing_settings
+ );
+
+ $this->add_responsive_control(
+ 'cta_text_size',
+ [
+ 'label' => __( 'Call To Action', 'cube' ),
+ 'selectors' => [
+ '{{WRAPPER}} .hero-block-cta' => 'font-size: {{SIZE}}{{UNIT}};',
+ ],
+ ] + $text_sizing_settings
+ );
+
+ $this->end_controls_section();
+
+ }
+ /**
+ * Render the widget output on the frontend.
+ * Written in PHP and used to generate the final HTML.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+ protected function render() {
+
+ $subtitle = $this->get_settings('subtitle');
+ $title = $this->get_settings('title');
+ $body = $this->parse_text_editor($this->get_settings('body'));
+ $cta_text = $this->get_settings('cta_text');
+ $cta_link = $this->get_settings('cta_link');
+ $image = $this->get_settings('image');
+
+ // When this element is present, add a class to the body so the header can be styled differently (inverted colours)
+ add_filter('body_class', function($classes) {
+ $classes[] = 'hero-header';
+ return $classes;
+ });
+
+ // CSS Classes for elements
+ $this->add_render_attribute('subtitle', 'class', ['hero-block-subtitle']);
+ $this->add_render_attribute('title', 'class', ['hero-block-title']);
+ $this->add_render_attribute('body', 'class', ['hero-block-body']);
+ $this->add_render_attribute('cta_text', 'class', ['hero-block-cta']);
+ $this->add_render_attribute('image', 'class', ['hero-block-image']);
+
+ // Add image src attribute
+ $this->add_render_attribute('image', 'src', [$image['url']]);
+
+ // Handle CTA link
+ if ( ! empty( $cta_link['url'] ) ) {
+ $this->add_render_attribute( 'cta_text', 'href', $cta_link['url'] );
+
+ if ( $cta_link['is_external'] ) {
+ $this->add_render_attribute( 'cta_text', 'target', '_blank' );
+ }
+
+ if ( $cta_link['nofollow'] ) {
+ $this->add_render_attribute( 'cta_text', 'rel', 'nofollow' );
+ }
+ }
+
+ // Bail out if image not present
+ if (empty($image['url'])) {
+ echo '<h3>Warning: Hero image must be set</h3>';
+ return false;
+ }
+
+ // Rendered content
+ echo '<div class="hero-block">';
+ echo '<div class="hero-block-inner">';
+ echo "<img {$this->get_render_attribute_string('image')}>";
+ echo '<div class="hero-block-content">';
+ if (!empty($subtitle)) echo "<h3 {$this->get_render_attribute_string('subtitle')}>$subtitle</h3>";
+ if (!empty($title)) echo "<h2 {$this->get_render_attribute_string('title')}>$title</h2>";
+ if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
+ if (!empty($cta_text)) {
+ echo "<a {$this->get_render_attribute_string('cta_text')}>". \BladeSvgSage\svg_image('arrow')->toHtml() ."$cta_text</a>";
+ }
+ echo '</div>'; // .hero-block-content
+ echo '</div>'; // .hero-block-inner
+ echo '</div>'; // .hero-block
+ }
+}
projects / physioassist-wordpress.git / commitdiff