Editing Core Blocks with Sage 10 theme.json

sage
,
1

I am having issues with my Bedrock Sage 10 project. My bud config seems to be a bit different than my newest project and I am having trouble editing core blocks with it. I am trying to edit the rounded image core block variation.

with my new project it is just:

  .set('styles.blocks.core/image.variations.rounded.border', {
    radius: '30px'
  })
  /**

If I add that in to my bud.config.js I get the error: .set is not a function when I run yarn build.

If I try and copy the entire bud.config.js file I get app.wpjson is not a function error.

Nothing works to edit the rounded image core block radius I can’t get the styles to add to the theme.json. I have tried

.styles({
....
})

I have also tried the below option but I get the error .wpjson.styles is not a function

.wpjson.styles({
 blocks: {
      "core/image": {
        variations: {
          rounded: {
            border: {
              radius: '15px'
            }
          }
        }

      }

})

What my file is now is the below. Which obviously doesn’t work as I am in settings and not styles.

.wpjson.settings({

    color: {
      palette: [
        {
          name: 'White',
          slug: 'white',
          color: '#FFFFFF'
        },
        {
          name: 'Black',
          slug: 'black',
          color: '#2E3440'
        },
        {
          name: 'Grey',
          slug: 'grey',
          color: '#4C5669'
        },
        {
          name: 'Blue',
          slug: 'blue',
          color: '#88C0D0'
        },
        {
          name: 'Light Grey',
          slug: 'light-grey',
          color: '#F8F9FB'
        }
      ],
      customDuotone: false,
      customGradient: false,
      defaultDuotone: false,
      defaultGradients: false,
      defaultPalette: false,
      duotone: [],
    },
    custom: {
      spacing: {},
      typography: {
        'font-size': {},
        'line-height': {},
      },
    },
    spacing: {
      padding: true,
      // units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      spacingSizes: [
        {
          slug: '40',
          size: '60px',
          name: 'Small',
        },
        {
          slug: '60',
          size: '80px',
          name: 'Medium',
        },
        {
          slug: '100',
          size: '100px',
          name: 'Large',
        },
      ]
    },
    typography: {
      customFontSize: true,
      fontFamilies: [
        {
          fontFamily: 'SpaceMono',
          name: 'SpaceMono',
          slug: 'spacemono',
          fontFace: [
            {
              fontFamily: "SpaceMono",
              fontWeight: "700",
              fontStyle: "normal",
              src: "url('../../fonts/SpaceMono-Bold.ttf') format('truetype')"
            },
            {
              fontFamily: "SpaceMono",
              fontWeight: "400",
              fontStyle: "normal",
              src: "url('../../fonts/SpaceMono-Regular.ttf') format('truetype')"
            },
          ],
        },
        {
          fontFamily: 'Montserrat',
          name: 'Montserrat',
          slug: 'montserrat',
          fontFace: [
            {
              fontFamily: "Montserrat",
              fontWeight: "700",
              fontStyle: "normal",
              src: "url('../..fonts/Montserrat-VariableFont_wght.ttf') format('truetype')"
            },
            {
              fontFamily: "Montserrat",
              fontWeight: "400",
              fontStyle: "normal",
              src: "url('../..fonts/Montserrat-VariableFont_wght.ttf') format('truetype')"
            },
          ],
        },
        {
          fontFamily: 'Rubik',
          name: 'Rubik',
          slug: 'rubik',
          fontFace: [
            {
              fontFamily: "Rubik",
              fontWeight: "300",
              fontStyle: "normal",
              src: "url('../../fonts/Rubik-VariableFont_wght.ttf') format('truetype')"
            },
            {
              fontFamily: "Rubik",
              fontWeight: "400",
              fontStyle: "normal",
              src: "url('../../fonts/Rubik-VariableFont_wght.ttf') format('truetype')"
            },
            {
              fontFamily: "Rubik",
              fontWeight: "500",
              fontStyle: "normal",
              src: "url('../../fonts/Rubik-VariableFont_wght.ttf') format('truetype')"
            },
            {
              fontFamily: "Rubik",
              fontWeight: "700",
              fontStyle: "normal",
              src: "url('../../fonts/Rubik-VariableFont_wght.ttf') format('truetype')"
            },
          ],
        }
      ],
    },
    styles: {
      blocks: {
        coreImage: {
          variations: {
            rounded: {
              border: {
                radius: '15px'
              }
            }
          }

        }
      }
    }
  })

Any clue on how to edit the styles appreciated!

1 Like
2

I was able to solve this. With this version of sage/bud you have to go:

 app.wpjson.setOption('styles', {
    blocks: {
      "core/image": {
        "variations": {
          "rounded": {
            "border": {
              "radius": "8px"
            }
          }
        }
      }
    }
  });
2 Likes