List custom content

  • Resolved kyashan22

    (@kyashan22)


    1 year, 5 months ago

    Hi, how can I replicate this bootstrap component with plugin blocks?

    <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>
Viewing 1 replies (of 1 total)
  • Plugin Author Miles

    (@areoimiles)

    Hi @kyashan22

    As the list group block is limited you would need to use the div block along with custom classes to build up this structure. The div blocks essentially allows you to build up any component you want in the same way you would if you were writing the code yourself.

    To save you some time I have converted your code above into blocks which you can see below. If you edit a page then click the three dots in the top right, then select Code Editor and paste the below in you should see your list group.

    <!-- wp:areoi/div {"block_id":"898046e8-3ba1-46f3-840c-c66077bd86c6","className":"list-group"} -->
<!-- wp:areoi/div {"block_id":"70deb6be-4aff-4f86-bc54-731bb6f09ddb","url":"#","className":"list-group-item list-group-item-action active"} -->
<!-- wp:areoi/div {"block_id":"66d79041-8219-4184-97a7-30c4c46813d8","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->

<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->

<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->

<!-- wp:areoi/div {"block_id":"3608faba-4c78-42de-8eae-4316833b369e","url":"#","className":"list-group-item list-group-item-action"} -->
<!-- wp:areoi/div {"block_id":"0880704c-c611-4ae3-a6c8-60980d6f72ba","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->

<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->

<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->

<!-- wp:areoi/div {"block_id":"c1b6ee18-9fa1-4647-928c-0d3fb4a1355e","url":"#","className":"list-group-item list-group-item-action"} -->
<!-- wp:areoi/div {"block_id":"e0d15af1-dcb7-466f-9a5e-5a4da3397a2a","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->

<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->

<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->

    Hopefully you can use this to create whatever component you need. You could then save this as a pattern to make it easily accessible across your site. If you have any other issues, please don’t hesitate to get back in touch.

    Thanks
    Miles

Viewing 1 replies (of 1 total)
  • The topic ‘List custom content’ is closed to new replies.