ArticleCardsListItem.js

class ArticleCardsListItemDefinition extends window.wagtailStreamField.blocks.StructBlockDefinition {

  render(placeholder, prefix, initialState, initialError) {

    const block = super.render(placeholder, prefix, initialState, initialError);

    const categoryField = document.getElementById(prefix + '-category');
    const pageField = document.getElementById(prefix + '-page');

    const observer = new MutationObserver((mutationList, observer) => {
      for(const mutation of mutationList) {
        if(mutation.attributeName === 'value' && mutation.target.value != null) {
          categoryField.setAttribute('disabled', 'disabled');
          fetch(`/api/v2/pages/${mutation.target.value}/?fields=_,categories`, {
            method: 'GET',
            credentials: 'same-origin',
            headers: {'Content-Type': 'application/json'},
          })
          .then(response => response.json())
          .then(responseData => {
            const pageCategoryIds = responseData.categories.map(i => i.id);
            Array.from(categoryField.options).forEach(option => {
              if(option.value) {
                if(pageCategoryIds.includes(parseInt(option.value))) {
                  option.removeAttribute('hidden');
                }
                else {
                  option.setAttribute('hidden', '');
                }
              }
            });
            categoryField.value = '';
            categoryField.removeAttribute('disabled');
          });
        }
      }
    });

    observer.observe(pageField, { attributes: true });

    return block;

  }

}


window.telepath.register('posts.blocks.ArticleCardsListItem', ArticleCardsListItemDefinition);

blocks.py

class ArticleCardsListItem(blocks.StructBlock):

  image = ImageChooserBlock(
    required=True,
    help_text=_("Select a card's image"),
    label=_('Image'),
  )

  title = blocks.CharBlock(
    required=False,
    max_length=150,
    help_text=_("Select a card's title"),
    label=_('Title'),
  )

  text = blocks.TextBlock(
    required=True,
    max_length=255,
    help_text=_('Write short description'),
    label=_('Text'),
  )

  page = blocks.PageChooserBlock(
    required=True,
    target_model='posts.PostPage',
  )

  category = blocks.ChoiceBlock(
    required=True,
    choices=get_post_categories,
    help_text=_('Pick a post category'),
    label=_('Category'),
  )

  class Meta:
    verbose_name = _('Article cards list item')
    verbose_name_plural = _('Article cards list items')


class ArticleCardsList(blocks.StructBlock):

  cards = blocks.ListBlock(ArticleCardsListItem())

  class Meta:
    icon = 'icon-cards'
    template = 'posts/blocks/cardslistblock.html'
    verbose_name = _('Article cards list')
    verbose_name_plural = _('Article cards lists')


class ArticleCardsListItemAdapter(StructBlockAdapter):

  js_constructor = 'posts.blocks.ArticleCardsListItem'

  @cached_property
  def media(self: Self):
    structblock_media = super().media
    return forms.Media(
      js=structblock_media._js + ['js/ArticleCardsListItem.js'],
      css=structblock_media._css
    )


register_telepath_adapter(ArticleCardsListItemAdapter(), ArticleCardsListItem)