Nenhuma Descrição

button.php 7.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <?php
  2. /**
  3. * Button Block.
  4. *
  5. * @since 8.5.0
  6. *
  7. * @package automattic/jetpack
  8. */
  9. namespace Automattic\Jetpack\Extensions\Button;
  10. use Automattic\Jetpack\Blocks;
  11. use Jetpack_Gutenberg;
  12. const FEATURE_NAME = 'button';
  13. const BLOCK_NAME = 'jetpack/' . FEATURE_NAME;
  14. /**
  15. * Registers the block for use in Gutenberg
  16. * This is done via an action so that we can disable
  17. * registration if we need to.
  18. */
  19. function register_block() {
  20. Blocks::jetpack_register_block(
  21. BLOCK_NAME,
  22. array( 'render_callback' => __NAMESPACE__ . '\render_block' )
  23. );
  24. }
  25. add_action( 'init', __NAMESPACE__ . '\register_block' );
  26. /**
  27. * Button block render callback.
  28. *
  29. * @param array $attributes Array containing the Button block attributes.
  30. * @param string $content The Button block content.
  31. *
  32. * @return string
  33. */
  34. function render_block( $attributes, $content ) {
  35. $save_in_post_content = get_attribute( $attributes, 'saveInPostContent' );
  36. // The Jetpack Button block depends on the core button block styles.
  37. // The following ensures that those styles are enqueued when rendering this block.
  38. enqueue_existing_button_style_dependency( 'core/button' );
  39. enqueue_existing_button_style_dependency( 'core/buttons' );
  40. Jetpack_Gutenberg::load_styles_as_required( FEATURE_NAME );
  41. if ( $save_in_post_content || ! class_exists( 'DOMDocument' ) ) {
  42. return $content;
  43. }
  44. $element = get_attribute( $attributes, 'element' );
  45. $text = get_attribute( $attributes, 'text' );
  46. $unique_id = get_attribute( $attributes, 'uniqueId' );
  47. $url = get_attribute( $attributes, 'url' );
  48. $classes = Blocks::classes( FEATURE_NAME, $attributes, array( 'wp-block-button' ) );
  49. $button_classes = get_button_classes( $attributes );
  50. $button_styles = get_button_styles( $attributes );
  51. $wrapper_styles = get_button_wrapper_styles( $attributes );
  52. $wrapper_attributes = sprintf( ' class="%s" style="%s"', esc_attr( $classes ), esc_attr( $wrapper_styles ) );
  53. $button_attributes = sprintf( ' class="%s" style="%s"', esc_attr( $button_classes ), esc_attr( $button_styles ) );
  54. if ( empty( $unique_id ) ) {
  55. $button_attributes .= ' data-id-attr="placeholder"';
  56. } else {
  57. $button_attributes .= sprintf( ' data-id-attr="%1$s" id="%1$s"', esc_attr( $unique_id ) );
  58. }
  59. if ( 'a' === $element ) {
  60. $button_attributes .= sprintf( ' href="%s" target="_blank" role="button" rel="noopener noreferrer"', esc_url( $url ) );
  61. } elseif ( 'button' === $element ) {
  62. $button_attributes .= ' type="submit"';
  63. } elseif ( 'input' === $element ) {
  64. $button_attributes .= sprintf( ' type="submit" value="%s"', wp_strip_all_tags( $text, true ) );
  65. }
  66. $button = 'input' === $element
  67. ? '<' . $element . $button_attributes . ' />'
  68. : '<' . $element . $button_attributes . '>' . $text . '</' . $element . '>';
  69. // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
  70. return '<div' . $wrapper_attributes . '>' . $button . '</div>';
  71. }
  72. /**
  73. * Get the Button block classes.
  74. *
  75. * @param array $attributes Array containing the block attributes.
  76. *
  77. * @return string
  78. */
  79. function get_button_classes( $attributes ) {
  80. $classes = array( 'wp-block-button__link' );
  81. $has_class_name = array_key_exists( 'className', $attributes );
  82. $has_named_text_color = array_key_exists( 'textColor', $attributes );
  83. $has_custom_text_color = array_key_exists( 'customTextColor', $attributes );
  84. $has_named_background_color = array_key_exists( 'backgroundColor', $attributes );
  85. $has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes );
  86. $has_named_gradient = array_key_exists( 'gradient', $attributes );
  87. $has_custom_gradient = array_key_exists( 'customGradient', $attributes );
  88. $has_border_radius = array_key_exists( 'borderRadius', $attributes );
  89. if ( $has_class_name ) {
  90. $classes[] = $attributes['className'];
  91. }
  92. if ( $has_named_text_color || $has_custom_text_color ) {
  93. $classes[] = 'has-text-color';
  94. }
  95. if ( $has_named_text_color ) {
  96. $classes[] = sprintf( 'has-%s-color', $attributes['textColor'] );
  97. }
  98. if (
  99. $has_named_background_color ||
  100. $has_custom_background_color ||
  101. $has_named_gradient ||
  102. $has_custom_gradient
  103. ) {
  104. $classes[] = 'has-background';
  105. }
  106. if ( $has_named_background_color && ! $has_custom_gradient ) {
  107. $classes[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
  108. }
  109. if ( $has_named_gradient ) {
  110. $classes[] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] );
  111. }
  112. // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
  113. if ( $has_border_radius && 0 == $attributes['borderRadius'] ) {
  114. $classes[] = 'no-border-radius';
  115. }
  116. return implode( ' ', $classes );
  117. }
  118. /**
  119. * Get the Button block styles.
  120. *
  121. * @param array $attributes Array containing the block attributes.
  122. *
  123. * @return string
  124. */
  125. function get_button_styles( $attributes ) {
  126. $styles = array();
  127. $has_named_text_color = array_key_exists( 'textColor', $attributes );
  128. $has_custom_text_color = array_key_exists( 'customTextColor', $attributes );
  129. $has_named_background_color = array_key_exists( 'backgroundColor', $attributes );
  130. $has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes );
  131. $has_named_gradient = array_key_exists( 'gradient', $attributes );
  132. $has_custom_gradient = array_key_exists( 'customGradient', $attributes );
  133. $has_border_radius = array_key_exists( 'borderRadius', $attributes );
  134. $has_width = array_key_exists( 'width', $attributes );
  135. if ( ! $has_named_text_color && $has_custom_text_color ) {
  136. $styles[] = sprintf( 'color: %s;', $attributes['customTextColor'] );
  137. }
  138. if ( ! $has_named_background_color && ! $has_named_gradient && $has_custom_gradient ) {
  139. $styles[] = sprintf( 'background: %s;', $attributes['customGradient'] );
  140. }
  141. if (
  142. $has_custom_background_color &&
  143. ! $has_named_background_color &&
  144. ! $has_named_gradient &&
  145. ! $has_custom_gradient
  146. ) {
  147. $styles[] = sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
  148. }
  149. // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
  150. if ( $has_border_radius && 0 != $attributes['borderRadius'] ) {
  151. $styles[] = sprintf( 'border-radius: %spx;', $attributes['borderRadius'] );
  152. }
  153. if ( $has_width ) {
  154. $styles[] = sprintf( 'width: %s;', $attributes['width'] );
  155. $styles[] = 'max-width: 100%';
  156. }
  157. return implode( ' ', $styles );
  158. }
  159. /**
  160. * Get the Button wrapper block styles.
  161. *
  162. * @param array $attributes Array containing the block attributes.
  163. *
  164. * @return string
  165. */
  166. function get_button_wrapper_styles( $attributes ) {
  167. $styles = array();
  168. $has_width = array_key_exists( 'width', $attributes );
  169. if ( $has_width ) {
  170. $styles[] = 'max-width: 100%';
  171. }
  172. return implode( ' ', $styles );
  173. }
  174. /**
  175. * Get filtered attributes.
  176. *
  177. * @param array $attributes Array containing the Button block attributes.
  178. * @param string $attribute_name String containing the attribute name to get.
  179. *
  180. * @return string
  181. */
  182. function get_attribute( $attributes, $attribute_name ) {
  183. if ( isset( $attributes[ $attribute_name ] ) ) {
  184. return $attributes[ $attribute_name ];
  185. }
  186. $default_attributes = array(
  187. 'url' => '#',
  188. 'element' => 'a',
  189. 'saveInPostContent' => false,
  190. );
  191. if ( isset( $default_attributes[ $attribute_name ] ) ) {
  192. return $default_attributes[ $attribute_name ];
  193. }
  194. }
  195. /**
  196. * Enqueue style for an existing block.
  197. *
  198. * The Jetpack Button block depends on styles from the core button block.
  199. * In case that block is not already within the post content, we can use
  200. * this function to ensure the block's style assets are enqueued.
  201. *
  202. * @param string $block_name Block type name including namespace.
  203. */
  204. function enqueue_existing_button_style_dependency( $block_name ) {
  205. $existing_block = \WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
  206. if ( isset( $existing_block ) && ! empty( $existing_block->style ) ) {
  207. wp_enqueue_style( $existing_block->style );
  208. }
  209. }