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

TinyMCE per Block: Adding the align images controls #164

Merged
merged 1 commit into from
Mar 2, 2017
Merged

TinyMCE per Block: Adding the align images controls #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 13 additions & 13 deletions tinymce-per-block/build/app.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion tinymce-per-block/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<body>
<div class="editor"></div>
<script>
window.content = '<!-- wp:heading -->1.0 Is The Loneliest Number<!-- /wp --><!-- wp:quote cite:Jobs -->Design is not just what it looks like and feels like. Design is how it works.<!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp --><!-- wp:text -->A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.<!-- /wp -->\n\n<!-- wp:text -->I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.<!-- /wp --><!-- wp:image --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp --><!-- wp:imagecaption --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp -->';
window.content = '<!-- wp:heading -->1.0 Is The Loneliest Number<!-- /wp --><!-- wp:quote cite:Jobs -->Design is not just what it looks like and feels like. Design is how it works.<!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp --><!-- wp:text -->A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.<!-- /wp -->\n\n<!-- wp:text -->I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.<!-- /wp --><!-- wp:image --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp -->';
</script>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i">
Expand Down
1 change: 0 additions & 1 deletion tinymce-per-block/src/assets/stylesheets/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@import 'animations';
@import '~blocks/text-block/style';
@import '~blocks/image-block/style';
@import '~blocks/image-caption-block/style';
@import '~blocks/heading-block/style';
@import '~blocks/paragraph-block/style';
@import '~blocks/quote-block/style';
Expand Down
52 changes: 49 additions & 3 deletions tinymce-per-block/src/blocks/image-block/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,50 @@
.image-block__display {
display: block;
max-width: 100%;
.image-caption-block {
position: relative;

&.align-full-width {
margin-left: calc(50% - 50vw);
width: 100vw;
max-width: none;
padding-left: 0;
padding-right: 0;

img {
width: 100%;
}
}

&.align-left {
float: left;
width: 340px;
z-index: 1;
}

&.align-right {
float: right;
width: 340px;
z-index: 1;
}


.image-caption-block__display {
display: block;
max-width: 100%;
}

.image-caption-block__caption textarea,
.image-caption-block__caption .textarea-mirror {
margin-top: 10px;
width: 100%;
border: none;
font: inherit;
font-family: "Merriweather", serif;
font-weight: 300;
font-size: 14px;
color: $gray-dark-300;
resize: none;

&:focus {
outline: 0;
}
}
}
94 changes: 85 additions & 9 deletions tinymce-per-block/src/blocks/image-block/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@
*/
import { createElement, Component } from 'wp-elements';
import { find } from 'lodash';
import {
ImageNoAlignIcon,
ImageAlignRightIcon,
ImageAlignLeftIcon,
ImageFullWidthIcon
} from 'dashicons';
import classNames from 'classnames';

import { EnhancedInputComponent } from 'wp-blocks';
import BlockArrangement from 'controls/block-arrangement';

export default class ImageBlockForm extends Component {

Expand All @@ -11,24 +21,90 @@ export default class ImageBlockForm extends Component {
}

focus( position ) {
if ( position !== 0 ) {
this.props.moveUp();
} else {
this.props.moveDown();
}
this.caption.focus( position );
}

bindCaption = ( ref ) => {
this.caption = ref;
}

setImageAlignment = ( id ) => () => {
this.props.setAttributes( { align: id } );
};

render() {
const { block: { children } } = this.props;
const { block, setAttributes, moveDown, moveUp, remove, appendBlock, isFocused } = this.props;
const { attrs, children } = block;
const image = find( children, ( { name } ) => 'img' === name );
if ( ! image ) {
return null;
}
const caption = attrs.caption || '';
const removePrevious = () => {
if ( ! caption ) {
remove();
}
};
const splitValue = ( left, right ) => {
setAttributes( { caption: left } );
appendBlock( {
type: 'WP_Block',
blockType: 'paragraph',
attrs: {},
startText: '<!-- wp:paragraph -->',
endText: '<!-- /wp -->',
rawContent: '<!-- wp:paragraph -->' + right + '<!-- /wp -->',
children: [ {
type: 'Text',
value: right
} ]
} );
};
const imageAlignments = [
{ id: 'no-align', icon: ImageNoAlignIcon },
{ id: 'align-left', icon: ImageAlignLeftIcon },
{ id: 'align-right', icon: ImageAlignRightIcon },
{ id: 'align-full-width', icon: ImageFullWidthIcon },
];
const alignValue = attrs.align || 'no-align';

return (
<img
src={ image.attrs.src }
className="image-block__display" />
<div className={ classNames( 'image-caption-block', alignValue ) }>
{ isFocused && <BlockArrangement block={ block } /> }
{ isFocused &&
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
{ imageAlignments.map( ( { id, icon: Icon } ) =>
<button
key={ id }
onClick={ this.setImageAlignment( id ) }
className={ classNames( 'block-list__block-control', {
'is-selected': alignValue === id
} ) }
>
<Icon />
</button>
) }
</div>
</div>
}
<img
src={ image.attrs.src }
className="image-caption-block__display"
/>
<div className="image-caption-block__caption">
<EnhancedInputComponent
ref={ this.bindCaption }
moveUp={ moveUp }
removePrevious={ removePrevious }
moveDown={ moveDown }
splitValue={ splitValue }
value={ caption }
onChange={ ( value ) => setAttributes( { caption: value } ) }
placeholder="Enter a caption"
/>
</div>
</div>
);
}
}
22 changes: 0 additions & 22 deletions tinymce-per-block/src/blocks/image-caption-block/_style.scss
View file
Open in desktop

This file was deleted.

71 changes: 0 additions & 71 deletions tinymce-per-block/src/blocks/image-caption-block/form.js
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions tinymce-per-block/src/blocks/image-caption-block/index.js
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions tinymce-per-block/src/blocks/paragraph-block/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { createElement, Component } from 'wp-elements';

import EditableFormatToolbar from 'controls/editable-format-toolbar';
import AlignmentToolbar from 'controls/alignment-toolbar';
import BlockArrangement from 'controls/block-arrangement';
import InlineTextBlockForm from '../inline-text-block/form';

export default class ParagraphBlockForm extends Component {
Expand Down Expand Up @@ -35,6 +36,7 @@ export default class ParagraphBlockForm extends Component {

return (
<div>
{ isFocused && <BlockArrangement block={ block } /> }
{ isFocused &&
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
Expand Down
2 changes: 2 additions & 0 deletions tinymce-per-block/src/blocks/quote-block/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { createElement, Component } from 'wp-elements';
import { EditableComponent, EnhancedInputComponent } from 'wp-blocks';
import { serialize } from 'serializers/block';
import EditableFormatToolbar from 'controls/editable-format-toolbar';
import BlockArrangement from 'controls/block-arrangement';

export default class QuoteBlockForm extends Component {
bindContent = ( ref ) => {
Expand Down Expand Up @@ -79,6 +80,7 @@ export default class QuoteBlockForm extends Component {

return (
<div>
{ isFocused && <BlockArrangement block={ block } /> }
{ isFocused &&
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
Expand Down
2 changes: 2 additions & 0 deletions tinymce-per-block/src/blocks/text-block/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { EditableComponent } from 'wp-blocks';
import { serialize } from 'serializers/block';
import AlignmentToolbar from 'controls/alignment-toolbar';
import EditableFormatToolbar from 'controls/editable-format-toolbar';
import BlockArrangement from 'controls/block-arrangement';

export default class TextBlockForm extends Component {
focus( position ) {
Expand Down Expand Up @@ -60,6 +61,7 @@ export default class TextBlockForm extends Component {

return (
<div>
{ isFocused && <BlockArrangement block={ block } /> }
{ isFocused && (
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
Expand Down
31 changes: 31 additions & 0 deletions tinymce-per-block/src/controls/block-arrangement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
* External dependencies
*/
import { createElement } from 'wp-elements';
import { getBlock } from 'wp-blocks';
import { ArrowDownAlt2Icon, ArrowUpAlt2Icon } from 'dashicons';

export default function BlockArrangement( { block } ) {
const blockDefinition = getBlock( block.blockType );
const Icon = blockDefinition.icon;

return (
<div className="block-list__block-arrangement">
<div className="block-list__movement-controls">
<button className="block-list__block-arrange-control">
<ArrowUpAlt2Icon />
</button>
<button className="block-list__block-arrange-control">
<ArrowDownAlt2Icon />
</button>
</div>
{ Icon && (
<div className="block-list__type-controls">
<button className="block-list__block-arrange-control">
<Icon />
</button>
</div>
) }
</div>
);
}
7 changes: 7 additions & 0 deletions tinymce-per-block/src/external/dashicons/icons/image-align-left.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* External dependencies
*/
import { createElement } from 'wp-elements';

// This is a gridicon
export default () => <svg className="dashicon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm0-4h8V9H3v6zm10 0h8v-2h-8v2zm0-4h8V9h-8v2z"></path></g></svg>;
7 changes: 7 additions & 0 deletions tinymce-per-block/src/external/dashicons/icons/image-align-right.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* External dependencies
*/
import { createElement } from 'wp-elements';

// This is a gridicon
export default () => <svg className="dashicon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 7H3V5h18v2zm0 10H3v2h18v-2zm0-8h-8v6h8V9zm-10 4H3v2h8v-2zm0-4H3v2h8V9z"></path></g></svg>;
Loading