HTML to Elementor Widget Converter

<?php
/**
 * The "Feature Card" Elementor widget, from pasted HTML.
 *
 * The controls were taken from the markup: text a person wrote became a
 * control, an image became MEDIA, a link target became URL, and the rest
 * stayed as markup. Move anything to the Style tab that belongs there.
 */

defined( 'ABSPATH' ) || exit;

class Bucket_Feature_Card extends \Elementor\Widget_Base {

	/**
	 * The name stored in every page that uses the widget.
	 *
	 * @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', 'bucket-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' );
	}

	/**
	 * The controls, one per piece of the markup a person would want to change.
	 */
	protected function register_controls() {
		$this->start_controls_section(
			'content',
			array(
				'label' => esc_html__( 'Content', 'bucket-addon' ),
				'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'image',
			array(
				'label' => esc_html__( 'Image', 'bucket-addon' ),
				'type'  => \Elementor\Controls_Manager::MEDIA,
				'default' => array(
					'url' => '/wp-content/uploads/icon.png',
				),
			)
		);

		$this->add_control(
			'image_alt',
			array(
				'label' => esc_html__( 'Image Alt', 'bucket-addon' ),
				'type'  => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'A small icon', 'bucket-addon' ),
				'label_block' => true,
			)
		);

		$this->add_control(
			'h3_text',
			array(
				'label' => esc_html__( 'H3 Text', 'bucket-addon' ),
				'type'  => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'What this card is for', 'bucket-addon' ),
				'label_block' => true,
			)
		);

		$this->add_control(
			'p_text',
			array(
				'label' => esc_html__( 'P Text', 'bucket-addon' ),
				'type'  => \Elementor\Controls_Manager::TEXTAREA,
				'default' => esc_html__( 'A sentence or two of body copy, long enough that the editor will want a textarea rather than a single line.', 'bucket-addon' ),
				'label_block' => true,
				'rows' => 4,
			)
		);

		$this->add_control(
			'link',
			array(
				'label' => esc_html__( 'Link', 'bucket-addon' ),
				'type'  => \Elementor\Controls_Manager::URL,
				'default' => array(
					'url' => '/tools/',
				),
			)
		);

		$this->add_control(
			'a_text',
			array(
				'label' => esc_html__( 'A Text', 'bucket-addon' ),
				'type'  => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__( 'Read more', 'bucket-addon' ),
				'label_block' => true,
			)
		);

		$this->end_controls_section();
	}

	/**
	 * The front end. Everything a person can change is read from settings;
	 * everything else is the markup it came from.
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();
		?>
		<div class="feature-card">
			<img src="<?php echo esc_url( $settings['image']['url'] ); ?>" alt="<?php echo esc_attr( $settings['image_alt'] ); ?>" width="64" height="64" />
			<h3>
				<?php echo esc_html( $settings['h3_text'] ); ?>
			</h3>
			<p>
				<?php echo esc_html( $settings['p_text'] ); ?>
			</p>
			<a href="<?php echo esc_url( $settings['link']['url'] ); ?>" class="feature-card__link">
				<?php echo esc_html( $settings['a_text'] ); ?>
			</a>
		</div>
		<?php
	}
}