feat: Added cssClassName attribute to CoreGroup #328

colinmurphy · 2024-12-31T15:47:13Z

Overview

This adds the cssClassName for the CoreGroupAttributes as per issue reported here #327

Description

See above.

Related Issue(s):

#327

Testing

The following test checks that cssClassName is availble for the CoreGroupAttributes

Setup

If you update a page with the following HTML

<!-- wp:group {"tagName":"header","className":"test-group-class is-style-section-1","style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-3"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"},"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|20"},"dimensions":{"minHeight":"100px"},"border":{"radius":"1px","width":"4px"}},"backgroundColor":"base","textColor":"accent-3","borderColor":"accent-3","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header id="test-group-id" class="wp-block-group test-group-class is-style-section-1 has-border-color has-accent-3-border-color has-accent-3-color has-base-background-color has-text-color has-background has-link-color" style="border-width:4px;border-radius:1px;min-height:100px;margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:paragraph -->
<p>This is the left paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is the right paragraph</p>
<!-- /wp:paragraph --></header>
<!-- /wp:group -->

<!-- wp:paragraph {"className":"example-class"} -->
<p class="example-class">This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
<p>Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)</p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>...or something like this:</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>As a new WordPress user, you should go to <a href="https://alpha.multisite.local/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
<!-- /wp:paragraph -->

If you then run the following query in WPGraphQL IDE

fragment CoreGroupFragment on CoreGroup {
  attributes {
    align
    allowedBlocks
    backgroundColor
    borderColor
    className
    cssClassName
    fontFamily
    fontSize
    gradient
    layout
    lock
    metadata
    style
    tagName
    textColor
  }
}

query Page($id: ID!) {
  page(id: $id, idType: DATABASE_ID) {
    databaseId
    editorBlocks(flat:true) {
      apiVersion
      blockEditorCategoryName
      clientId
      cssClassNames
      innerBlocks {
        name
      }
      name
      parentClientId
      renderedHtml
      type
      ...CoreGroupFragment
    }
  }
}

Note: Add the following query variables (replacing your page/post id)

{
  "id": 2
}

You should get the following response

{
  "data": {
    "page": {
      "databaseId": 2,
      "editorBlocks": [
        {
          "apiVersion": 3,
          "blockEditorCategoryName": "design",
          "clientId": "67741a2965a9b",
          "cssClassNames": [
            "test-group-class",
            "is-style-default"
          ],
          "innerBlocks": [
            {
              "name": "core/paragraph"
            },
            {
              "name": "core/paragraph"
            }
          ],
          "name": "core/group",
          "parentClientId": null,
          "renderedHtml": "\n<header id=\"test-group-id\" class=\"wp-block-group test-group-class is-style-default is-content-justification-center is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex\">\n<p>This is the left paragraph.</p>\n\n\n\n<p>This is the right paragraph</p>\n</header>\n",
          "type": "CoreGroup",
          "attributes": {
            "align": null,
            "allowedBlocks": null,
            "backgroundColor": null,
            "borderColor": null,
            "className": "test-group-class is-style-default",
            "cssClassName": "wp-block-group test-group-class is-style-default is-content-justification-center is-layout-flex wp-container-core-group-is-layout-7 wp-block-group-is-layout-flex",
            "fontFamily": null,
            "fontSize": null,
            "gradient": null,
            "layout": "{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"center\"}",
            "lock": null,
            "metadata": null,
            "style": null,
            "tagName": "header",
            "textColor": null
          }
        },
        {
          "apiVersion": 3,
          "blockEditorCategoryName": "text",
          "clientId": "67741a2965a9f",
          "cssClassNames": null,
          "innerBlocks": [],
          "name": "core/paragraph",
          "parentClientId": "67741a2965a9b",
          "renderedHtml": "\n<p>This is the left paragraph.</p>\n",
          "type": "CoreParagraph"
        },
        {
          "apiVersion": 3,
          "blockEditorCategoryName": "text",
          "clientId": "67741a2965aa1",
          "cssClassNames": null,
          "innerBlocks": [],
          "name": "core/paragraph",
          "parentClientId": "67741a2965a9b",
          "renderedHtml": "\n<p>This is the right paragraph</p>\n",
          "type": "CoreParagraph"
        },
        {
          "apiVersion": 3,
          "blockEditorCategoryName": "text",
          "clientId": "67741a2965aa6",
          "cssClassNames": [
            "example-class"
          ],
          "innerBlocks": [],
          "name": "core/paragraph",
          "parentClientId": null,
          "renderedHtml": "\n<p class=\"example-class\">This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>\n",
          "type": "CoreParagraph"
        }
      ]
    }
  }
}

