PLANET-7369 Use custom button text setting in Actions List block (#2292)

* PLANET-7369 Use custom button text setting in Actions List block

This is to replicate the Covers block behaviour

assets/src/blocks/ActionCustomButtonText/edit.js

@@ -0,0 +1,15 @@
+import {useEntityProp} from '@wordpress/core-data';
+
+const {__} = wp.i18n;
+
+const DEFAULT_TEXT = window.p4_vars.options.take_action_covers_button_text || __('Take action', 'planet4-blocks');
+
+export default function Edit({context: {postId}}) {
+  const [metaFields] = useEntityProp('postType', 'p4_action', 'meta', postId);
+
+  return (
+    <button className="btn btn-primary btn-small">
+      {metaFields?.action_button_text || DEFAULT_TEXT}
+    </button>
+  );
+}

assets/src/blocks/ActionCustomButtonText/index.js

@@ -0,0 +1,13 @@
+import {registerBlockType} from '@wordpress/blocks';
+
+import edit from './edit';
+
+export const registerActionButtonTextBlock = () => registerBlockType(
+  'planet4-blocks/action-button-text',
+  {
+    title: 'Action Button Text',
+    category: 'planet4-blocks',
+    description: 'Displays the custom button text for an Action, or the default text if undefined',
+    usesContext: ['postId'],
+    edit,
+  });

assets/src/blocks/ActionsList/index.js

@@ -69,10 +69,7 @@ export const registerActionsListBlock = () => {
           ['core/post-excerpt'],
         ]],
         ['core/group', {className: 'read-more-nav'}, [
-          ['core/read-more', {
-            className: 'btn btn-small btn-primary',
-            content: __('Take Action', 'planet4-blocks-backend'),
-          }],
+          ['planet4-blocks/action-button-text'],
         ]],
       ]],
       ['core/buttons', {

assets/src/blocks/TakeActionBoxout/TakeActionBoxoutEditor.js

@@ -23,7 +23,7 @@ import {ImagePlaceholder} from './ImagePlaceholder';
 const {__} = wp.i18n;
 
 // Planet 4 settings (Planet 4 >> Defaults content >> Take Action Covers default button text).
-const DEFAULT_BUTTON_TEXT = window.p4_vars.take_action_covers_button_text || __('Take action', 'planet4-blocks');
+const DEFAULT_BUTTON_TEXT = window.p4_vars.options.take_action_covers_button_text || __('Take action', 'planet4-blocks');
 
 export const TakeActionBoxoutEditor = ({
   attributes,

assets/src/editorIndex.js

@@ -12,6 +12,7 @@ import {registerTimelineBlock} from './blocks/Timeline/TimelineBlock';
 import {registerColumnsBlock} from './blocks/Columns/ColumnsBlock';
 import {registerBlockStyles} from './block-styles';
 import {registerBlockVariations} from './block-variations';
+import {registerActionButtonTextBlock} from './blocks/ActionCustomButtonText';
 
 wp.domReady(() => {
   // Make sure to unregister the posts-list native variation before registering planet4-blocks/posts-list
@@ -30,6 +31,7 @@ wp.domReady(() => {
   registerBlockTemplates();
 
   // Beta blocks
+  registerActionButtonTextBlock();
   registerActionsListBlock();
   registerPostsListBlock();
 

assets/src/js/actions_list_clickable_cards.js

@@ -2,7 +2,7 @@ export const setupClickabelActionsListCards = () => {
   const liElements = document.querySelectorAll('.actions-list ul li:not(.carousel-li)');
 
   liElements.forEach(li => {
-    const linkElement = li.querySelector('.wp-block-read-more');
+    const linkElement = li.querySelector('.wp-block-post-title > a');
     if (linkElement) {
       const url = linkElement.getAttribute('href');
       li.tabIndex = 0;

assets/src/scss/blocks/ActionsList.scss

@@ -67,7 +67,7 @@
     &:focus {
       box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
 
-      .wp-block-read-more {
+      .btn-primary {
         background: var(--button-primary--hover--background);
         color: var(--button-primary--hover--color, var(--color-text-button--cta));
         border: var(--button-primary--hover--border, 1px solid transparent);
@@ -133,11 +133,6 @@
     font-family: var(--font-family-tertiary);
   }
 
-  .wp-block-group .btn-primary {
-    margin-bottom: $sp-3;
-    margin-inline-end: $sp-3;
-  }
-
   &.is-custom-layout-grid {
     display: block !important;
 

src/Blocks/ActionButtonText.php

@@ -0,0 +1,81 @@
+<?php
+
+/**
+ * Action Button Text block class.
+ *
+ * @package P4\MasterTheme
+ * @since 0.1
+ */
+
+ namespace P4\MasterTheme\Blocks;
+
+ use WP_Block;
+
+/**
+ * Class ActionButtonText
+ *
+ * @package P4\MasterTheme\Blocks
+ */
+class ActionButtonText extends BaseBlock
+{
+    /**
+     * Block name.
+     *
+     * @const string BLOCK_NAME.
+     */
+    public const BLOCK_NAME = 'action-button-text';
+
+    /**
+     * ActionButtonText constructor.
+     */
+    public function __construct()
+    {
+        $this->register_action_button_text_block();
+    }
+
+    /**
+     * Register ActionButtonText block.
+     */
+    public function register_action_button_text_block(): void
+    {
+        register_block_type(
+            self::get_full_block_name(),
+            [
+                'render_callback' => [ $this, 'render_block' ],
+            ]
+        );
+    }
+
+    /**
+     * Required by the `Base_Block` class.
+     *
+     * @param array $fields Unused, required by the abstract function.
+     * @phpcs:disable SlevomatCodingStandard.Functions.UnusedParameter.UnusedParameter
+     */
+    public function prepare_data(array $fields): array
+    {
+        return [];
+    }
+
+    /**
+     * @param  array    $attributes Block attributes.
+     * @param  string   $content    Block default content.
+     * @param  WP_Block $block      Block instance.
+     * @return string   Returns the value for the field.
+     * @phpcs:disable SlevomatCodingStandard.Functions.UnusedParameter.UnusedParameter
+    */
+    public function render_block(array $attributes, string $content, WP_Block $block): string
+    {
+        $post_id = $block->context['postId'];
+        $link = get_permalink($post_id);
+        $meta = get_post_meta($post_id);
+        if (isset($meta['action_button_text']) && $meta['action_button_text'][0]) {
+            $button_text = $meta['action_button_text'][0];
+        } else {
+            $options = get_option('planet4_options');
+            $button_text = $options['take_action_covers_button_text'] ?? __('Take action', 'planet4-blocks');
+        }
+        return '<a href="' . $link . '" class="btn btn-primary btn-small">' . $button_text . '</a>';
+    }
+    // @phpcs:enable SlevomatCodingStandard.Functions.UnusedParameter.UnusedParameter
+}

src/Loader.php

@@ -215,6 +215,8 @@ public static function add_blocks(): void
             return;
         }
 
+        new Blocks\ActionButtonText();//NOSONAR
+
         Blocks\QueryLoopExtension::registerHooks();
         add_filter(
             'allowed_block_types_all',