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.

Sign up for GitHub

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
Closed

Update/cover image block #12405

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a751593
Fix broken links to block readme
mrmadhat Jun 6, 2018
85bc39d
Merge remote-tracking branch 'upstream/master'
mrmadhat Aug 23, 2018
87e9b45
Merge remote-tracking branch 'upstream/master'
mrmadhat Oct 19, 2018
bb49efc
Merge remote-tracking branch 'upstream/master'
mrmadhat Oct 26, 2018
b481370
Merge remote-tracking branch 'upstream/master'
mrmadhat Nov 6, 2018
4df9d33
Merge remote-tracking branch 'upstream/master'
mrmadhat Nov 14, 2018
ef9c41c
Merge remote-tracking branch 'upstream/master'
mrmadhat Nov 19, 2018
fa88ea8
Merge remote-tracking branch 'upstream/master'
mrmadhat Nov 28, 2018
924c37f
Made cover block text a heading with selectable level
mrmadhat Nov 28, 2018
12df6f2
Added old save method/attributes to depreciated array
mrmadhat Nov 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 75 additions & 4 deletions packages/block-library/src/cover/index.js
View file
Open in desktop
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 Expand Up @@ -491,6 +506,62 @@ export const settings = {
</section>
);
},
}, {
attributes: {
...blockAttributes,
title: {
type: 'string',
source: 'html',
selector: 'p',
},
},

save( { attributes } ) {
const {
align,
backgroundType,
contentAlign,
customOverlayColor,
dimRatio,
hasParallax,
overlayColor,
title,
url,
} = attributes;
const overlayColorClass = getColorClassName( 'background-color', overlayColor );
const style = backgroundType === IMAGE_BACKGROUND_TYPE ?
backgroundImageStyles( url ) :
{};
if ( ! overlayColorClass ) {
style.backgroundColor = customOverlayColor;
}

const classes = classnames(
dimRatioToClass( dimRatio ),
overlayColorClass,
{
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
},
align ? `align${ align }` : null,
);

return (
<div className={ classes } style={ style }>
{ VIDEO_BACKGROUND_TYPE === backgroundType && url && ( <video
className="wp-block-cover__video-background"
autoPlay
muted
loop
src={ url }
/> ) }
{ ! RichText.isEmpty( title ) && (
<RichText.Content tagName="p" className="wp-block-cover-text" value={ title } />
) }
</div>
);
},
} ],
};

Expand Down