heading.php 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor heading widget.
  8. *
  9. * Elementor widget that displays an eye-catching headlines.
  10. *
  11. * @since 1.0.0
  12. */
  13. class Widget_Heading extends Widget_Base {
  14. /**
  15. * Get widget name.
  16. *
  17. * Retrieve heading widget name.
  18. *
  19. * @since 1.0.0
  20. * @access public
  21. *
  22. * @return string Widget name.
  23. */
  24. public function get_name() {
  25. return 'heading';
  26. }
  27. /**
  28. * Get widget title.
  29. *
  30. * Retrieve heading widget title.
  31. *
  32. * @since 1.0.0
  33. * @access public
  34. *
  35. * @return string Widget title.
  36. */
  37. public function get_title() {
  38. return __( 'Heading', 'elementor' );
  39. }
  40. /**
  41. * Get widget icon.
  42. *
  43. * Retrieve heading widget icon.
  44. *
  45. * @since 1.0.0
  46. * @access public
  47. *
  48. * @return string Widget icon.
  49. */
  50. public function get_icon() {
  51. return 'eicon-type-tool';
  52. }
  53. /**
  54. * Get widget categories.
  55. *
  56. * Retrieve the list of categories the heading widget belongs to.
  57. *
  58. * Used to determine where to display the widget in the editor.
  59. *
  60. * @since 2.0.0
  61. * @access public
  62. *
  63. * @return array Widget categories.
  64. */
  65. public function get_categories() {
  66. return [ 'basic' ];
  67. }
  68. /**
  69. * Get widget keywords.
  70. *
  71. * Retrieve the list of keywords the widget belongs to.
  72. *
  73. * @since 2.1.0
  74. * @access public
  75. *
  76. * @return array Widget keywords.
  77. */
  78. public function get_keywords() {
  79. return [ 'heading', 'title', 'text' ];
  80. }
  81. /**
  82. * Register heading widget controls.
  83. *
  84. * Adds different input fields to allow the user to change and customize the widget settings.
  85. *
  86. * @since 1.0.0
  87. * @access protected
  88. */
  89. protected function _register_controls() {
  90. $this->start_controls_section(
  91. 'section_title',
  92. [
  93. 'label' => __( 'Title', 'elementor' ),
  94. ]
  95. );
  96. $this->add_control(
  97. 'title',
  98. [
  99. 'label' => __( 'Title', 'elementor' ),
  100. 'type' => Controls_Manager::TEXTAREA,
  101. 'dynamic' => [
  102. 'active' => true,
  103. ],
  104. 'placeholder' => __( 'Enter your title', 'elementor' ),
  105. 'default' => __( 'Add Your Heading Text Here', 'elementor' ),
  106. ]
  107. );
  108. $this->add_control(
  109. 'link',
  110. [
  111. 'label' => __( 'Link', 'elementor' ),
  112. 'type' => Controls_Manager::URL,
  113. 'dynamic' => [
  114. 'active' => true,
  115. ],
  116. 'default' => [
  117. 'url' => '',
  118. ],
  119. 'separator' => 'before',
  120. ]
  121. );
  122. $this->add_control(
  123. 'size',
  124. [
  125. 'label' => __( 'Size', 'elementor' ),
  126. 'type' => Controls_Manager::SELECT,
  127. 'default' => 'default',
  128. 'options' => [
  129. 'default' => __( 'Default', 'elementor' ),
  130. 'small' => __( 'Small', 'elementor' ),
  131. 'medium' => __( 'Medium', 'elementor' ),
  132. 'large' => __( 'Large', 'elementor' ),
  133. 'xl' => __( 'XL', 'elementor' ),
  134. 'xxl' => __( 'XXL', 'elementor' ),
  135. ],
  136. ]
  137. );
  138. $this->add_control(
  139. 'header_size',
  140. [
  141. 'label' => __( 'HTML Tag', 'elementor' ),
  142. 'type' => Controls_Manager::SELECT,
  143. 'options' => [
  144. 'h1' => 'H1',
  145. 'h2' => 'H2',
  146. 'h3' => 'H3',
  147. 'h4' => 'H4',
  148. 'h5' => 'H5',
  149. 'h6' => 'H6',
  150. 'div' => 'div',
  151. 'span' => 'span',
  152. 'p' => 'p',
  153. ],
  154. 'default' => 'h2',
  155. ]
  156. );
  157. $this->add_responsive_control(
  158. 'align',
  159. [
  160. 'label' => __( 'Alignment', 'elementor' ),
  161. 'type' => Controls_Manager::CHOOSE,
  162. 'options' => [
  163. 'left' => [
  164. 'title' => __( 'Left', 'elementor' ),
  165. 'icon' => 'fa fa-align-left',
  166. ],
  167. 'center' => [
  168. 'title' => __( 'Center', 'elementor' ),
  169. 'icon' => 'fa fa-align-center',
  170. ],
  171. 'right' => [
  172. 'title' => __( 'Right', 'elementor' ),
  173. 'icon' => 'fa fa-align-right',
  174. ],
  175. 'justify' => [
  176. 'title' => __( 'Justified', 'elementor' ),
  177. 'icon' => 'fa fa-align-justify',
  178. ],
  179. ],
  180. 'default' => '',
  181. 'selectors' => [
  182. '{{WRAPPER}}' => 'text-align: {{VALUE}};',
  183. ],
  184. ]
  185. );
  186. $this->add_control(
  187. 'view',
  188. [
  189. 'label' => __( 'View', 'elementor' ),
  190. 'type' => Controls_Manager::HIDDEN,
  191. 'default' => 'traditional',
  192. ]
  193. );
  194. $this->end_controls_section();
  195. $this->start_controls_section(
  196. 'section_title_style',
  197. [
  198. 'label' => __( 'Title', 'elementor' ),
  199. 'tab' => Controls_Manager::TAB_STYLE,
  200. ]
  201. );
  202. $this->add_control(
  203. 'title_color',
  204. [
  205. 'label' => __( 'Text Color', 'elementor' ),
  206. 'type' => Controls_Manager::COLOR,
  207. 'scheme' => [
  208. 'type' => Scheme_Color::get_type(),
  209. 'value' => Scheme_Color::COLOR_1,
  210. ],
  211. 'selectors' => [
  212. // Stronger selector to avoid section style from overwriting
  213. '{{WRAPPER}}.elementor-widget-heading .elementor-heading-title' => 'color: {{VALUE}};',
  214. ],
  215. ]
  216. );
  217. $this->add_group_control(
  218. Group_Control_Typography::get_type(),
  219. [
  220. 'name' => 'typography',
  221. 'scheme' => Scheme_Typography::TYPOGRAPHY_1,
  222. 'selector' => '{{WRAPPER}} .elementor-heading-title',
  223. ]
  224. );
  225. $this->add_group_control(
  226. Group_Control_Text_Shadow::get_type(),
  227. [
  228. 'name' => 'text_shadow',
  229. 'selector' => '{{WRAPPER}} .elementor-heading-title',
  230. ]
  231. );
  232. $this->add_control(
  233. 'blend_mode',
  234. [
  235. 'label' => __( 'Blend Mode', 'elementor' ),
  236. 'type' => Controls_Manager::SELECT,
  237. 'options' => [
  238. '' => __( 'Normal', 'elementor' ),
  239. 'multiply' => 'Multiply',
  240. 'screen' => 'Screen',
  241. 'overlay' => 'Overlay',
  242. 'darken' => 'Darken',
  243. 'lighten' => 'Lighten',
  244. 'color-dodge' => 'Color Dodge',
  245. 'saturation' => 'Saturation',
  246. 'color' => 'Color',
  247. 'difference' => 'Difference',
  248. 'exclusion' => 'Exclusion',
  249. 'hue' => 'Hue',
  250. 'luminosity' => 'Luminosity',
  251. ],
  252. 'selectors' => [
  253. '{{WRAPPER}} .elementor-heading-title' => 'mix-blend-mode: {{VALUE}}',
  254. ],
  255. 'separator' => 'none',
  256. ]
  257. );
  258. $this->end_controls_section();
  259. }
  260. /**
  261. * Render heading widget output on the frontend.
  262. *
  263. * Written in PHP and used to generate the final HTML.
  264. *
  265. * @since 1.0.0
  266. * @access protected
  267. */
  268. protected function render() {
  269. $settings = $this->get_settings_for_display();
  270. if ( empty( $settings['title'] ) ) {
  271. return;
  272. }
  273. $this->add_render_attribute( 'title', 'class', 'elementor-heading-title' );
  274. if ( ! empty( $settings['size'] ) ) {
  275. $this->add_render_attribute( 'title', 'class', 'elementor-size-' . $settings['size'] );
  276. }
  277. $this->add_inline_editing_attributes( 'title' );
  278. $title = $settings['title'];
  279. if ( ! empty( $settings['link']['url'] ) ) {
  280. $this->add_render_attribute( 'url', 'href', $settings['link']['url'] );
  281. if ( $settings['link']['is_external'] ) {
  282. $this->add_render_attribute( 'url', 'target', '_blank' );
  283. }
  284. if ( ! empty( $settings['link']['nofollow'] ) ) {
  285. $this->add_render_attribute( 'url', 'rel', 'nofollow' );
  286. }
  287. $title = sprintf( '<a %1$s>%2$s</a>', $this->get_render_attribute_string( 'url' ), $title );
  288. }
  289. $title_html = sprintf( '<%1$s %2$s>%3$s</%1$s>', $settings['header_size'], $this->get_render_attribute_string( 'title' ), $title );
  290. echo $title_html;
  291. }
  292. /**
  293. * Render heading widget output in the editor.
  294. *
  295. * Written as a Backbone JavaScript template and used to generate the live preview.
  296. *
  297. * @since 1.0.0
  298. * @access protected
  299. */
  300. protected function _content_template() {
  301. ?>
  302. <#
  303. var title = settings.title;
  304. if ( '' !== settings.link.url ) {
  305. title = '<a href="' + settings.link.url + '">' + title + '</a>';
  306. }
  307. view.addRenderAttribute( 'title', 'class', [ 'elementor-heading-title', 'elementor-size-' + settings.size ] );
  308. view.addInlineEditingAttributes( 'title' );
  309. var title_html = '<' + settings.header_size + ' ' + view.getRenderAttributeString( 'title' ) + '>' + title + '</' + settings.header_size + '>';
  310. print( title_html );
  311. #>
  312. <?php
  313. }
  314. }