Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update/cover image block #12405

Closed
wants to merge 10 commits into from
Prev Previous commit
Next Next commit
Made cover block text a heading with selectable level
  • Loading branch information
mrmadhat committed Nov 28, 2018
commit 924c37f5c85311affc4c27aadbdfb28f5626f6ca
23 changes: 19 additions & 4 deletions packages/block-library/src/cover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import HeadingToolbar from '../heading/heading-toolbar';

import {
IconButton,
PanelBody,
Expand Down Expand Up @@ -40,7 +42,11 @@ const blockAttributes = {
title: {
type: 'string',
source: 'html',
selector: 'p',
selector: 'h1, h2, h3, h4, h5, h6',
},
level: {
type: 'number',
default: 2,
},
url: {
type: 'string',
Expand Down Expand Up @@ -189,6 +195,7 @@ export const settings = {
id,
title,
url,
level,
} = attributes;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
const onSelectMedia = ( media ) => {
Expand Down Expand Up @@ -226,6 +233,8 @@ export const settings = {
const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
const setTitle = ( newTitle ) => setAttributes( { title: newTitle } );

const tagName = 'h' + level;

const style = {
...(
backgroundType === IMAGE_BACKGROUND_TYPE ?
Expand Down Expand Up @@ -282,7 +291,10 @@ export const settings = {
</BlockControls>
{ !! url && (
<InspectorControls>
<PanelBody title={ __( 'Cover Settings' ) }>
<PanelBody title={ __( 'Cover Heading Settings' ) }>
<HeadingToolbar label={ __( 'Heading level' ) } minLevel={ 1 } maxLevel={ 7 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
</PanelBody>
<PanelBody title={ __( 'Cover Background Settings' ) }>
{ IMAGE_BACKGROUND_TYPE === backgroundType && (
<ToggleControl
label={ __( 'Fixed Background' ) }
Expand Down Expand Up @@ -365,7 +377,7 @@ export const settings = {
) }
{ ( ! RichText.isEmpty( title ) || isSelected ) && (
<RichText
tagName="p"
tagName={ tagName }
className="wp-block-cover-text"
placeholder={ __( 'Write title…' ) }
value={ title }
Expand All @@ -390,7 +402,10 @@ export const settings = {
overlayColor,
title,
url,
level,
} = attributes;

const tagName = 'h' + level;
const overlayColorClass = getColorClassName( 'background-color', overlayColor );
const style = backgroundType === IMAGE_BACKGROUND_TYPE ?
backgroundImageStyles( url ) :
Expand Down Expand Up @@ -420,7 +435,7 @@ export const settings = {
src={ url }
/> ) }
{ ! RichText.isEmpty( title ) && (
<RichText.Content tagName="p" className="wp-block-cover-text" value={ title } />
<RichText.Content tagName={ tagName } className="wp-block-cover-text" value={ title } />
) }
</div>
);
Expand Down