WP_DEBUG

Notes about WordPress Gutenberg themes development.

  • GitHub

.htaccess (1) ACF (7) admin (1) ajax (2) api (1) API interactivity (1) block (20) block_style (2) colors (2) constante (1) context (1) conventions (2) cron (1) css (5) custom post type (1) data (1) debug (2) define (1) file_API (1) functions.php (6) git (4) hook (7) i18n (2) js (2) layout (1) loop (1) media (1) media library (1) menu (2) navigation (1) patterns (1) performance (2) post (1) query (3) readmore (1) responsive (1) rest api (1) scss (1) security (7) spacing (1) sql (1) svg (1) taxonomy (1) theme (1) theme.json (11) typo (2) URL (1) wp-config.php (6) wp cli (3) wp function (7)

  • Override blocks style

    # block, block_style, css
    March 12, 2024
    Read more

    To override block styles for rules that can’t be changed through theme.json (complexe rules or non core blocks) , one can use dev__blocks__enqueue_styles function:

    add_action( 'init', 'dev__blocks__enqueue_styles' );
    
    function dev__blocks__enqueue_styles() {
    	foreach ( glob( get_stylesheet_directory() . '/assets/css/blocks-overriding/*', GLOB_ONLYDIR ) as $directory) {
    		$namespace = substr( strrchr( $directory, '/' ), 1 );
    		foreach ( glob( $directory . '/*.css' ) as $file) {
    			$filename = pathinfo( $file, PATHINFO_FILENAME );
    			wp_enqueue_block_style(
    				$namespace . '/' . $filename,
    				array(
    					'handle'	=> 'dw-override--' . $namespace . '-' . $filename,
    					'src'		=> get_stylesheet_directory_uri() . '/assets/css/blocks-overriding/' . $namespace . '/' . $filename . '.css',
    					'path'		=> get_stylesheet_directory() . '/assets/css/blocks-overriding/' . $namespace . '/' . $filename . '.css',
    					'ver'		=> filemtime( get_stylesheet_directory() . '/assets/css/blocks-overriding/' . $namespace . '/' . $filename . '.css' )
    				)
    			);
    		}
    	}
    }

    Source : https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/

  • Enqueuing styles hooks

    # css, hook, wp function
    March 13, 2024
    Read more

    Front + editor

    enqueue_block_assets

    Editor only

    enqueue_block_editor_assets

    Sources:

    • https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/
    • https://developer.wordpress.org/reference/hooks/enqueue_block_assets/
  • Custom css variables

    # css, theme.json
    August 4, 2023
    Read more
    {
        "version": 2,
        "settings": {
            "custom": {
                "line-height": {
                    "body": 1.7,
                    "heading": 1.3
                }
            }
        }
    }

    will be accessible in css --wp--custom--line-height--body

    Note: the custom property can be add into a block, thus enabling overriding.

    Sources :

    • https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#css-custom-properties-presets-custom
    • https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#custom
  • breakpoints

    # css, responsive
    March 12, 2024
    Read more
    // Most used breakpoints
    
    $break-xhuge:		1920px;
    $break-huge:		1440px;
    $break-wide:		1280px;
    $break-xlarge:		1080px;
    $break-large:		960px;	// admin sidebar auto folds
    $break-medium:		782px;	// adminbar goes big
    $break-small:		600px;
    $break-mobile:		480px;
    $break-zoomed-in:	280px;

    Source : https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss

  • css in theme.json

    # css, theme.json
    Read more

    For e.g. on sub item of navigation blocks:

    {
    	"styles": {
    		"blocks": {
    			"core/navigation": {
    				"css": "& a > .wp-block-navigation-item__label { opacity: .5 }"
    			}
    		}
    	}
    }
WP_DEBUG

WP_DEBUG

  • GitHub