1 thought on “(5P) Premium Blocks: Add banner to block preview

  1. I think I just solved the last piece of the puzzle:

    Screenshot 2020-07-14 at 17 49 15 copy

    To get the copy translated, we can make use of editor.BlockListBlock again when requiredPlan is true in the same fashion as we’re doing when adding the class to the block’s wrapper component. This time we’ll pass the title as a data attribute to the wrapperProps:

    wrapperProps={ { 'data-upgrade-title': __( 'Upgrade required', 'jetpack' ) } }

    Then we only need to adjust our CSS a bit and can read the translated title from the DOM like so:

    @import '../../shared/styles/gutenberg-base-styles.scss';
    // Add upgrade notice to block inserter preview
    .block-editor-inserter__preview,
    .block-editor-inserter__preview-container {
    	.has-warning {
    
    		$banner-height: 42px;
    		padding-bottom: $banner-height;
    
    		&:before {
    			content: attr(data-upgrade-title);
    			position: absolute;
    				bottom: 0;
    				right: 0;
    				left: 0;
    			height: $banner-height;
    			z-index: 11;
    			background: $black;
    			color: $white;
    			font-family: $default-font;
    			font-size: 24px;
    			line-height: 37px;
    			text-align: center;
    			overflow: hidden;
    		}
    
    		// Hide notice in child blocks
    		.has-warning:before {
    			display: none;
    		}
    
    		// Hide upgrade nudge
    		.jetpack-block-nudge {
    			display: none;
    		}
    	}
    }
    

Comments are closed.