render() {
const { previewLink, currentPostLink, isSaveable } = this.props;
// Link to the `?preview=true` URL if we have it, since this lets us see
// changes that were autosaved since the post was last published. Otherwise,
// just link to the post's URL.
const href = previewLink || currentPostLink;
return (
<Button
isLarge
className="editor-post-preview"
href={ href }
target={ this.getWindowTarget() }
disabled={ ! isSaveable }
onClick={ this.openPreviewWindow }
>
{ _x( 'Preview', 'imperative verb' ) }
<span className="screen-reader-text">
{
/* translators: accessibility text */
__( '(opens in a new tab)' )
}
</span>
<DotTip tipId="core/editor.preview">
{ __( 'Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.' ) }
</DotTip>
</Button>
);
}
render() {
const { slug, taxonomy, hasAssignAction } = this.props;
if ( ! hasAssignAction ) {
return null;
}
const { loading, availableTerms, selectedTerms } = this.state;
const termNames = availableTerms.map( ( term ) => term.name );
const newTermLabel = get(
taxonomy,
[ 'labels', 'add_new_item' ],
slug === 'post_tag' ? __( 'Add New Tag' ) : __( 'Add New Term' )
);
const singularName = get(
taxonomy,
[ 'labels', 'singular_name' ],
slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' )
);
const termAddedLabel = sprintf( _x( '%s added', 'term' ), singularName );
const termRemovedLabel = sprintf( _x( '%s removed', 'term' ), singularName );
const removeTermLabel = sprintf( _x( 'Remove %s', 'term' ), singularName );
return (
<FormTokenField
value={ selectedTerms }
displayTransform={ unescapeString }
suggestions={ termNames }
onChange={ this.onChange }
onInputChange={ this.searchTerms }
maxSuggestions={ MAX_TERMS_SUGGESTIONS }
disabled={ loading }
label={ newTermLabel }
messages={ {
added: termAddedLabel,
removed: termRemovedLabel,
remove: removeTermLabel,
} }
/>
);
}
render() {
const { link, isSaveable } = this.props;
return (
<IconButton
href={ link }
onClick={ this.saveForPreview }
target={ this.getWindowTarget() }
icon="visibility"
disabled={ ! isSaveable }
label={ _x( 'Preview', 'imperative verb' ) }
/>
);
}
render() {
const { link, isSaveable } = this.props;
return (
<Button
className="editor-post-preview"
isLarge
href={ link }
onClick={ this.saveForPreview }
target={ this.getWindowTarget() }
disabled={ ! isSaveable }
>
{ _x( 'Preview', 'imperative verb' ) }
</Button>
);
}
render() {
const { currentPostLink, isSaveable } = this.props;
return (
<Button
className="editor-post-preview"
isLarge
href={ currentPostLink }
onClick={ this.saveForPreview }
target={ this.getWindowTarget() }
disabled={ ! isSaveable }
>
{ _x( 'Preview', 'imperative verb' ) }
<DotTip id="core/editor.preview">
{ __( 'Click ‘Preview’ to load a preview of this page, so you can make sure you’re happy with your blocks.' ) }
</DotTip>
</Button>
);
}
.then( ( term ) => {
const hasTerm = !! find( this.state.availableTerms, ( availableTerm ) => availableTerm.id === term.id );
const newAvailableTerms = hasTerm ? this.state.availableTerms : [ term, ...this.state.availableTerms ];
const termAddedMessage = sprintf(
_x( '%s added', 'term' ),
get(
this.props.taxonomy,
[ 'data', 'labels', 'singular_name' ],
slug === 'category' ? __( 'Category' ) : __( 'Term' )
)
);
this.props.speak( termAddedMessage, 'assertive' );
this.addRequest = null;
this.setState( {
adding: false,
formName: '',
formParent: '',
availableTerms: newAvailableTerms,
availableTermsTree: buildTermsTree( newAvailableTerms ),
} );
onUpdateTerms( [ ...terms, term.id ], restBase );
}, ( xhr ) => {
},
};
export const name = 'core/quote';
export const settings = {
title: __( 'Quote' ),
description: __( 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' ),
icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M19 18h-6l2-4h-2V6h8v7l-2 5zm-2-2l2-3V8h-4v4h4l-2 4zm-8 2H3l2-4H3V6h8v7l-2 5zm-2-2l2-3V8H5v4h4l-2 4z" /></G></SVG>,
category: 'common',
keywords: [ __( 'blockquote' ) ],
attributes: blockAttributes,
styles: [
{ name: 'default', label: _x( 'Regular', 'block style' ), isDefault: true },
{ name: 'large', label: _x( 'Large', 'block style' ) },
],
transforms: {
from: [
{
type: 'block',
isMultiBlock: true,
blocks: [ 'core/paragraph' ],
transform: ( attributes ) => {
return createBlock( 'core/quote', {
value: toHTMLString( {
value: join( attributes.map( ( { content } ) =>
create( { html: content } )
), '\u2028' ),
},
},
},
effect: {
type: 'string',
default: 'slide',
},
};
export const name = 'slideshow';
export const settings = {
title: __( 'Slideshow', 'jetpack' ),
category: 'jetpack',
keywords: [
_x( 'image', 'block search term', 'jetpack' ),
_x( 'gallery', 'block search term', 'jetpack' ),
_x( 'slider', 'block search term', 'jetpack' ),
],
description: __( 'Add an interactive slideshow.', 'jetpack' ),
attributes,
supports: {
align: [ 'center', 'wide', 'full' ],
html: false,
},
icon,
edit,
save,
transforms,
};
SelectControl,
ToggleControl,
Toolbar,
withNotices,
} from '@wordpress/components';
/**
* Internal dependencies
*/
import Slideshow from './slideshow';
import './editor.scss';
const ALLOWED_MEDIA_TYPES = [ 'image' ];
const effectOptions = [
{ label: _x( 'Slide', 'Slideshow transition effect', 'jetpack' ), value: 'slide' },
{ label: _x( 'Fade', 'Slideshow transition effect', 'jetpack' ), value: 'fade' },
];
export const pickRelevantMediaFiles = image =>
pick( image, [ 'alt', 'id', 'link', 'url', 'caption' ] );
class SlideshowEdit extends Component {
constructor() {
super( ...arguments );
this.state = {
selectedImage: null,
};
}
setAttributes( attributes ) {
if ( attributes.ids ) {
height="118"
x="5"
y="5"
ry="10"
stroke="currentColor"
strokeWidth="10"
fill="none"
/>
<Path d="M30 98v-68h20l20 25 20-25h20v68h-20v-39l-20 25-20-25v39zM155 98l-30-33h20v-35h20v35h20z" />
</SVG>
),
category: 'jetpack',
keywords: [
_x( 'formatting', 'block search term', 'jetpack' ),
_x( 'syntax', 'block search term', 'jetpack' ),
_x( 'markup', 'block search term', 'jetpack' ),
],
attributes: {
//The Markdown source is saved in the block content comments delimiter
source: { type: 'string' },
},
supports: {
html: false,
},
edit,
/**
* External Dependencies
*/
import { __, _x } from '@wordpress/i18n';
import { Dropdown, MenuItem, NavigableMenu, Path, SVG, Toolbar } from '@wordpress/components';
const availableFilters = [
{
icon: (
/* No filter */
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<Path fill="none" d="M0 0h24v24H0V0z" />
<Path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" />
</SVG>
),
title: _x( 'Original', 'image style', 'jetpack' ),
value: undefined,
},
{
icon: (
/* 1 */
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<Path fill="none" d="M0 0h24v24H0V0z" />
<Path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm11 10h2V5h-4v2h2v8zm7-14H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" />
</SVG>
),
title: _x( 'Black and White', 'image style', 'jetpack' ),
value: 'black-and-white',
},
{
icon: (
export const icon = renderMaterialIcon(
<Path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
);
export const settings = {
attributes: {
criteria: {
type: 'string',
default: CRITERIA_AFTER,
},
threshold: {
type: 'number',
default: DEFAULT_THRESHOLD,
},
},
category: 'jetpack',
description: __(
'Control block visibility based on how often a visitor has viewed the page.',
'jetpack'
),
icon,
keywords: [
_x( 'return', 'block search term', 'jetpack' ),
_x( 'visitors', 'block search term', 'jetpack' ),
_x( 'visibility', 'block search term', 'jetpack' ),
],
supports: { html: false },
title: __( 'Repeat Visitor', 'jetpack' ),
edit,
save,
};
},
{
name: __( 'Cyan bluish gray' ),
slug: 'cyan-bluish-gray',
color: '#abb8c3',
},
{
name: __( 'Very dark gray' ),
slug: 'very-dark-gray',
color: '#313131',
},
],
fontSizes: [
{
name: _x( 'Small', 'font size name' ),
size: 13,
slug: 'small',
},
{
name: _x( 'Normal', 'font size name' ),
size: 16,
slug: 'normal',
},
{
name: _x( 'Medium', 'font size name' ),
size: 20,
slug: 'medium',
},
{
name: _x( 'Large', 'font size name' ),
export const settings = {
title: __( 'Related Posts', 'jetpack' ),
icon: (
<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<G stroke="currentColor" strokeWidth="2" strokeLinecap="square">
<Path d="M4,4 L4,19 M4,4 L19,4 M4,9 L19,9 M4,14 L19,14 M4,19 L19,19 M9,4 L9,19 M19,4 L19,19" />
</G>
</SVG>
),
category: 'jetpack',
keywords: [
_x( 'Similar content', 'block search term', 'jetpack' ),
_x( 'Linked', 'block search term', 'jetpack' ),
_x( 'Connected', 'block search term', 'jetpack' ),
],
attributes: {
postLayout: {
type: 'string',
default: 'grid',
},
displayDate: {
type: 'boolean',
default: true,
},
displayThumbnails: {
type: 'boolean',
/**
* WordPress dependencies
*/
import { RawHTML } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { Path, Rect, SVG } from '@wordpress/components';
/**
* Internal dependencies
*/
import edit from './edit';
export const name = 'core/freeform';
export const settings = {
title: _x( 'Classic', 'block title' ),
description: __( 'Use the classic WordPress editor.' ),
icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M0,0h24v24H0V0z M0,0h24v24H0V0z" fill="none" /><Path d="m20 7v10h-16v-10h16m0-2h-16c-1.1 0-1.99 0.9-1.99 2l-0.01 10c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2z" /><Rect x="11" y="8" width="2" height="2" /><Rect x="11" y="11" width="2" height="2" /><Rect x="8" y="8" width="2" height="2" /><Rect x="8" y="11" width="2" height="2" /><Rect x="5" y="11" width="2" height="2" /><Rect x="5" y="8" width="2" height="2" /><Rect x="8" y="14" width="8" height="2" /><Rect x="14" y="11" width="2" height="2" /><Rect x="14" y="8" width="2" height="2" /><Rect x="17" y="11" width="2" height="2" /><Rect x="17" y="8" width="2" height="2" /></SVG>,
category: 'formatting',
attributes: {
content: {
type: 'string',
source: 'html',
},
},
supports: {
LAYOUT_STYLES,
} from './constants';
/**
* Style dependencies
*/
import './editor.scss';
import * as deprecatedV1 from './deprecated/v1';
// Style names are translated. Avoid introducing an i18n dependency elsewhere (view)
// by only including the labels here, the only place they're needed.
//
// Map style names to labels and merge them together.
const styleNames = {
[ LAYOUT_DEFAULT ]: _x( 'Tiled mosaic', 'Tiled gallery layout', 'jetpack' ),
[ LAYOUT_CIRCLE ]: _x( 'Circles', 'Tiled gallery layout', 'jetpack' ),
[ LAYOUT_COLUMN ]: _x( 'Tiled columns', 'Tiled gallery layout', 'jetpack' ),
[ LAYOUT_SQUARE ]: _x( 'Square tiles', 'Tiled gallery layout', 'jetpack' ),
};
const layoutStylesWithLabels = LAYOUT_STYLES.map( style => ( {
...style,
label: styleNames[ style.name ],
} ) );
const blockAttributes = {
// Set default align
align: {
default: 'center',
type: 'string',
},
import JetpackField from './components/jetpack-field';
import JetpackFieldTextarea from './components/jetpack-field-textarea';
import JetpackFieldCheckbox from './components/jetpack-field-checkbox';
import JetpackFieldMultiple from './components/jetpack-field-multiple';
import renderMaterialIcon from '../../shared/render-material-icon';
export const name = 'contact-form';
export const settings = {
title: __( 'Form', 'jetpack' ),
description: __( 'A simple way to get feedback from folks visiting your site.', 'jetpack' ),
icon: renderMaterialIcon(
<Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" />
),
keywords: [
_x( 'email', 'block search term', 'jetpack' ),
_x( 'feedback', 'block search term', 'jetpack' ),
_x( 'contact', 'block search term', 'jetpack' ),
],
category: 'jetpack',
supports: {
reusable: false,
html: false,
},
attributes: {
subject: {
type: 'string',
default: '',
},
to: {
type: 'string',
const attributes = {
email: {
type: 'string',
default: '',
},
};
export const name = 'email';
export const settings = {
title: __( 'Email Address', 'jetpack' ),
description: __(
'Lets you add an email address with an automatically generated click-to-email link.',
'jetpack'
),
keywords: [
'e-mail', // not translatable on purpose
'email', // not translatable on purpose
_x( 'message', 'block search term', 'jetpack' ),
],
icon: renderMaterialIcon(
<Path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z" />
),
category: 'jetpack',
attributes,
edit,
save,
parent: [ 'jetpack/contact-info' ],
};