Elementor Widget Builder

<?php
/**
 * The "Feature Card" Elementor widget.
 *
 * Loaded by the add-on only once Elementor is running, so the parent class
 * is always available by the time this file is read.
 */

defined( 'ABSPATH' ) || exit;

class Feature_Card_Widget extends \Elementor\Widget_Base {

	/**
	 * The name stored in every page that uses the widget. Changing it later
	 * orphans those pages.
	 *
	 * @return string
	 */
	public function get_name() {
		return 'feature-card';
	}

	/**
	 * The label in the panel.
	 *
	 * @return string
	 */
	public function get_title() {
		return esc_html__( 'Feature Card', 'my-addon' );
	}

	/**
	 * The panel icon.
	 *
	 * @return string
	 */
	public function get_icon() {
		return 'eicon-info-box';
	}

	/**
	 * Which panel category it appears in.
	 *
	 * @return array
	 */
	public function get_categories() {
		return array( 'general' );
	}

	/**
	 * What the panel search matches on, besides the title.
	 *
	 * @return array
	 */
	public function get_keywords() {
		return array( 'card', 'feature' );
	}

	/**
	 * Declares the controls.
	 */
	protected function register_controls() {
		$this->start_controls_section(
			'section_content',
			array(
				'label' => esc_html__( 'Content', 'my-addon' ),
				'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'icon',
			array(
				'label' => esc_html__( 'Icon', 'my-addon' ),
				'type'  => \Elementor\Controls_Manager::ICONS,
			)
		);

		$this->add_control(
			'title',
			array(
				'label'   => esc_html__( 'Title', 'my-addon' ),
				'type'    => \Elementor\Controls_Manager::TEXT,
				'default' => 'Fast by default',
			)
		);

		$this->add_control(
			'body',
			array(
				'label'   => esc_html__( 'Body', 'my-addon' ),
				'type'    => \Elementor\Controls_Manager::TEXTAREA,
				'default' => 'A sentence about it.',
			)
		);

		$this->add_control(
			'boxed',
			array(
				'label'        => esc_html__( 'Boxed', 'my-addon' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style',
			array(
				'label' => esc_html__( 'Style', 'my-addon' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'title_color',
			array(
				'label'     => esc_html__( 'Title colour', 'my-addon' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .feature-card__title' => 'color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Front end output.
	 *
	 * Settings are whatever the editor typed, so every value is escaped
	 * for the place it lands in. Style controls are absent here on
	 * purpose: Elementor writes them as CSS from their selectors.
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		$classes = array( 'feature-card' );

		if ( 'yes' === $settings['boxed'] ) {
			$classes[] = 'feature-card--boxed';
		}

		printf( '<div class="%s">', esc_attr( implode( ' ', $classes ) ) );

		if ( ! empty( $settings['icon']['value'] ) ) {
			echo '<span class="feature-card__icon">';
			\Elementor\Icons_Manager::render_icon( $settings['icon'], array( 'aria-hidden' => 'true' ) );
			echo '</span>';
		}

		printf( '<div class="feature-card__title">%s</div>', esc_html( $settings['title'] ) );

		printf( '<div class="feature-card__body">%s</div>', wp_kses_post( $settings['body'] ) );

		echo '</div>';
	}
}