Displaying parent field value in field.html.twig template from nested paragraphs

Question

See attached please. Using field.html.twig and paragraph.html.twig, Paragraphs 8.x-1.16 Stable release and Drupal 9.5.10

field.html.twig (specifically: field--paragraph--sidebar-button-repeater.html.twig):

{#
/**
 * @file
 * Theme override for a field.
 *
 * To override output, copy the "field.html.twig" from the templates directory
 * to your theme's directory and customize it, just like customizing other
 * Drupal templates such as page.html.twig or node.html.twig.
 *
 * Instead of overriding the theming for all fields, you can also just override
 * theming for a subset of fields using
 * @link themeable Theme hook suggestions. @endlink For example,
 * here are some theme hook suggestions that can be used for a field_foo field
 * on an article node type:
 * - field--node--field-foo--article.html.twig
 * - field--node--field-foo.html.twig
 * - field--node--article.html.twig
 * - field--field-foo.html.twig
 * - field--text-with-summary.html.twig
 * - field.html.twig
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - multiple: TRUE if a field can contain multiple items.
 * - items: List of all the field items. Each item contains:
 *   - attributes: List of HTML attributes for each item.
 *   - content: The field item's content.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 *
 * @see template_preprocess_field()
 */
#}
{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
  ]
%}
{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}
    <div style="background: [field_button_container_color]; ">
        {% for item in items %}
            {{ item.content }}
        {% endfor %}
    </div>

paragraph.html.twig

{#
/**
 * @file
 * Default theme implementation to display a paragraph.
 *
 * Available variables:
 * - paragraph: Full paragraph entity.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
 *   - paragraph.id(): The paragraph ID.
 *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
 *   - paragraph.getOwnerId(): The user ID of the paragraph author.
 *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
 *   and methods for the paragraph object.
 * - content: All paragraph items. Use {{ content }} to print them all,
 *   or print a subset such as {{ content.field_example }}. Use
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 * - attributes: HTML attributes for the containing element.
 *   The attributes.class element may contain one or more of the following
 *   classes:
 *   - paragraphs: The current template type (also known as a "theming hook").
 *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
 *     "Image" it would result in "paragraphs--type--image". Note that the machine
 *     name will often be in a short form of the human readable label.
 *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
 *     preview would result in: "paragraphs--view-mode--preview", and
 *     default: "paragraphs--view-mode--default".
 * - view_mode: View mode; for example, "preview" or "full".
 * - logged_in: Flag for authenticated user status. Will be true when the
 *   current user is a logged-in member.
 * - is_admin: Flag for admin user status. Will be true when the current user
 *   is an administrator.
 *
 * @see template_preprocess_paragraph()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  ]
%}
{% block paragraph %} 
    {% block content %}  
     <div class="Buttons">
        <button type="button" class="btn btn-primary">Primary</button>
     </div>
   {% endblock %}
{% endblock paragraph %}

How do I get the field value field_button_container_color (see screenshot) from the outer paragraph type sidebar_button_repeater and display its value specifically in the template field--paragraph--sidebar-button-repeater.html.twig to set the background color of a div?

<div style="background: {{ bgcolor }} ">
*[content]*
<div>

See 3rd screenshot for goal output.

For prepreocess code purposes let's say my theme name is mytheme.

Hoping to use something like IgorAgatti suggested in comments below but can't get it to work

function mytheme_preprocess_sidebar_button_repeater(array &$variables) {
  $bgcolor = $variables['content']['field_button_container_color'];
}

and simply add {{ bgcolor }} to field--paragraph--sidebar-button-repeater.html.twig

I also tried:

function mytheme_preprocess_paragraph(&$variables) {

  $paragraph = $variables['paragraph'];

  if ($paragraph->getType() === 'sidebar_button_repeater') {
    if (!$paragraph->field_button_container_color->isEmpty()) {

      $variables['bgcolor'] = $paragraph->get('field_button_container_color')->first()->getValue();
    }
  }
}

...with no success. (inspired by Retrieving value of paragraph type with entity reference revision through preprocessor)

I believe the issue may be specific to actually rendering the value in a field template.

Thanks

Paragraph Type Structure Goal Output

Answer 1

You can use the paragraph preprocess to alter the array of field_paragraph_inner

so it would be something like (untested code)

funcion hook_preprocess_field_paragraph_outer(array &$variables) {
  $field_bg = $variables['content']['field_bg'];

  $variables['content']['field_paragraph_inner']['field_bg_copy'] = $field_bg;
}

And you could use it in the field_inner_paragraph twig by just referencing {{ field_bg_copy }}