Custom Line heights + Margin UI in block editor

  • rose18

    (@rose18)


    1 year, 11 months ago

    Hello,

    I am using a custom theme that I have built, so it doesn’t have the full site editing features.

    #1) I have added this code below to add the line height UI for typography (in the functions.php).

    add_theme_support( 'custom-line-height' );

    This is how my codes looks in for my registered block. I am using ACF pro plugin to create my custom blocks:

    acf_register_block(array(
			'name'				=> 'classic-wysiwyg',
			'title'				=> __('Regular Text'),
			'description'		=> __('The Classic WordPress WYSIWYG editor.'),
			'render_callback'	=> 'my_acf_gutenberg_block_render_callback',
			'category'			=> 'my-custom-blocks',
			'mode'              => 'auto',
			
			
			'supports'		=> [
				'align' => false,
				'anchor'		=> true,
				
				'typography'           => [
					'fontSize' => true,
					'lineHeight'  => true,
				],
				
	
			]
		));

    it adds in the line height UI in the editor page (screenshot: https://snipboard.io/ZbnYTg.jpg), but how can output the custom line height value in my php block template file?
    I can’t seem to find the code to do that. I thought it was $block[‘lineHeight’], but this doesn’t work. What is the code to display the line height value in php?

    #2) Spacing – margin & padding UI:
    I have added the code below to enable spacing control:

    add_theme_support( 'custom-spacing' );

    Also I have added these codes inside acf_register_block() function to show the UI in the editor page. Please find the partial code below:

    ` ‘supports’ => [

    ‘spacing’ => [
    ‘margin’ => [ ‘top’, ‘bottom’ ],
    ‘padding’ => [ ‘top’, ‘bottom’ ],
    ],

    ]`

    Issue #1) The padding UI is showing in the editor page (screenshot: https://snipboard.io/kdugPo.jpg), but the margin UI isn’t showing. What am I missing?
    Issue #2) I see the padding UI and I can input the padding values, but I can’t seem to output the values in my php block template files. What is the code to display both the custom padding and margin values in my php files?

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter rose18

    (@rose18)

    1 year, 11 months ago

    Would anyone know how to resolve these issues?
    Thank you!

    Michael

    (@grinstead)

    1 year, 7 months ago

    Hi, did you find a fix for this? I’m struggling to get the margin & padding styles adding to the frontend. Thanks

    Might be worth posting the question on the ACF support site?

    Michael

    Thread Starter rose18

    (@rose18)

    1 year, 7 months ago

    Hi @grinstead,

    If you have the the padding and Margin UI in the block editor, to can access the padding and margin settings, you can use these:

    $block['style']['spacing']['padding']['top'];
$block['style']['spacing']['padding']['bottom'];
$block['style']['spacing']['padding']['left'];
$block['style']['spacing']['padding']['right'];
$block['style']['spacing']['margin']['top'];
$block['style']['spacing']['margin']['bottom'];
$block['style']['spacing']['margin']['left'];
$block['style']['spacing']['margin']['right'];

    Thanks!

    Michael

    (@grinstead)

    1 year, 7 months ago

    Hi @rose18

    I was missing [style] when I tried different combinations. Thank you so much!

    Michael

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom Line heights + Margin UI in block editor’ is closed to new replies.