Widget with array with nested areas - After after opening widget edit modal, parent array breadcrumb click no longer opens far right breadcrumb and edit options

[Darren-Caboz-Altstudios]

To Reproduce

Step by step instructions to reproduce the behavior:

1. Please find video example for issue experienced - https://www.loom.com/share/034d41f2a3094aecb9b390bc371125b5?sid=202dddaf-7207-4f2b-bf3c-049db60202ac

Expected behavior

When editing a widget on the frontend for array with areas, the parent level breadcrumb option should still show up the far right breadcrumb and edit tools option when clicked. I do set the widget area margin spacing for top and bottom to zero, as I like the editing page to be as close as possible to the live frontend view:

[data-apos-area] [data-apos-area] { margin: 0 !important; }

Describe the bug

After you click the edit widget option for the widget, the parent is no shown on the page when you click the breadcrumb label.

Details

Version of Node.js: Apostrophecms V4.7.1, clean install of apostrophecms

Server Operating System: Mac OSX

Additional context: Array schema:

// modules/two-column-widget/index.js
module.exports = {
  extend: '@apostrophecms/widget-type',
  options: {
    label: 'Two column',
  },
  // 👇 The widget type's field schema
  fields: {
    add: {
      columns: {
        type: 'array',
        label: 'Columns Array',
        fields: {
          add: {
            // 👇 The first column area
            columnOne: {
              type: 'area',
              label: 'Column One',
              options: {
                widgets: {
                  '@apostrophecms/rich-text': {},
                  '@apostrophecms/image': {},
                },
              },
            },
            // 👇 The second column area
            columnTwo: {
              type: 'area',
              label: 'Column Two',
              options: {
                widgets: {
                  '@apostrophecms/rich-text': {},
                  '@apostrophecms/image': {},
                },
              },
            },
          },
        },
      },
    },
  },
};

HTML:

<section class="columns">
  {% for col in data.widget.columns %}
    <div class="two-col">
      <div class="two-col__column">
        {% area col, 'columnOne' %}
      </div>
      {# <div class="two-col__column">
                    {% area col, 'columnTwo' %}
                  </div> #}
    </div>
  {% endfor %}
</section>
<style>
  /* modules/two-column-widget/ui/src/index.scss */
  .columns {
    background: #eee;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #000;
  }
  .two-col {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }
  .two-col__column {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  [data-apos-area] [data-apos-area] {
    margin: 0 !important;
  }
</style>

[ematheson19]

Hi! I'd like to work on this issue. I'm setting up the project now and investigating the breadcrumbs/modal behavior. Let me know if anyone else is already working on it.

[BoDonkey]

@ematheson19 Nobody is currently working on this, but it would be good to test with the latest version of Apostrophe that was just released on 6/11. I believe the OP meant 4.17.1.

[ematheson19]

@BoDonkey I forked the project and cloned it about 30 minutes ago, so do I have the correct version? Sorry, I am new to open source.

[BoDonkey]

Yeah, it should be, but you can check the CHANGELOG for the release date. It should be the UNRELEASED version after 4.18.0

[ematheson19]

@BoDonkey, again, because I'm new, do you know what file in the repo I need to go into for this code snippet?

[BoDonkey]

The code abide is project level code, not in the Apostrophe core. So your best bet is to spin a project up from one of our starter kits and link your forked Apostrophe in. Then the code above goes into your project level modules folder.

On Fri, Jun 13, 2025, 5:11 PM Evan Matheson @.***> wrote:

ematheson19 left a comment (apostrophecms/apostrophe#4738) https://github.com/apostrophecms/apostrophe/issues/4738#issuecomment-2971693290

@BoDonkey https://github.com/BoDonkey, again, because I'm new, do you know what file in the repo I need to go into for this code snippet?

— Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe/issues/4738#issuecomment-2971693290, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADEO4YG6GCRBYTGUUR3WESL3DM46HAVCNFSM6AAAAABPFUWEEKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNZRGY4TGMRZGA . You are receiving this because you were mentioned.Message ID: @.***>