@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
70 lines (66 loc) • 3.74 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _style = _interopRequireDefault(require("./style.scss"));
var _viewSections = require("./view-sections");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const IntroToBlocks = () => {
const titleStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.helpDetailTitle, _style.default.helpDetailTitleDark);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailImage, {
source: require('./images/block-layout-collage.png')
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default.helpDetailContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
accessibilityRole: "header",
selectable: true,
style: titleStyle,
children: (0, _i18n.__)('Welcome to the world of blocks')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailBodyText, {
text: (0, _i18n.__)('Blocks are pieces of content that you can insert, rearrange, and style without needing to know how to code. Blocks are an easy and modern way for you to create beautiful layouts.')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailSectionHeadingText, {
text: (0, _i18n.__)('Rich text editing')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailBodyText, {
text: (0, _i18n.__)('Blocks allow you to focus on writing your content, knowing that all the formatting tools you need are there to help you get your message across.')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailImage, {
accessible: true,
accessibilityLabel: (0, _i18n.__)('Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block'),
source: require('./images/rich-text-light.png'),
sourceDarkMode: require('./images/rich-text-dark.png')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailSectionHeadingText, {
text: (0, _i18n.__)('Embed media')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailBodyText, {
text: (0, _i18n.__)('Make your content stand out by adding images, gifs, videos, and embedded media to your pages.')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailImage, {
source: require('./images/embed-media-light.png'),
sourceDarkMode: require('./images/embed-media-dark.png')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailSectionHeadingText, {
text: (0, _i18n.__)('Build layouts')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailBodyText, {
text: (0, _i18n.__)('Arrange your content into columns, add Call to Action buttons, and overlay images with text.')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailImage, {
source: require('./images/build-layouts-light.png'),
sourceDarkMode: require('./images/build-layouts-dark.png')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewSections.HelpDetailBodyText, {
text: (0, _i18n.__)('Give it a try by adding a few blocks to your post or page!')
})]
})]
});
};
var _default = exports.default = IntroToBlocks;
//# sourceMappingURL=intro-to-blocks.native.js.map