Note that the cssClassName for the CoreGroup attribute node is wp-block-group test-group-class is-style-default is-content-justification-center is-layout-flex wp-container-core-group-is-layout-7 wp-block-group-is-layout-flex

Screenshots

changeset-bot · 2024-12-31T15:47:17Z

🦋 Changeset detected

Latest commit: c0528c6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@wpengine/wp-graphql-content-blocks	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

… between WP versions slightly

tests/unit/CoreGroupTest.php

justlevine · 2024-12-31T16:24:09Z

tests/unit/CoreGroupTest.php

+	/**
+	 * Test that the CoreGroup block is retrieved correctly.
+	 *
+	 * Covers the following attributes:


(this isn't a list of attributes.
Not saying you need one - we added it to track what Core*Attributes are actually being tested since this project doesn't have accurate codecov )

Thanks @justlevine

I will update the comment and that's good to know about the code coverage.

Also thanks for the code review 👍

tests/unit/CoreGroupTest.php

Co-authored-by: Dovid Levine <[email protected]>

justlevine · 2024-12-31T16:32:02Z

Heads up I'm hoping to rip out this entire antipattern in rtCamp#31.

If we want to diverge from WP as a source of truth, we shouldn't have those fields masquerade as block.json attributes and this has been a consistent source of conflicts when upgrading wp versions.

Once a WPGraphQL Model is in place (so every new attribute isnt a perf drain due to render_block() ) this sort of handling will be moved to an Interface type.

colinmurphy · 2024-12-31T16:39:18Z

Heads up I'm hoping to rip out this entire antipattern in rtCamp#31.

If we want to diverge from WP as a source of truth, we shouldn't have those fields masquerade as block.json attributes and this has been a consistent source of conflicts when upgrading wp versions.

Once a WPGraphQL Model is in place (so every new attribute isnt a perf drain due to render_block() ) this sort of handling will be moved to an Interface type.

Thanks @justlevine for the heads up and also the context around the upgrades.

I can definitely see how this might cause issues with upgrades. Let me know if you want me to do any testing for your branch once your ready 👍

Added CoreGroup block to add cssClassName to the CoreGroupAttributes

e4b826d

Fixed tests. Issue with asserting equals on cssClassName as it varies…

05c8e35

… between WP versions slightly

colinmurphy changed the title ~~Added CoreGroup block to add cssClassName to the CoreGroupAttributes~~ Feat: Added cssClassName attribute to CoreGroup Dec 31, 2024

colinmurphy changed the title ~~Feat: Added cssClassName attribute to CoreGroup~~ feat: Added cssClassName attribute to CoreGroup Dec 31, 2024

justlevine reviewed Dec 31, 2024

View reviewed changes

tests/unit/CoreGroupTest.php Outdated Show resolved Hide resolved

justlevine reviewed Dec 31, 2024

View reviewed changes

tests/unit/CoreGroupTest.php Outdated Show resolved Hide resolved

Update tests/unit/CoreGroupTest.php

c027d13

Co-authored-by: Dovid Levine <[email protected]>

colinmurphy marked this pull request as ready for review December 31, 2024 16:39

colinmurphy requested a review from a team as a code owner December 31, 2024 16:39

colinmurphy mentioned this pull request Dec 31, 2024

core/group block attribute doesn't support cssClassName. #327

Open

colinmurphy mentioned this pull request Jan 7, 2025

Anchor tags are returning null for custom ACF blocks #268

Open

Create proud-fireants-buy.md

c0528c6

theodesp approved these changes Jan 9, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Added cssClassName attribute to CoreGroup #328

feat: Added cssClassName attribute to CoreGroup #328

colinmurphy commented Dec 31, 2024 •

edited

Loading

changeset-bot bot commented Dec 31, 2024 •

edited

Loading

justlevine Dec 31, 2024

colinmurphy Dec 31, 2024

justlevine commented Dec 31, 2024 •

edited

Loading

colinmurphy commented Dec 31, 2024

feat: Added cssClassName attribute to CoreGroup #328

Are you sure you want to change the base?

feat: Added cssClassName attribute to CoreGroup #328

Conversation

colinmurphy commented Dec 31, 2024 • edited Loading

Overview

Description

Related Issue(s):

Testing

Setup

Screenshots

changeset-bot bot commented Dec 31, 2024 • edited Loading

🦋 Changeset detected

justlevine Dec 31, 2024

Choose a reason for hiding this comment

colinmurphy Dec 31, 2024

Choose a reason for hiding this comment

justlevine commented Dec 31, 2024 • edited Loading

colinmurphy commented Dec 31, 2024

colinmurphy commented Dec 31, 2024 •

edited

Loading

changeset-bot bot commented Dec 31, 2024 •

edited

Loading

justlevine commented Dec 31, 2024 •

edited

Loading