Add styles to theme.json via wpjson

bud
1

Hi all, I’m new here. It doesn’t look like you’re able to add block styles to theme.json via wpjson. Is that correct? If so, is there a preferred method for adding default values for block elements such as blockGap?

2

I have added block styles. Do you mean core blocks? Here is me editing those:

 app.wpjson
    .set('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'
      },
      {
        name: 'Cloud',
        slug: 'cloud',
        color: 'rgb(236, 239, 244)'
      },

    ])
    .set('settings.color.gradients', [
      {
        slug: "cloud-white",
        gradient: "linear-gradient(180deg, rgba(236,239,244,1) 22%, rgba(255,255,255,1) 100%)",
        name: "180 Cloud to White"
      }
    ])

    .setOption('styles', {
      blocks: {
        "core/image": {
          "variations": {
            "rounded": {
              "border": {
                "radius": "20px"
              }
            }
          }
        }
      }
    })


    .enable();
};

or alternatively, newer versions of bud are like this:

  app.wpjson
  /**
   *
   * Add Custom Colors to Block Editor
   *
   * **/
    .set('settings.color.palette', [
    {
      name: 'Black',
      slug: 'black',
      color: '#000000'
    },
    {
      name: 'White',
      slug: 'white',
      color: '#FFFFFF'

    },
      {
        name: 'Teal',
        slug: 'teal',
        color: '#FFFFFF'

      },

     ])
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})

  /**
   *
   * Turn on/off padding
   *
   * **/
    .set('settings.spacing.padding', true)

  /**
   *
   * Change spacing units
   *
   * **/
    // .set('settings.spacing.units', [
    //  'px', '%'
    // ])

  /**
   *
   * Turn on custom spacing sizes
   *
   * **/
  .set('settings.spacing.customSpacingSize', true)

  // .set('settings.spacing.spacingScale', [
  //   {
  //     operator: '+'
  //   },
  //   {
  //     increment: 6
  //   },
  //   {
  //     steps: 12
  //   },
  //   {
  //     unit: 'px'
  //   }
  // ])

  /**
   *
   * Set custom spacing sizes instead of scale
   *
   * **/
  .set('settings.spacing.spacingSizes', [
    {
      name: "XS",
      slug: 'xs',
      size: '6px',
    },
    {
      name: "SM",
      slug: 'sm',
      size: '12px',
    },
    {
      name: "MD",
      slug: 'md',
      size: '24px',
    },
    {
      name: "L",
      slug: 'large',
      size: '48px',
    },
    {
      name: "XL",
      slug: 'xl',
      size: '64px',
    },
  ])

  /**
   *
   * Turn off margin
   *
   * **/
    .set('settings.spacing.margin', false)
    .set('settings.typography.customFontSize', false)

  /**
   *
   * Add Custom Colors to Specific Core Block
   *
   * **/
    .set('settings.blocks.core/paragraph.color.palette', [
      {
        name: 'White',
        slug: 'white',
        color: '#000000'
      },
    ])
  /**
   *
   * Disable Background Color for Core Block
   *
   * **/
    .set('settings.blocks.core/paragraph.color.background', false)

  /**
   *
   * Add Custom Value/class to Core block OUTPUT: --wp--custom--fruit: Pear;
   *
   * **/
    .set('settings.blocks.core/paragraph.custom', {
      fruit: 'Pear'
    })

  /**
   *
   * Change Style of Core Image Block
   *
   * **/
  .set('styles.blocks.core/image.variations.rounded.border', {
    radius: '30px'
  })
  /**
   *
   * Change Core Button Styles
   *
   * **/
  .set('styles.blocks.core/button.variations.outline.border',
    {
        color: "var( --wp--preset--color--black )",
        radius: '5px',
        style: 'solid',
        width: '1px'
    })
  .set('styles.elements.button', {
     color: {
       background: 'red',
       text: 'white',
     },
    border: {

    }
    })


  /**
   *
   * Add Layout Width (must keep this to have align setting on groups)
   *
   * **/
    .set('settings.layout',
      {
        contentSize: "840px",
        wideSize: "1100px"
      }

      )

    .enable();
2 Likes
3

This is what I was looking for. Appreciate the assist!

   .setOption('styles', {
        spacing: {
          blockGap: '20px',
        },
      })
1 Like